简单介绍DOM

最新推荐文章于 2024-09-17 11:42:54 发布

AAA`

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量252

点赞数 4

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/joeyjanela/article/details/141066494

版权

DOM（Document Object Model，文档对象模型）是一种API（Application Programming Interface，应用程序编程接口），它允许程序和脚本（如JavaScript）动态地访问和更新文档的内容、结构和样式。DOM是W3C（万维网联盟）组织推荐的处理可扩展标记语言（如HTML或XML）的标准编程接口。

DOM的定义

DOM将HTML或XML文档（网页）视为由多层节点（如元素节点、文本节点和属性节点）构成的结构化树（或视为一个对象），开发者可以通过JavaScript等脚本语言对这些节点进行增删改查操作。DOM的核心是document对象，它代表了整个文档，提供了访问和操作文档中每个元素和属性的接口（API）。

document对象

document方法大多数都与DOM（文档对象模型）操作相关。document对象是DOM的根节点，代表了整个HTML文档。通过document对象，开发者可以访问和操作文档中的各个部分，包括元素、属性、文本内容等。

获取元素根节点

getElementById(id)：根据元素的ID获取元素节点。
getElementsByTagName(tagName)：根据标签名获取元素节点列表。
getElementsByClassName(className)：根据类名获取元素节点列表。
querySelector(selector)：根据CSS选择器获取符合条件的第一个元素节点。
querySelectorAll(selector)：根据CSS选择器获取所有符合条件的元素节点列表。

创建元素节点

createElement(tagName)：创建一个新的元素节点。
createTextNode(text)：创建一个包含指定文本内容的文本节点。
createComment(text)：创建一个注释节点。

修改文档结构

appendChild(node)：将指定节点作为最后一个子节点添加到目标节点。
insertBefore(newNode, referenceNode)：将新节点插入到参考节点之前。
replaceChild(newNode, oldNode)：用新节点替换旧节点。
removeChild(node)：从父节点中移除指定节点。

属性操作

setAttribute(name, value)：设置元素节点的属性。
removeAttribute(name)：移除元素节点的属性。

其他

title、URL、domain等属性用于获取或设置文档的标题、URL、域名等信息。
body、head、documentElement等属性用于访问文档的特定部分，如<body>元素、<head>元素和根元素(<html>)。

需要注意的是，虽然document方法大多与DOM操作相关，但并非所有document的方法都直接用于DOM操作。例如，document.cookie用于操作浏览器的Cookie，而Cookie本身并不直接属于DOM结构的一部分。然而，由于Cookie与Web页面的行为紧密相关，且可以通过JavaScript进行访问和修改，因此也可以将其视为Web开发中document对象提供的一种功能。