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

Question

我有两个div属于“事物”类。 我想使用javascript访问它们中的所有p标签，并更改它们的颜色。 这是我正在尝试的方法，但是不起作用：

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

</div>

Java脚本

   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

您的变量changes是一个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> 

Answer 2

您可以使用以下内容

var paragraphs = document.querySelectorAll('#top p')