Javascript - 在 div 中定位 p 标签不返回任何内容

Question

我有两个“thing”类的 div。我想使用 javascript 访问其中的所有 p 标签并更改它们的颜色。这就是我正在尝试的，但它不起作用:

<div id="top" class="thing">
    <p>kdjflksj siuiotue</p>
    <p>kdjflksj siuiotue</p>
    <p>kdjflksj siuiotue</p>    

</div>

Javascript

   var changes = document.getElementsByClassName("thing");
   var pchanges = changes.getElementsByTagName("p");

   for(let i = 0; i < pchanges.length; i++) {

    pchanges[i].onmouseover = function() {

        this.style.color = "blue";
    }

    pchanges[i].onmouseout = function(){
        this.style.color = "black";
    }

}

JavaScript 位于 window.onload 函数内。

Answer 1

您的变量更改是 HTMLCollection它没有 getElementsByTagName 方法。您必须对集合内的每个元素调用该方法才能获得您想要的内容。不过，这看起来是一个使用 document.querySelectorAll 的好地方，这样您就可以在一次调用中获取所需的元素:

var pchanges = document.querySelectorAll(".thing p");

for(let i = 0; i < pchanges.length; i++) {
    pchanges[i].onmouseover = function() {
        this.style.color = "blue";
    }

    pchanges[i].onmouseout = function(){
        this.style.color = "black";
    }
}

<div id="top" class="thing">
    <p>kdjflksj siuiotue</p>
    <p>kdjflksj siuiotue</p>
    <p>kdjflksj siuiotue</p>    
</div>