如何从JavaScript的某个位置提取HTML并使用JavaScript向其添加属性？

Question

我有这个html：

<ul>
   <li><a href="img/karate/image1.jpg">Image 1</a></li>
   <li><a href="img/karate/image2.jpg">Image 2</a></li>
   <li><a href="img/boxing/image3.jpg">Image 3</a></li>
   <li><a href="img/karate/image4.jpg">Image 4</a></li>
   <li><a href="img/kungfu/image5.jpg">Image 5</a></li>
</ul>  

<button type="button">Red Color</button>

我想要 ：

1. 在列表中找到karate一词，然后返回最接近的<li>
2. 将其标记（ <li>标记）作为开始位置。
3. 结束位置应为其结束</li>标记。
4. 将结果存储在字符串变量中。
5. 添加/附加此属性： style="color:red;" 到<li>标记。
6. 通过单击按钮并使用JavaScript，可以完成所有这些操作。

结果：图像1，图像2和图像4将变为红色，图像3和图像5将被忽略。

我不想使用像Cherrio这样的JQuery或导入的JS文件，因为我想了解每一行！

我发现了所谓的网页抓取，机器人抓取...之类的东西，但我仍然不明白，因此，不胜感激。

非常感谢你。

Answer 1

 "use strict"; let button = document.querySelector('#button'); button.addEventListener('click', onButtonClick); function onButtonClick() { let urls = document.querySelectorAll('a'); for (let i = 0, max = urls.length; i < max; i++) { if (urls[i].href.indexOf('karate') !== -1) { if(urls[i].parentNode.tagName === 'LI') { urls[i].parentNode.className = 'makeRed'; } } } } 

 .makeRed, .makeRed a { color: #FF0000; } 

 <ul> <li><a href="img/karate/image1.jpg">Image 1</a></li> <li><a href="img/karate/image2.jpg">Image 2</a></li> <li><a href="img/boxing/image3.jpg">Image 3</a></li> <li><a href="img/karate/image4.jpg">Image 4</a></li> <li><a href="img/kungfu/image5.jpg">Image 5</a></li> </ul> <button type="button" id="button">Red Color</button>