DOM技术
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() 替换节点