dom 节点的操作

元素 ：1    属性：2    文本：3  

    DOM 基本操作

        遍历节点树：

            1. parentNode       父节点(最顶端的parentNode 为 #document)

            2. childNodes[n]    子节点 

            3. firstChild       第一个子节点

            4. lastChild        最后一个子节点

            5. nextSibling      后一个兄弟节点 previousSibling 前一个兄弟节点

        基于元素节点树的遍历

            1. parentElement    返回当前元素的父元素节点(IE不兼容)

            2. children         只返回当前元素的元素子节点

            3. node.childElementCount === node.children.length 当前元素节点的子元素节点个数(IE不兼容)

            4. firstElementChild    返回的是第一个元素节点(IE不兼容)

            5. lastElementChild     返回的是最后一个元素节点(IE不兼容)

            6. nextElementSibling / previousElementSibling  返回后一个/前一个兄弟元素节点(IE不兼容)

        节点的四个属性：

            1. nodeName：元素的标签名，以大写形式表示，只读 

            2. nodeValue：Text节点或Comment节点的文本内容，可读写

            3. nodeType：该节点的类型，只读

            4. attributes：Element节点的属性集合

        节点的方法：

            1. Node.hasChildNodes();

        

        增：

            document.createElement();               新创建的一个元素节点

            document.createTextNode();              新增加一个文本节点[元素节点的内容]

            document.createComment();               

            document.createDocumentFragment();      文档碎片

            

        插:

            appendChild();               在父节点中中加入创建的新的元素节点  插入的是元素节点  append 插入的是字符串

            insertBefore(new,old);       在父节点点中插入到 .... 前面

        删：

            removeChild();               删除该节点

            child.remove();

            deleteRow                    删除表格

        替换：

            replaceChild(new,old);        替换改节点

        属性：

            innerHTML

            innerText(火狐不兼容)/textContent(老版本IE不好使)

        方法：

            ele.setAttribute()          设置节点属性值(当前节点)

            ele.getAttribute()          获取节点属性值(当前节点)

        克隆：

            cloneNode(true)             克隆节点

            创建属性节点：

              1. 建立一个属性节点

                  var attrObj = document.createAttribute('id')

              2. 为属性节点赋值

                  attrObj.value = 'box';

              3. 讲属性节点加入至元素节点

                  setAttributeNode(attrObj)