1、DOM概述
- DOM是一种与浏览器、平台及语言无关的接口,能够以编程方式访问和操作文档。
- DOM是Document Object Model(文档对象模型)的简称。
- DOM提供了访问、操作该模型的API。
2、DOM分层结构
在DOM中文档的层次结果被表示为树形结构,倒立的树形结构。
3、遍历文档
在DOM中,HTML文档各个节点被视为各种类型的Node对象,并且将HTML文档表示为Node对象的树。
Node对象的属性
属性名 | 类型 | 解释 |
---|---|---|
parentNode | Node | 节点的父节点,没有父节点则为null |
childNodes | Nodelist | 节点的所有子节点的NodeList |
firstChild | Node | 节点的第一个子节点,没有则为null |
lastChild | Node | 节点的最后一个子节点,没有为null |
nodeName | String | 节点名 |
nodeValue | String | 节点值 |
previousSibling | Node | 上一个兄弟节点 |
nextSibling | Node | 下一个兄弟节点 |
nodeType | short | 表示节点类型的常量 (Element 1,) |
4、DOM操作文档
Node对象常用方法
属性名 | 解释 |
---|---|
insertBefore(newChild,refchild) | 在现有节点refChild之前插入节点newChild |
replaceChild(newChild,oldChild) | 将子节点清单中的子节点oldChild换成newChild,并返回oldChild节点 |
removeChild(oldChild) | 删除oldChild节点并返回 |
appendChild(newChild) | 将节点newChild放入原列表的末尾,如果newChild已经存在树中,则先将其删除 |
hasChildNodes() | 返回bool值,是否存在此节点 |
cloneNode(deep) | 返回这个节点的拷贝(包括属性),如果deep为true则拷贝所有包含的节点,否则只拷贝这个节点。 |