javascript - document.getElementById 有效，但 document.getElementsByTagName 无效

Question

要选择 div 内的所有 p 标签 - 它适用于 document.getElementById()但不包括 document.getElementsByTagName() 。这是为什么？

<div id="myDIV">
   <h2 class="example">A heading with class="example" in div</h2>
   <p>Para 1 first</p> 
   <p>Para 2</p> 
   <p>Para 3</p> 
   <p>Para 4</p> 
</div>

<button onclick="myFunction()">Submit</button>

这有效

function myFunction() {
    var x = document.getElementById("myDIV").querySelectorAll("p");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
    }
}

这不

function myFunction() {
    var x = document.getElementsByTagName("div").querySelectorAll("p");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
    }
}

Answer 1

我建议使用直接选择器，例如:

document.querySelectorAll("#myDIV p");
//Or
document.querySelectorAll("div p");

希望这有帮助。

var x = document.querySelectorAll("div p");
var i;

for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

<div id="myDIV">
   <h2 class="example">A heading with class="example" in div</h2>
   <p>Para 1 first</p> 
   <p>Para 2</p> 
   <p>Para 3</p> 
   <p>Para 4</p> 
</div>