文档对象模型 DOM

tech2022-08-18 130

文章目录

一、DOM 是什么？二、DOM 中的节点1.常见的节点类型2.节点操作1.增2.删3.查三、获取和设置属性1.获取2.设置总结

前言：DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口，在 HTML DOM 中定义了访问和操作 HTML 文档的标准方法，并且 DOM 通过树结构表达 HTML 文档。

一、DOM 是什么？

DOM 全称是 Document Object Model ，通过 DOM 可以把一个文档看作成一棵树，也就是我们常说的 DOM 树，而节点相当于文档树上的树枝和树叶。

Document 文档，当创建了一个网页并把它加载到 Web 浏览器中时，DOM 就在自动生成，把编写的网页文档转换为一个文档对象；Object 对象，是一种自足的数据集合，与某个特定对象相关联的变量被称为这个对象的属性，只能通过某个特定对象去调用的函数被称为这个对象的方法；Model 模型，某种事物的表现形式。

Document 文档：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Demo</title> </head> <body> <h1>标题一</h1> <p title="p-style">段落1</p> <ul class="ul-list"> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ul> </body> </html>

Model 模型图：

二、DOM 中的节点

文档是由节点构成的集合，在节点中又包含了许多不同类型的节点。

1.常见的节点类型

元素节点（element node） DOM的原子是元素节点。例如刚刚的 Demo 文档中，使用到的 head、body、h1 等标签均属于元素节点；元素可以包含其它的元素；唯一没有被包含在其他元素里的元素是 html 元素，它是节点树的根元素。文本节点（text node）在刚刚的例子中，h1 元素包含着文本 “标题一” ，这里的文本就是文本节点。属性节点（attrbute node）属性节点用来对元素作出更具体的描述。例如，几乎所有的元素都有一个 title 属性；属性节点总是被包含在元素节点中。

2.节点操作

1.增

createElement()：创建元素节点。

createTextNode()：创建文本节点。

insertBefore()：插入节点。

2.删

removeChild()：删除节点。

3.查

getElementById(id)：根据 id 名去查找，返回节点对象。

getElementsByTagName(tag)：根据标签名去查找，返回节点对象数组。

getElementsByClassName(class)：根据 class 名去查找，返回节点对象数组。

childNode()：访问子节点。

parentNode()：访问父节点。

三、获取和设置属性

由于这里介绍到的 getAttribute 和 setAttribute 方法不属于 document 对象，所以不能通过 document 对象调用，只能通过元素节点对象调用。

1.获取

object.getAttribute( attribute )

attribute：打算查询的属性名。

返回值：查询的属性值。

2.设置

object.setAttribute( attribute, value )

attribute：打算设置的属性名。

value：打算设置的属性值。

返回值：undefinde

总结

本文介绍了 DOM 提供的五个方法：getElement、getElementsByTagName、getElementsByClassName、getAttribute、setAttribute，这五个方法是将要编写的许多 DOM 脚本的基石，同时也介绍了节点的增删查等相关的方法。

最新回复(0)