如何使用 javascript 訪問嵌套子節點

Question

這是代碼，我需要使用 javascript 訪問第二個<p>元素，我嘗試了很多無法訪問它的方法。 請幫助我

<div class="demo">
  <div>
    <p>Some Text...</p>
    <p><b>Author:</b> Author Name</p>
    <p>Some Text...</p>
  </div>
</div>

Answer 1

您可以使用getElementsByTagName()並獲取列表中的第二個元素。

const secondP = document.getElementsByTagName("p")[1];

Answer 2

您可以通過標簽名稱獲取元素檢查此文檔： https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName

const allParas = document.getElementsByTagName('p'); // collection of all p tags
allParas[1]; // sencond p tag

Answer 3

您可以使用nth-child select 第二個p標簽。 出於演示目的，我將文本塗成紅色。

 let p = document.querySelector(".demo div p:nth-child(2)") p.style.color = "red";

 <div class="demo"> <div> <p>Some Text... </p> <p><b>Author:</b> Author Name </p> <p>Some Text... </p> </div> </div>

Answer 4

如接受的答案所示，您可以安全地使用nth-child(n)選擇器，但這可能更適合動態訪問第n個孩子。 如;

var n = 2;
document.querySelector(`.demo div p:nth-child(${n})`);

另一方面，CSS 選擇器組合器也非常強大。 如果您只是想訪問第一個<p>之后的下一個<p>直接位於 <div> 下方，該<div>位於帶有.demo class 的元素下方。 所以".demo > div > p + p"就足夠了。 在這種特殊情況下，我們在.demo下沒有任何嵌套的div ，因此我們也可以像".demo div p + p"那樣做。

 var el = document.querySelector(".demo > div > p + p"); console.log(el.textContent)

 <div class="demo"> <div> <p>Some Text...</p> <p><b>Author:</b> Author Name</p> <p>Some Text...</p> </div> </div>