我正在使用querySelectorAll并希望排除許多元素的所有子元素。嘗試這樣做是行不通的。
document.querySelectorAll(".h:not(.p)").forEach(function(e){
e.style.color = "red";
});<div class="h">
Hello World!
<p class="p">This is a paragraph.</p>
</div>
<div class="h">
Hello World!
<p class="p">This is a paragraph.</p>
</div>
<div class="h">
Hello World!
<p class="p">This is a paragraph.</p>
</div>我怎樣才能實作只選擇父元素？這樣的選擇器存在嗎？
uj5u.com熱心網友回復：
這只是選擇.h元素：
document.querySelectorAll(".h")
但是你對這些元素做了什么？您將文本顏色設定為紅色：
e.style.color = "red";
因此red，除非另有樣式，否則這些元素中的所有文本都將是 。如果.p元素應該是其他東西，請將它們設定為：
document.querySelectorAll(".h").forEach(function(e){
e.style.color = "red";
});.p {
color: black;
}<div class="h">
Hello World!
<p class="p">This is a paragraph.</p>
</div>
<div class="h">
Hello World!
<p class="p">This is a paragraph.</p>
</div>
<div class="h">
Hello World!
<p class="p">This is a paragraph.</p>
</div>或者，您可以考慮重新構建 HTML。例如：
<div>
<span class="h">Hello World!</span>
<p class="p">This is a paragraph.</p>
</div>
<div>
<span class="h">Hello World!</span>
<p class="p">This is a paragraph.</p>
</div>
<div>
<span class="h">Hello World!</span>
<p class="p">This is a paragraph.</p>
</div>
然后，您可以專門針對您想要的內容，而無需尋找“排除”其他內容的方法。
uj5u.com熱心網友回復：
如果你給父母一個顏色，默認情況下它也會被孩子繼承。您的代碼僅根據需要選擇父母.hs - 問題是孩子們也繼承了這種風格。
一種選擇是也遍歷子代或后代<p>，并將它們的顏色更改為您想要的顏色，這樣它們就不會從父代繼承。
document.querySelectorAll(".h").forEach(function(e){
e.style.color = "red";
});
document.querySelectorAll(".h .p").forEach(function(e){
e.style.color = "initial";
});<div class="h">
Hello World!
<p class="p">This is a paragraph.</p>
</div>
<div class="h">
Hello World!
<p class="p">This is a paragraph.</p>
</div>
<div class="h">
Hello World!
<p class="p">This is a paragraph.</p>
</div>一個更好看的選項是給文本著色它自己的元素，然后只選擇這些元素：
document.querySelectorAll(".h span").forEach(function(e){
e.style.color = "red";
});<div class="h">
<span>Hello World!</span>
<p class="p">This is a paragraph.</p>
</div>
<div class="h">
<span>Hello World!</span>
<p class="p">This is a paragraph.</p>
</div>
<div class="h">
<span>Hello World!</span>
<p class="p">This is a paragraph.</p>
</div>uj5u.com熱心網友回復：
顏色在段落中被繼承
document.querySelectorAll(".h:not(.p)").forEach(function(e){
e.style.color = "red";
e.querySelectorAll(".p").forEach(function(elem) {
elem.style.color = "black";
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/441719.html
標籤：javascript html dom