关于DOM

Z^x

已于 2023-04-28 09:48:26 修改

阅读量60

点赞数

分类专栏：浏览器 JavaScript碎片式总结文章标签： javascript 前端 html

于 2023-04-05 13:42:10 首次发布

本文链接：https://blog.csdn.net/m0_63219422/article/details/129792940

版权

JavaScript碎片式总结同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

浏览器

3 篇文章 0 订阅

订阅专栏

DOM是文档对象模型，提供JS操作网页的接口。它将HTML转化为节点对象，允许通过JavaScript进行增删内容等操作。关键方法包括appendChild、removeChild等，用于插入、删除和替换节点。此外，DOM还提供了getElementById等查找元素的方法，以及Element类型的属性如innerHTML和classList。

摘要由CSDN通过智能技术生成

昨天看了js的面向对象特征和一些设计模式因为js用于前端需要浏览器环境的支持所以记录一些DOM的一些特点

DOM是干嘛的？

DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。

• 文档

– 文档表示的就是整个的HTML网页文档

• 对象

– 对象表示将网页中的每一个部分都转换为了一个对象。

• 模型

– 使用模型来表示对象之间的关系，这样方便我们获取对象

那么我们就可以把DOM看作一个中介，把我们想要修改的HTML结构具象化成节点对象，再由我们使用js去操作对象，借此达到对HTML文档的修改。

但是这个具象化节点的过程并不是DOM做的，DOM只是一个模型，这个解析过程是浏览器帮我们做的，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理解成网页的编程接口。

也就是说，有了DOM，我们才有使用js操作节点的权限，DOM为我们提供了一个入口，让我们可以修改HTML内容。

DOM的结构

DOM的最小组成单位叫节点，我们上面提到DOM树的时候说过，DOM树就是由各种各样的节点对象组成。

最顶层的节点是document节点，它代表了整个文档。文档里面最高的HTML标签，一般是<html>，它构成树结构的根节点（root node），其他HTML标签节点都是它的下级。

除了根节点以外，其他节点对于周围的节点都存在三种关系。

父节点关系（parentNode）：直接的那个上级节点。

子节点关系（childNode）：直接的下级节点。

同级节点关系（sibling）：拥有同一父节点的节点。

DOM提供操作接口，用来获取三种关系的节点。其中，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性

DOM方法

对于DOM的方法，我了解的不是很多，只能写几个常用的作为参考了

分别是appendChild、removeChild、replaceChild、insertBefore

1.appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

2.insertBefore方法用于将某个节点插入父节点内部的指定位置。

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>
<script>
  //创建一个新的、普通的<span>元素
  var sp1 = document.createElement("span");
  // 向span标签插入内容
  sp1.innerHTML = '我是span标签'
  //插入节点之前，要获得节点的引用
  var sp2 = document.getElementById("childElement");
  //获得父节点的引用
  var parentDiv = sp2.parentNode;
  //在DOM中在sp2之前插入一个新元素
  parentDiv.insertBefore(sp1, sp2);
</script>

3.removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  span1.parentNode.removeChild(span1);
</script>

4.replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  //创建一个新的div标签
  var div1 = document.createElement("div");
  // 向div标签插入内容
  div1.innerHTML = '我是div1标签';
  // 节点替换
  span1.parentNode.replaceChild(div1, span1);
</script>

使用DOM编程

HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。

在 DOM 中，所有 HTML 元素都被定义为对象。

编程界面是每个对象的属性和方法。

属性是能够获取或设置的值（就比如改变 HTML 元素的内容）。

方法是能够完成的动作（比如添加或删除 HTML 元素）。

查找元素的方法

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文中匹配的CSS选择器的所有元素节点列表