如何在具有給定類名的特定div中找到DOM子節點？

Question

我有一個分層div部分如下：

<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b1</button>
    </div>
    <div class="class4">
        <p>first text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b2</button>
    </div>
    <div class="class4">
        <p>second text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b3</button>
    </div>
    <div class="class4">
        <p>third text</p>
    </div>
</div>
<div class="class1">
    <div class="class2">
        <button class="class3" onclick="bclick(this)">b4</button>
    </div>
    <div class="class4">
        <p>fourth text</p>
    </div>
</div>

當我點擊任何按鈕，說按鈕b3 ，我想在javascript中獲取文本third text ，而不是jquery。

所以在我的bclick()函數中，我得到了如下的根元素：

function bclick(obj) {
    let class1obj = obj.parentNode.parentNode;
    // don't know what to do next to get to class 4 and then get the <p> text.
}

我想進入class4來獲取<p>標簽的內容，在這種情況下我想要的b3文本是third text 。

不知道該怎么做。 由於出現了多次類，我想只獲得一個包含單擊按鈕的特定類。

Answer 1

您可以在父級上使用Element.querySelector() ，並為每個父元素選擇.class4的<p>元素。

obj.parentNode.parentNode.querySelector('.class4 p')

請參閱工作代碼段

 function bclick(elm){ const parent = elm.parentNode.parentNode; console.log(parent.querySelector('.class4 p').innerHTML) } 

 <div class="class1"> <div class="class2"> <button class="class3" onclick="bclick(this)">b1</button> </div> <div class="class4"> <p>first text</p> </div> </div> <div class="class1"> <div class="class2"> <button class="class3" onclick="bclick(this)">b2</button> </div> <div class="class4"> <p>second text</p> </div> </div> <div class="class1"> <div class="class2"> <button class="class3" onclick="bclick(this)">b3</button> </div> <div class="class4"> <p>third text</p> </div> </div> <div class="class1"> <div class="class2"> <button class="class3" onclick="bclick(this)">b4</button> </div> <div class="class4"> <p>fourth text</p> </div> </div> 

Answer 2

您可以在父節點上使用Document​.query​Selector() ：

Document方法querySelector()返回文檔中與指定選擇器或選擇器組匹配的第一個Element。 如果未找到匹配項，則返回null。

 function bclick(obj) { let class1obj = obj.parentNode.parentNode.querySelector('.class4 > p'); console.log(class1obj.textContent); } 

 <div class="class1"> <div class="class2"> <button class="class3" onclick="bclick(this)">b1</button> </div> <div class="class4"> <p>first text</p> </div> </div> <div class="class1"> <div class="class2"> <button class="class3" onclick="bclick(this)">b2</button> </div> <div class="class4"> <p>second text</p> </div> </div> <div class="class1"> <div class="class2"> <button class="class3" onclick="bclick(this)">b3</button> </div> <div class="class4"> <p>third text</p> </div> </div> <div class="class1"> <div class="class2"> <button class="class3" onclick="bclick(this)">b4</button> </div> <div class="class4"> <p>fourth text</p> </div> </div> 

Answer 3

我想在兩個方面改進已接受的答案：

1. 使用內聯事件偵聽器被廣泛認為是不好的做法，所以我寧願使用HTMLElement.prototype.addEventListener 。
2. 它不是做parentNode.parentNode ，而是對DOM結構可能的未來更改更加可靠和健壯，以使用Element.prototype.closest找到最接近的祖先匹配作為參數傳遞的選擇器。

 for (const button of document.querySelectorAll('.class3')) { button.addEventListener('click', function(event) { const pText = this.closest('.class1').querySelector('.class4 p').textContent; console.log(pText); }) } 

 <div class="class1"> <div class="class2"> <button class="class3">b1</button> </div> <div class="class4"> <p>first text</p> </div> </div> <div class="class1"> <div class="class2"> <button class="class3">b2</button> </div> <div class="class4"> <p>second text</p> </div> </div> <div class="class1"> <div class="class2"> <button class="class3">b3</button> </div> <div class="class4"> <p>third text</p> </div> </div> <div class="class1"> <div class="class2"> <button class="class3">b4</button> </div> <div class="class4"> <p>fourth text</p> </div> </div>