javascript文档对象模型DOM入门详解

最新推荐文章于 2022-09-22 18:26:39 发布

SpencerYang

最新推荐文章于 2022-09-22 18:26:39 发布

阅读量518

点赞数 1

分类专栏： javascript HTMLCSS java

本文链接：https://blog.csdn.net/SpencerYang/article/details/51111114

版权

HTMLCSS 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

java

1 篇文章 0 订阅

订阅专栏

DOM：

一、什么是DOM：

Document Object Model（文档对象模型），DOM是属于javascript的三分之一（JS组成：ECMAscript、DOM、BOM）

二、为什么使用DOM：

Web前端开发一般用到HTML、CSS、JS
其中HTML负责内容，CSS负责外观，javascript负责行为
JS的行为主要是：
1、interact with HTML，既和HTML进行交互，当然，也可以操作HTML页面的外观（使用DOM）；

2、interact with browser，既和浏览器进行交互（使用BOM）。

而JS和HTML属于不同领域的语言，JS属于脚本语言（编程语言之一），HTML属于标记语言（markup，不是编程语言）。
如果JS想和HTML进行交互（比如对HTML内容的增删改查，接收event事件），就要用到一个工具获取到HTML的内容，而这个工具就是DOM。

三、DOM（准确来说应该是：1、DOM树；2、DO，文档对象）是如何生成的：

当客户端（如浏览器）从服务器获取到HTML、CSS、JS后，就会启动对应的解析器解析这些内容。
解析器解析HTML时，会把HTML内容呈现给用户，当然，也会将HTML按照特定的结构、顺序生成一个DOM，提供给JS使用；

四、DOM结构的生成（见下图）：
1、整个HTML文档被当成一个document对象，它是整个DOM的根节点，就像一棵树的树根；
2、接下来就是<html>元素，它是document的子节点（这里我们简称html节点，下同），就像树干；
3、再接下来就是<head>和<body>,它们是html节点的子节点，就像大树枝，head节点和body节点是同级关系，即兄弟（sibling）节点；
4、进而会是head节点和body节点各自的子节点，如<script>、<div>等元素对应的节点，就像小树枝；
5、重复第4步骤，不断获取各自的子节点，一直解析到文本节点（单纯的文本，没有其它元素），它是最终一代的节点（注意：文本也有对应的节点 textNode，特别是在用JS递归或循环迭代寻找节点的时候要注意）