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"的内容。

以下是＆＃34;挑战＆＃34;解决方案应该通过：

没有jQuery和co。 - ＆GT;纯javascript
你只能使用javascript（整个解决方案应该通过将script.js注入网站来实现）
如果可能：没有循环

我不想让它变得比它应该更复杂，只是认为必须有一种方法可以像这样简单地为类更改多个对象：

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

因此，如果有任何方法可以在没有循环的情况下实现它，那就太棒了

（在谈到循环解决方案时，看到了很多具有计算功能的解决方案＆＃34; i < variable.length; i++＆＃34;但是认为它更简洁，功能更简单{{1}而不是运行循环）

最后：如果您知道如何轻松删除所选对象的.innerHTML = ""并告诉我，我会非常感激。

（我知道<li></li>但如果我尝试使用此功能，那就更多了＆＃34;错误和重试冒险＆＃34;）

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

如果有人有想法或工作解决方案，我会非常高兴。

非常感谢！

Answer 1

测试它：

<script>
window.onload = function() {
    var contentClass = document.getElementsByClassName("content");
    for (var i = 0; i < contentClass.length; i++) {
        if (contentClass.item(i).getAttribute("href") == "this.com") {
            contentClass.item(i).innerHTML = "Changed !";   
        }
    }
}
</script>

Answer 2

尝试更改第一个

document.querySelectorAll('.content[href="this.com"]')[0].innerHTML = "Changed!!!"

要应用于所有选定的元素，

var elems = document.querySelectorAll('.content[href="this.com"]');
Array.prototype.sort.call(
    Array.prototype.slice.call(elems, 0), 
    function(el1,el2){
        el1.innerHTML="Changed!!!"; 
        el2.innerHTML="Changed!!!"
    }
)

Answer 3

不，没有循环就无法完成，你想要对多个元素进行操作，你需要一个循环

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!"; 
    });
}

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

至于展开你的<li>他可能有用：Removing wrapper div without Jquery (raw javascript)（使用<li>执行此操作的程序或多或少相同）。

Answer 4

// get all elements which contents className="content"
var contents = document.getElementsByClassName('content');

// In a loop
for (i = 0; i < contents.length; i++) {
    // If current element contains href="this.com"...
    if (contents[i].href.indexOf("this.com") > -1)
        // then change its innerHTML
        contents[i].innerHTML = "text";
}

// second way, little faster that first one
// get all A elements
var as = document.getElementsByTagName('a');

// In a loop
for (i = 0; i < as.length; i++) {
    // If current element contains href="this.com"...
    if (as[i].href.indexOf("this.com") > -1)
        // then change its innerHTML
        as[i].innerHTML = "text";
}

// third way, long. Do not do such a things
var allElements = document.getElementsByTagName("*");

// In a loop
for (i = 0; i < allElements.length; i++) {
    // If current element contains className="content"...
    if (allElements[i].className == "content")
        // And if its href="this.com"
        if (allElements[i].href.indexOf("this.com") > -1)
            // Change its innerHTML
            allElements.innerHTML = "text";
}

Javascript：更改具有特定类和属性的元素 - ＆gt;纯Javascript

4 个答案: