js之dom的整理

对于初学者来说呢，我们学习dom呢都要从选择器入手，因为只有先学会怎么取到元素，才能对后面的dom事件进行操作。接下来就是为各位初学的小伙伴整理的dom选择器，dom事件，和一些内置的API写的不是很全。

dom的选择器

  		document.getElementById()
        document.getElementsByClassName()
        document.getElementsByName()
        document.getElementsByTagName()
        document.querySelector()
        document.querySelectorAll()    

注意：以上选择器IE9以下不支持

遍历节点树

	  parentNone()          //父节点
      childNodes()          //子节点们
      firstChild()          //第一个子节点
      lastChild()           //最后一个子节点
      nextSibling()         //最后以一个兄弟节点
      previousSibling()     //前一个兄弟节点

注意：父节点最顶端的parentNode为#document

基于元素节点树遍历

		parentElement()                 //返回当前父节点
        children()                      //只返回当前元素子节点
        firstElementChild()             //返回第一个子节点
        lastElementChild()              //返回最后一个子节点
        nextElementSibling()            //返回最后以一个兄弟节点
        previousElementSibling()        //返回前一个兄弟节点

注意：除了children以外都是IE9以下不兼容

节点的四个属性

		nodeName()      //元素的标签名，以大写形式
        nodeValue()     //Text文本节点或内容节点的文本内容
        nodeType()      //判断元素节点类型
        attributes()    //element节点属性集合

dom基本操作

增

		document.createElement()              //创建元素节点(标签)
        document.createTextNode()             //创建文本节点
        document.createComment()              //创建注释节点
        document.createDocumentFragment()     //创建文档碎片节点

插

		appendChild()
        insertBefore(a,b)//在父元素中的b标签前插入a

删

 		parent.removeChild()//父级调用
        child.remove()//销毁，自己调用

替

		parent.repaceChild(new,origin)//父级调用；用新的替换老的

Element节点的属性

		innerHTML    //能改变元素本身的内容，添加的内容直接覆盖原有的内容
       innerText    //赋值会有覆盖  (火狐不兼容)

Element节点的方法

	el.setAttribute()    //可以设置元素的行内属性(行间属性)
    el.getAttribute()    //可以取出元素的 属性