[英]childNode unexpected behaviour
Scenario 情境
I would like to get all child nodes of my div and change it color. 我想获取div的所有子节点并更改其颜色。 Code: 码:
function myFunction() { var divv = document.getElementById("divv"); var myCollection = divv.childNodes; var len = myCollection.length; var i; for (i = 0; i < len; i++) { myCollection[i].style.color = "red"; } }
<div id="divv"> <h2>JavaScript HTML DOM</h2> <p>Hello World!</p> <p>Hello Norway!</p> <p>Click the button to change the color of all p elements.</p> <button onclick="myFunction()">Try it</button> </div>
Error: This is not working. 错误:这不起作用。 It seems tha in my collection i have all nodes. 在我的收藏夹中似乎我拥有所有节点。 h2 p text buton. h2 p文字按钮。 I Expeceted just p h2 and buton. 我只参加了p h2和buton。
EDIT Explanation Note: Whitespace inside elements is considered as text, and text is considered as nodes. 编辑 说明注意:元素内的空格被视为文本,而文本被视为节点。 Comments are also considered as nodes. 注释也被视为节点。
So we need to check if node is element node, or use querySelectorAll. 因此,我们需要检查节点是否为元素节点,或使用querySelectorAll。 Examples in answers below. 下面的答案示例。 Thanks for your help. 谢谢你的帮助。
Text nodes do not have style
attributes. 文本节点没有style
属性。 If you want to use childNodes
, check that the nodeType
is 1 (an Element
node) first: 如果要使用childNodes
,请childNodes
检查nodeType
为1( Element
节点):
function myFunction() { var divv = document.getElementById("divv"); var myCollection = divv.childNodes; var len = myCollection.length; var i; for (i = 0; i < len; i++) { if (myCollection[i].nodeType === 1) myCollection[i].style.color = "red"; } }
<div id="divv"> <h2>JavaScript HTML DOM</h2> <p>Hello World!</p> <p>Hello Norway!</p> <p>Click the button to change the color of all p elements.</p> <button onclick="myFunction()">Try it</button> </div>
But I would prefer using querySelectorAll
and forEach
here: 但是我更喜欢在这里使用querySelectorAll
和forEach
:
function myFunction() { document.querySelectorAll('#divv > *') .forEach(child => child.style.color = "red"); }
<div id="divv"> <h2>JavaScript HTML DOM</h2> <p>Hello World!</p> <p>Hello Norway!</p> <p>Click the button to change the color of all p elements.</p> <button onclick="myFunction()">Try it</button> </div>
(or, you could simply set #divv
's style.color
to red) (或者,您可以简单地将#divv
的style.color
设置为红色)
You could use the children
property to access the children of a given node: 您可以使用children
属性访问给定节点的子级:
The
ParentNode
propertychildren
is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called.ParentNode
属性的children
是一个只读属性,它返回一个实时HTMLCollection ,其中包含调用该节点的节点的所有子元素。
function myFunction() { var divv = document.getElementById("divv"); var myCollection = divv.children; var len = myCollection.length; var i; for (i = 0; i < len; i++) { myCollection[i].style.color = "red"; } }
<div id="divv"> <h2>JavaScript HTML DOM</h2> <p>Hello World!</p> <p>Hello Norway!</p> <p>Click the button to change the color of all p elements.</p> <button onclick="myFunction()">Try it</button> </div>
Another way to do with ES6 would be to spread the child nodes into an array and loop through them with a .forEach
: 使用ES6的另一种方法是将子节点散布到数组中,并使用.forEach
遍历它们:
const myFunction = () => { [...document.querySelector('#divv').children].forEach(child => { child.style.color = 'red'; }); }
<div id="divv"> <div class="child"> I am a child </div> <div> <div class="grandchild"> I am a grand child </div> </div> <button onclick="myFunction()">Try it</button> </div>
Alternatively, you could use the .forEach
from the NodeList
class directly but the previous method gives you more freedom to work with Array's method such as .reduce
, .map
, etc... 或者,您可以直接使用NodeList
类中的.forEach
,但是先前的方法为您提供了更大的自由来使用Array的方法,例如.reduce
, .map
等。
const myFunction = () => { document.querySelectorAll('#divv > *').forEach(child => { child.style.color = 'red'; }); }
<div id="divv"> <div class="child"> I am a child </div> <div> <div class="grandchild"> I am a grand child </div> </div> <button onclick="myFunction()">Try it</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.