Dom节点继承树基本操作

 遍历节点树

基于元素节点树的遍历

1. parcntElcrmcnt -> 返回当前元素的父元秦节点 (IE不兼容)
2. children ->只返回当前元素的元素子节点
3. node.childFlement(ount === nodechildren.length当前元素节点的子元素(IE不兼容)
4. firstElementChild->返回的是第一个元素节点(IE不兼容)
5. laslElemenlChild -> 返回的是最后一个元素节点(IE不兼容)
6. nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点(IE不兼容)

例：parcntElcrmcnt -> 返回当前元素的父元秦节点

 方法一：返回第1层祖先元素节点

 
var i = document.getElementsByTagName('i')[0];
console.log(i.parentElement);//...

  方法二：返回第n层祖先元素节点

 例：children ->只返回当前元素的元素子节点

例：返回第n个兄弟元素节点

nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点

节点的四个属性

1. nodeName---------元素的标签名，以大写形式表示,只读
2. nodeValue----------Text（文本）节点或Comment（注释）节点的文本内容可读写
3. nodeType-----------该节点的类型，只读
4. attributes------------Element 节点的属性集合年的节点
5. 节点的一个方法---- hasChildNodes()是否有子节点,返回true/false

nodeType返回节点的类型--数字

 

 例：

 例： 获取div元素下的所有元素节点，

方法一：当nodeType===1是为元素节点，解决浏览器不兼容问题

      

      var div = document.getElementsByTagName('div')[0];
      function retElementChild(node) {
            var arr = [],
                child = node.childNodes,//childNodes子节点们
                len = child.length;
            for (var i = 0; i < len; i++) {
                if (child[i].nodeType === 1) {
                    arr.push(child[i]);
                }
            }
            return arr;
        }
        retElementChild(div) //[p]

 方法二：children ->只返回当前元素的元素子节点

例：attributes------------Element 节点的属性集合年的节点

 DOM结构树：继承关系

document--> HTMLDocument.prototype--> Document.prototype

       

dom操作

增

document.createElement()---创建元素节点
document.createTextNode()---创建文本节点
document.createComment()----创建注释节点
dncumenl.crealeDocumeniFmagme()

 var p = document.createElement("p");

 

插

appendChild0;---添加到父节点的最后一个子节点
inserlBelare(a, b)---（a要插入的新节点-b参考节点）新节点将被插入到参考节点之前的位置

appendChild()方法：

将一个新的子节点添加到指定父节点的子节点列表的方法。该方法接收一个参数，即要添加的新子节点，然后将其添加为父节点的最后一个子节点

类似于push方法，向元素中添加新的子元素

inserlBelare(a, b)方法：

在指定的参考节点之前插入新节点。使用 insertBefore() 方法时，需要指定两个参数：要插入的新节点和参考节点。新节点将被插入到参考节点之前的位置

 

删

removeChild()--在父节点中通过剪切删除，可以拿到删除后的元素

remove()--直接删除

 

替换

replaceChild(new, origin)---new新的，origin旧的

Element属性方法

 例：

例：

getAttribute 方法用于获取元素的属性值。通过调用 getAttribute 方法并传入要获取的属性名作为参数，可以获得该元素指定属性的值

setAttribute 方法用于给元素设置或添加一个属性。如果指定的属性已经存在，则该方法将更新该属性的值