js操作dom元素的子父节点

<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);