常用DOM笔记

1，获取元素方法：

(1),获取单个，返回一个元素

element.getElementById()//最快，实时

element.querySelector()

(2)获取多个，返回一组

element.getElementsByTagName()

element.getElementByClassName()

element.getElementByName()//常用于表单元素

element.querySelectorAll()//查找速度比上面三个块，为静态的，非实时的，在加载时获取

2，创建元素，文本

创建元素节点：element.createElement("div")

创建文本节点：element.createTextNode("hello world")

3，插入子元素

插入到父元素的最后：parentNode.appendChild(newNode)

插入到指定位置前：parentNode.insertBefore(newNode,positionNode)

4，属性操作

设置元素属性：element.setAttribute(name,value)

获取元素属性：element.getAttribute(name)

移除元素属性：element.removeAttribute(name)

5，移除元素

移除元素包括本身：element.remove()

移除元素的子级：parentNode.removeChild(childNode)

6，替换子元素

parentNode.replaceChild(newNode,oldNode)

7，复制元素：

element.cloneNode(boolean);

当boolean值为false时，为浅复制，只复制元素节点，其子级不复制

当boolean值为true时，为深复制，复制元素节点及所有子级

8，获取实时样式

currentStyle//IE8以下版本：element.currentStyle.Attribute

getComputedStyle(element,null)//第二个值为伪类元素，无时填null，//现代浏览器所支持

9,通过节点关系获取元素

(1)子级元素获取（返回数组）：element.children

(2)兄弟节点获取（此方法包括所有节点，如元素节点，文本节点等等）：

element.nextSibling,element.previousSibling

(3)兄弟元素节点获取（此方法只获取元素节点）：

element.nextElementSibling,element.previousElementSibling

(4)父级元素获取

element.parentElement

10，nodetype()用于区分不同类型节点，如元素节点，文字节点，文本碎片节点 等等

常见类型节点的返回值

nodeType(元素);返回值为 1

nodeType(文本);返回值为 3

nodeType(document);返回值为 9

nodeType(documentfragment);返回值为 11