淘先锋技术网

首页 1 2 3 4 5 6 7
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等方法。