javascript原生dom操作方法

一、节点层次属性

考虑空白符的相关层次关系属性：

1.childNodes属性 包含

2.parentNode属性

3.previouseSibling属性和nextSibling属性

4.firstChild属性和lastChild属性

不考虑空白符的相关层次关系属性：

1.children属性

2.childElementCount

3.firstElementChild

4.lastElementChild

5.previousElementSibling

6.nextElementSibling

二、动态操作节点

1.创建新节点：document.createElement()

2.添加子节点：父元素.appendChild()

3.插入新节点: 父元素.insertBefore(newNode,relNode)

4.替换节点：父元素.replaceChild(newNode,oldNode)

5.删除节点：父元素.removeChild(node)

6.克隆节点：节点.cloneNode() 传入true参数代表深度克隆，否则为浅克隆

三、节点查找

dom0级方法

document/父节点.getElementById()

document/父节点.getElementsByTagName()

document/父节点.getElementsByName()

dom扩展中还提供了以下方法：

querySelector()

querySelectorAll()

matchesSelector()

上述方法接收一个css选择符对象

四、常用节点的属性及操作

1.所有节点都具有NodeType属性，元素节点取值为1，属性节点为2，文本节点为3....

2.所有节点都具有nodeName,nodeValue属性，其取值根据节点类型不同而不同。对于元素节点，nodeName与tagName取值相同，都等于标签名

3.document节点常用属性有URL,forms，images等；另外可能涉及的方法有write(),writeln()

4.元素节点常用属性有：id,title,className，style等;常用方法有getAttribute(),setAttribute(),removeAttribute()；要读取元素节点内部文本节点的内容（表单元素除外，其往往有更简便的方法），可以使用firstChild.data，或者innerHTML属性

5.表格操作有不同于常规dom操作的更简便的方法

6.表单元素操作也往往有不同于常规dom操作的更简便方法

五、节点滚动相关方法

1.节点.scrollIntoView()

2.节点.scrollIntoViewIfNeeded()

3.节点.scrollByLines()

4.节点.scrollByPages()