是否有任何 DOM 方法來查找具有某個類的第一個元素
<div class="parent">
<div>
<div></div>
<p class="paragraph"></p>
</div>
</div>
如果我在頁面中有多個 p 元素，我只需要找到子樹中任何位置的 p 元素，從.parent.
uj5u.com熱心網友回復：
document.querySelector('.parent p.paragraph')
將最多回傳一個p具有paragraph該類的元素的元素，該元素具有parent該類作為祖先的元素。undefined如果沒有與該描述匹配的元素，它可能會回傳。如果有多個匹配該描述，它將只回傳一個，即 JavaScript 定義的“第一個”。JavaScript 的“第一”概念是否與您的相同尚不清楚，因為您尚未在問題中定義哪個是“第一”。正如MDN 所說，
注意：匹配是使用檔案節點的深度優先預序遍歷完成的，從檔案標記中的第一個元素開始，并按子節點數量的順序遍歷順序節點。
這意味著如果你有這個
<div class="parent">
<div>
<div>
<div>
<p class="paragraph">First</p>
</div>
</div>
</div>
<p class="paragraph">Second</p>
</div>
上面的代碼將匹配“第一”的段落，而不是“第二”的段落。
uj5u.com熱心網友回復：
const parents = document.querySelectorAll('.parent');
if (parents) {
parents.forEach((parent, index) => {
const children = parent.querySelectorAll('.paragraph');
children[0].style.color='#f00';
children[0].style.textDecoration = 'underline';
console.log((children ? children.length : 'No') ` instances of paragraph class in parent ${index}`);
});
} else {
console.warn('no soup for you.')
}
// Or if you're just wanting to grab them all in one.
const parents2 = document.querySelectorAll('.parent .paragraph');
console.log(`There's ${parents2.length} instances of .parent .paragraph class in the document total.`);
console.log(`The first instance found is ${parents2[0]}`);<div class="parent">
<div>
<div></div>
<p class="paragraph">TEST</p>
</div>
<div>
<div></div>
<p class="paragraph">TEST</p>
</div>
<div>
<div></div>
<p class="paragraph">TEST</p>
</div>
<div>
<div></div>
<p class="paragraph">TEST</p>
</div>
</div>
<div class="parent">
<div>
<div></div>
<p class="paragraph">TEST2</p>
</div>
<div>
<div></div>
<p class="paragraph">TEST2</p>
</div>
<div>
<div></div>
<p class="paragraph">TEST2</p>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463628.html
標籤：javascript html