常见DOM树操作

常见DOM树操作

基础概念

Node：

JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法。Node有一个属性nodeType表示Node的类型。常用的就是element，text，attribute，comment，document，document_fragment这几种类型。

Element类型：供了对元素标签名，子节点和特性的访问（div、a、span）

• nodeType为1

• nodeName为元素标签名，tagName也是返回标签名

• nodeValue为null

• parentNode可能是Document或Element

Text类型：文本节点，它包含的是纯文本内容，不能包含html代码

• nodeType为3

• nodeName为#text

• nodeValue为文本内容

Attr类型：元素的特性，相当于元素的attributes属性中的节点

• nodeType值为2

• nodeName是特性的名称

• nodeValue是特性的值

Comment类型：表示HTML文档中的注释

• nodeType为8

• nodeName为#comment

• nodeValue为注释的内容

Document类型：document对象是HTMLDocument的一个实例，表示整个页面，它同时也是window对象的一个属性

• nodeType为9

• nodeName为#document

• nodeValue为null

DocumentFragment类型：所有节点中唯一一个没有对应标记的类型，它表示一种轻量级的文档，可能当作一个临时的仓库用来保存可能会添加到文档中的节点

• nodeType为11

• nodeName为#document-fragment

• nodeValue为null

常用方法

创建方法：

createElement，createTextNode，cloneNode和createDocumentFragment四个方法

注意：

1. 它们创建的节点只是一个孤立的节点，要通过appendChild添加到文档中

2. cloneNode要注意如果被复制的节点是否包含子节点以及事件绑定等问题

3. 使用createDocumentFragment来解决添加大量节点时的性能问题

页面修改

appendChild，insertBefore，removeChild，replaceChild。

注意：

1. 不管是新增还是替换节点，如果新增或替换的节点是原本存在页面上的，则其原来位置的节点将被移除，也就是说同一个节点不能存在于页面的多个位置

2. 节点本身绑定的事件不会消失，会一直保留着。

节点查询

document.getElementById，document.getElementsByTagName，document.getElementsByName，document.getElementsByClassName

注意

1. document.getElementById

   • 元素的Id是大小写敏感的，一定要写对元素的id

   • HTML文档中可能存在多个id相同的元素，则返回第一个元素

   • 只从文档中进行搜索元素，如果创建了一个元素并指定id，但并没有添加到文档中，则这个元素是不会被查找到的

2. document.getElementsByTagName

   • 返回对象是一个即时的NodeList，它是随时变化的

   • 在HTML元素中，并不是所有元素都有name属性，比如div是没有name属性的，但是如果强制设置div的name属性，它也是可以被查找到的

   • 在IE中，如果id设置成某个值，然后传入getElementsByName的参数值和id值一样，则这个元素是会被找到的，所以最好不好设置同样的值给id和name

3. document.getElementsByName

   • 返回对象是一个即时的NodeList，它是随时变化的

   • 在HTML元素中，并不是所有元素都有name属性，比如div是没有name属性的，但是如果强制设置div的name属性，它也是可以被查找到的

   • 在IE中，如果id设置成某个值，然后传入getElementsByName的参数值和id值一样，则这个元素是会被找到的，所以最好不好设置同样的值给id和name

4. document.getElementsByClassName

   • 返回结果是一个即时的HTMLCollection，会随时根据文档结构变化

   • IE9以下浏览器不支持

   • 如果要获取2个以上classname，可传入多个classname，每个用空格相隔

修改文本节点

appendData(data); 将data加到文本节点后面

deleteData(start,length); 将从start处删除length个字符

insertData(start,data) 在start处插入字符,start的开始值是0;

replaceData(start,length,data) 在start处用data替换length个字符

splitData(offset) 在offset处分割文本节点

substringData(start,length) 从start处提取length个字符