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)
原文地址:https://www.cnblogs.com/xiewangfei123/p/13228206.html