<ul class="list">
<li>1</li>
<li class="li2">2</li>
<li>3</li>
<li>4</li>
</ul>
1.获取子元素的数目
var list=document.getElementsByClassName("list")[0];
list.childElementCount;
返回结果:4
2.获取子元素的所有节点
console.log(list.childNodes); 集合类型
节点名称 list.childNodes[1].nodeName 返回大写LI
节点类型 list.childNodes[1].nodeType 1
节点的值 nodeValue
3.获取子元素
console.log(list.children); 集合类型 四个li集合
4.根据子元素找同胞兄弟
var li2=document.getElementsByClassName("li2")[0];
下一个节点 li2.nextSibling; 返回的是 #text
下一个元素 li2.nextElementSibling 返回的是 <li>3</li>
上一个节点 li2.previousSibling 返回的是 #text
上一个元素 li2.previousElementSibling 返回的是 <li>1</li>
5.找父元素的首尾元素
var list=document.getElementsByClassName("list")[0];
找父元素中的第一个节点 list.firstChild 返回的是#text
找父元素中的第一个元素 list.firstElementChild 返回的是<li>1</li>
6。元素的动态创建及追加
var s=document.createElement("li"); 追加到元素之后
s.innerHTML="5";
list.appendChild(s);