DOM—节点操作

节点属性

属性名称 描述

parentNode 返回节点的父节点

childNodes 返回子节点集合，childNodes[i]，包括换行的文本节点和注释

firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastChild 返回节点的最后一个子节点，

nextSibling 下一个节点

previousSibling 上一个节点

nextSibling、previousSibling 只能选取同级的节点，不能调到父级

 例题：

 Element属性

属性名称 描述

firstElementChild 返回节点的第一个子节点

lastElementChild 返回节点的最后一个子节点

nextElementSibling 下一个节点

previousElementSibling 上一个节点

如何兼容谷歌和ie8以及一下的浏览器：

在谷歌浏览器和ie9及以上浏览器，使用firstChild   、lastChild、nextSibling   、previousSibling  是包含文本节点的，但是而Ie8及以下，不包含文本节点（声明let在ie中不支持）

ie8及以下浏览器是不包含文本节点的；但是ie8会把注释当成节点会被选中，而ie7 和ie5是不会把注释当成元素节点选中的

||后面就是写给ie8及以下浏览器看的，因为ie8不支持nextSibling   等....

ie8遇到注释会把注释当成元素；

oNext = oParent.nextElementSibling || oParent.nextSibling   

oPre = oParent.previousElementSibling || oParent.previousSibling  

oFirst = oParent. firstElementChild  ||  oParent.firstChild   

oLast = oParent.lastElementChild || oParent.lastChild

 

 节点信息

nodeName：节点名称   #text（文本节点包括换行和空格）、大写的元素名称、comment注释

nodeValue：节点值      “\n    ” ，"null"，"我是注释"

nodeType：节点类型       3，       1，         8

节点类型 NodeType值

元素element 1

文本text  3

注释comments  8

文档document  9

 console.log(document.nodeType)=9;

 

设置属性

setAttribute()方法添加指定的属性，并为其赋指定的值，添加本来就有的属性和自定义的属性值

attributename  添加的属性的名称

attributevalue  添加的属性值

element.setAttribute(“attributename”,“attributevalue”)

例：document.getElementById("a").setAttribute("src","image/b.jpg");

获取属性

getAttribute() 方法返回指定属性名的属性值

attributename 必需。需要获得属性值的属性名称

element.getAttribute(“attributename”)

删除属性

removeAttribute() 方法删除指定的属性

attributename 移除的属性的名称

element.removeAttribute(attributename)

document.getElementById("a").removeAttribute("src");