Question

我尝试过使用textContent和innerHTML，但未能将hello world改为再见。

<div data-test='hello'>
hello world
</div>

var test = document.querySelectorAll("[data-test='hello']");
//test.textContent = "goodbye";
test.innerHTML = "goodbye";

Answer 1

将querySelectorAll更改为querySelector

<div data-test='hello'>
    hello world
</div>
<script>
    var test = document.querySelector("[data-test='hello']");
    //test.textContent = "goodbye";
    test.innerHTML = "goodbye";
</script>

https://jsfiddle.net/9evue27z/

Answer 2

按文档定义：querySelectorAll（）方法返回文档中与指定CSS选择器匹配的所有元素，作为静态NodeList对象。

querySelectorAll方法返回array，然后您可以更改第一个元素，如下所示：

var test = document.querySelectorAll('[data-test="hello"]');
test[0].innerHTML = "goodbye";

<div data-test='hello'>
  hello world
</div>

Answer 3

如果有data-test个元素可能有多个，您仍然可以使用document.querySelectorAll。

var test = document.querySelectorAll("[data-test='hello']");
for (var i = 0; i <= test.length; i++) {
    test[i].innerHTML = "goodbye";
}

// or using newer syntax
test.forEach(x => x.innerHTML = "goodbye");

如何根据数据属性更改元素值？

3 个答案: