什么是DOM

最新推荐文章于 2024-02-26 18:32:50 发布

lord_of_war

最新推荐文章于 2024-02-26 18:32:50 发布

阅读量429

点赞数 1

本文链接：https://blog.csdn.net/lord_of_war/article/details/108311497

版权

众所周知，javascript由三部分组成：

ECMAScript 构成了js核心的基础语法
BOM Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOMDocument Object Model 文档对象模型，用来操作网页中的元素

今天我们就来讲讲什么是DOM

DOM是什么

DOM的全称是Document Object Model，即文档对象模型，它允许脚本控制Web页面、窗口和文档。

如果没有DOM，JavaScript将是另外一种脚本语言；而有了DOM，它将成为制作动态页面的强有力工具。DOM不是JavaScript语言的一部分，而是内置在浏览器中的一个应用程序接口。当然，我们可以简单的理解为一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。

DOM（文档对象模型）是一组用来描述脚本怎样与结构化文档进行交互和访问的web标准。他的功能是把浏览器支持的文档（包括HTML XML XHTML）当作一个对象来解析。DOM实际上是一个操作文档里面所包含的内容的一个编程的API，允许开发人员从文档中读取、搜索、修改、增加和删除数据。DOM是与平台和语言无关的，也就是说只要是支持DOM的平台和编程语言，你都可以用来编写文档。

DOM定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样式以及行为。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”，用白话说就是“东西”。）。网页上的标签是一层层嵌套的，最外面的一层是，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。如果大家没有见过家谱，应该知道一个公司的组织架构。就像下图一样：
在这里插入图片描述
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。通过JavaScript，可以重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

接下来来简单画一个DOM树：

<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <p>hello world!</p>
  </body>
</html>

在这里插入图片描述
OM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点。

js获取DOM

document.getElementById() 根据 id 获取 dom 元素对象
参数：元素id
返回值：根据元素id获取到的 DOM 对象，如果获取不到返回 null
context.getElementsByTagName() 根据标签名获取dom元素对象
参数：标签名
返回值：从 context 下获取的指定标签名的 dom 集合，获取不到时是空集合
ps：
dom 集合是类数组，有 length 有索引
context 不是指定的，当你想获取哪个元素的下的所有的指定标签，哪个元素就是 context
context.getElementsByClassName() 在上下文中，根据元素 class 名获取元素集合
参数：元素 class 名字
返回值：带有指定的 class 的元素集合，如果获取不到则返回空集合
context: 想要在哪个元素下查找某些 class 类名的元素，哪个元素就是 context
document.getElementsByName 通过 name 属性获取元素对象，一般用于表单元素集合
参数：元素 name 属性
返回值：带有指定那么属性值的元素集合，获取不到就是空集合
document.documentElement 获取 html 元素对象
context.querySelector(css选择器) 获取一个context.
context.querySelectorAll(css选择器) 获取所有context
这两种方法根据选择器来获取元素，但是有兼容性问题，并且获取数据不是实时的