如何将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>

我想：

在列表中找到单词 karate，然后返回最近的 <li>
将其（<li> 标签）标记为开始位置。
结束位置将是它的结束 </li> 标签。
将结果存储在字符串变量中。
Add/append 此属性 : style="color:red;" 到 <li> 标签。
点击按钮，然后使用 JavaScript。

结果：图片 1、图片 2 和图片 4 将被着色为红色，图片 3 和图片 5 将被忽略。

我不想使用 JQuery 或像 Cherrio 这样的导入 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>

如何将html从某个位置提取到另一个位置并使用JavaScript为其添加属性？

How to extract html from certain position to another and add an attribute to it using JavaScript?

html

javascript

screen-scraping