Javascript:更改具有特定类和属性的元素 -> 纯 Javascript

Question

首先，不仅在这个网站上，外面还有很多类似的问题。

但我搜索了至少 3 个小时的解决方案，但从未找到合适且有效的解决方案。

还有一些线程是很久以前创建的，所以一些解决方案更复杂/不起作用并且不使用今天的可能性。

---

问题来了:

HTML 文件可能如下所示:

<ul>
  <li><a class="content" href="this.com">I should change!</a>
  </li>
  <li><a class="content" href="any.com">I don't change</a>
  </li>
  <li><a class="content" href="this.com">I should change! too</a>
  </li>
  <li><a class="content" href="any.com">I don't change</a>
  </li>
  <li><a class="content" href="this.com">I also should change!</a>
  </li>
</ul>

现在我想获取所有具有属性 class="content" 的元素.

(我尝试了 document.getElementsByClassName() 和 document.querySelector() 的解决方案。)

然后只改变那些也包含 href="this.com" 的那些.

---

下面是解决方案应该通过的“挑战”:

• 没有 jQuery 和合作。 -> 纯 javascript

• 你只能使用 javascript(整个解决方案应该通过将 script.js 注入(inject)网站来工作)

• 如果可能:没有循环

我不想让它变得比它应该的更复杂，只是认为必须有一种方法可以像这样仅针对类轻松更改多个对象:

document.getElementById("theID").innerHTML = "text"

所以如果有什么方法可以不用循环就太好了

(当涉及到循环解决方案时，看到了很多带有一些计数功能“i < variable.length; i++”的解决方案。但认为像 .innerHTML = "" 这样的简单功能比运行循环要干净得多)

• 最后:如果你知道我如何轻松删除 <li></li>所选择的对象，并会告诉我知道，我将非常感激。

(我知道 .parentNode 但如果我尝试这个它更像是一个“错误和重试冒险”)

删除父项的父项也有问题，或者我可以只使用 .parentNode.parentNode ？

---

如果有人有想法或可行的解决方案，我将非常高兴。

非常感谢!

Answer 1

不行，没有循环不行，你想作用于多个元素，你需要一个循环

window.onload = function() {
    var elems = document.querySelectorAll('.content[href="this.com"]');
    for(var i=0;i<elems.length;i++){
      elems[i].innerHTML = "Im changed."   
    }
}

<ul>
  <li><a class="content" href="this.com">I should change!</a>
  </li>
  <li><a class="content" href="any.com">I don't change</a>
  </li>
  <li><a class="content" href="this.com">I should change! too</a>
  </li>
  <li><a class="content" href="any.com">I don't change</a>
  </li>
  <li><a class="content" href="this.com">I also should change!</a>
  </li>
</ul>

如评论中所述，以上内容可以更改为:

window.onload = function() {
    [].forEach.call(document.querySelectorAll('.content[href="this.com"]'),function(e){
       e.innerHTML = "Im changed by forEach, its still a loop!"; 
    });
}

但它仍然只是一个循环，只是隐藏在为提供的数组中的每个项目调用委托(delegate)的方法后面!

至于打开你的 <li>他可能有用:Removing wrapper div without Jquery (raw javascript) (使用 <li> 执行此操作的过程或多或少是相同的)。