JavaScript中的Child指的是DOM树中的子节点,这些节点可以是元素节点、文本节点、注释节点等。子节点可以通过parentNode、childNodes、firstChild、lastChild、previousSibling和nextSibling等属性和方法进行访问和操作。
比如有以下HTML代码:
<div id="parent"> <p>我是子节点1</p> <span>我是子节点2</span> <!-- 我是注释节点 --> <p>我是子节点3</p> 我是文本节点 </div>其中,div元素有4个子节点,分别是3个元素节点(p、span、p)和1个文本节点。注释节点不会被认为是子节点。 我们可以通过以下方式获取父节点和子节点:
var parent = document.getElementById('parent'); var children = parent.childNodes;这里要注意的是,childNodes返回的是NodeList对象,包含了所有子节点,包括文本节点和注释节点。 我们可以通过以下方式获取第一个和最后一个子节点:
var firstChild = parent.firstChild; var lastChild = parent.lastChild;此时,firstChild是
我是子节点1
元素节点,而lastChild则是一个文本节点。因为div元素中最后一个节点并不是我是子节点3
,而是文本节点“我是文本节点”。 我们也可以通过previousSibling和nextSibling属性获取前面和后面的兄弟节点:var secondChild = firstChild.nextSibling; var thirdChild = secondChild.nextSibling; var previousChild = thirdChild.previousSibling;secondChild即是我是子节点2元素节点,thirdChild则是注释节点。previousChild即是secondChild节点。 另一种获取子节点的方式是使用children属性,这个属性只包含元素节点,而不包含文本节点和注释节点:
var children = parent.children;这时候children数组中只有
我是子节点1
和我是子节点2两个元素节点。 我们还可以动态地添加、删除节点,比如:var newChild = document.createElement('p'); newChild.innerHTML = '我是新的子节点'; parent.appendChild(newChild);这样就在div元素最后面添加了一个新的子节点。 最后要注意的是,childNodes、children、firstChild、lastChild、previousSibling、nextSibling等属性和方法都是只读的,不能直接赋值。若需要添加、删除节点,需要使用appendChild、removeChild等方法。