HTML DOM深入学习（小白必备）

最新推荐文章于 2024-04-01 20:33:12 发布

Alone_in_

最新推荐文章于 2024-04-01 20:33:12 发布

阅读量632

点赞数

分类专栏： # 前端

本文链接：https://blog.csdn.net/Alone_in_/article/details/103954707

版权

24 篇文章 5 订阅

订阅专栏

一、基本定义

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档。这种结构被称为节点树：

DOM HTML tree

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

下面的图片展示了节点树的一部分，以及节点之间的关系：

DOM 节点关系

案例讲解：

<html>
  <head>
    <title>小白手册</title>
  </head>
  <body>
    <h1>第一节</h1>
    <p>Hello world!</p>
  </body>
</html>

从上面的 HTML 中：

并且：

并且：

<div>动态添加元素演示

参考：

关注

专栏目录