如何根據數據屬性更改元素值？

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