DOM相关概念

饥人谷_李栋

---

1.节点的属性
2.节点的方法
3.节点的集合

---

一、node属性

• nodeName://节点的名字

• nodeType://节点的常数值

ELEMENT_NODE-> 1
TEXT_NODE-> 3
DOCUMENT_NODE-> 9
ATTRIBUTE_NODE-> 2

• ownerDocument://拥有他的文档

• nextSibling://下一个兄弟节点（后面有空格则返回一个文本节点内容为空格）

• previousSibling://前一个兄弟

• parentNode:父节点

• parentElement://父Element节点

• textContent://返回当前节点和后代节点的文本内容

注意，会忽略节点内部的标签，如果不是直接包含文本会一直往里走直到找到文本为止

document.getElementById('div').textContent='
hello!
'

//会把
hello!
整体当作文本

document.getElementById('div').innerHTML  ='
hello!
'

//会把hello！当作文本

• nodeValue://返回/设置节点的值（字符串）

• childNodes:// 返回一个子节点集合（类似array）

• firstNode://返回 第一个子节点

• lastChild：//返回最后一个子节点

• baseURI://当前网页的绝对路径

注意，不是URL

---

二、节点的方法

• appendChild(节点对象)：//在子节点后 插入节点对象

var p=document.createElement('p')//创建一个p标签

document.body.appendChild(p)//在body的子节点后加p

var p=document.createTextNode('你好')

document.body.appentchild(p)//在body的子节点后加p内容为你好

• cloneNode(参数)：//克隆一个节点

注意，参数为true，则克隆子节点

添加的事件回调不会被克隆

• insertBefore()： //将某个节点插入当前节点的指定位置

target.insertBefore(插入的元素，插入的位置)

• removeChild(参数)://删除子节点

注意，参数必须是当前节点的儿子

删除所有子节点：//循环删，直到为空

• replaceChild()://将一个新节点替换某一个子节点

target.replaceChlid(新儿子，旧儿子)

注意，id区分大小写，标签不分大小写

等号左边可以随便，右边就要区分了

• contain()：//是否包含这个内容

• compareDocumentPosition(): //同contain返回7bit二进制值表示参数节点和当前节点的位置

0相同1不在同一个文档2在前面4在后面8包含16被包含32浏览

器私有

• isEqualNode()://节点是否相等，同===

• normalize()://处理节点内部的文本节点（去除空文本节点，其他的合并为一个文本节点）

三、节点的集合

1. NodeList
   注意，他是一个对象，不是数组，只含有索引和length两个属性
2. HTMLCollection
   注意，也是个节点集合，成员是element （不包含文本节点）
3. parentNode //获取Element子节点
   Element节点、document节点、DocumentFrangment节点

• children //返回所有Element子节点
• firstElementChild //返回第一个Element子节点
• lastElementChild //返回最后一个Element子节点
• childElementCount //返回所有Element子节点的数目

4. ChildNode处理子节点

• remove（）//移除当前节点