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

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 将被忽略。

我不想使用 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>