Question

我有两个div＆＃34; thing＆＃34;。我想使用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

您的变量changes是一个HTMLCollection，它没有getElementsByTagName方法。您必须在集合中的每个元素上调用该方法才能获得所需的内容。但是，这似乎是使用document.querySelectorAll的好地方，这样您就可以在一次通话中获得所需的元素：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用以下

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

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

2 个答案: