DOM技术

来源：互联网发布：命令行查看数据库内容编辑：程序博客网时间：2024/06/10 12:16

DOM技术

DOM是 Document Object Model(文档对象模型)的简称，是表示文档和访问、操作构成文档的各种元素的的应用程序接口（API），它提供了文档中独立元素的结构化、面向对象的表示方法，并允许通过对象的属性和方法访问这些对象。另外，文档对象模型还提供了添加和删除文档对象的方法，这样能够创建动态的文档内容。DOM也提供了处理事件的接口，它允许捕获和响应用户以及浏览器的动作。

6.1 DOM的分层结构

在DOM中，文档的层次结构以树形表示。DOM树的根节点是个Document对象，该对象的documentElement属性引用表示文档根部元素的Element对象。对于html文档，表示该文档根部元素的element对象时以<html>标记<head>和<body>元素是树的枝干。

说明：在树形结构中，直接位于一个节点下的节点被称为该节点的子节点，直接位于一个节点上面的节点被称为该节点的父节点，位于同一层次的，具有相同父节点的节点被称为兄弟节点

6.2遍历文档

在DOM中，html文档的各个节点被视为各种类型飞的Node对象，并且将HTML文档表示为Node对象的树。对于任何一个树形来说，最常用的就是遍历树。在DOM中，可以通过Node对象的属性来遍历。常用的属性：parentNode，childNode，firstChild，lastChild，previousSibling(子节点的上一个节点)，nextChild，nodeName，nodeValue，nodeType。

由于HTML文档的复杂性，DOM定义了nodeType来表示节点的类型。

6.3获取文档中的指定元素

6.3.1访问指定节点的方法

1、通过元素的id属性获取元素

使用Document对象的getElementsById()方法可以通过元素的id属性来获取元素。

document.getElementById(“userList”);

2、通过元素的name属性获取元素

document.getElementByName(“userName”);

3、通过元素的标签名属性来获取元素

document.getElementByTagName(“userTagName”);

6.3.2查看/修改属性节点

1、getAttribute("属性名")

2、setAttribute("属性名","属性值")

6.4 操作节点

在Dom中，不仅可以通过节点的属性查询节点，还可以对节点进行创建、插入、删除和替换等操作。这些操作都可以通过节点(Node)对象提供的方法来完成。

6.4.1创建和增加节点的方法

1、creatElement() 创建节点

2、appendChild() 末尾追加方式插入节点

3、insertBefore() 在指定节点前插入新的节点

4、cloneNode() 克隆节点

6.4.2 删除和替换节点的方法

1、removeChild() 删除节点

2、replaceChild() 替换节点

0 0