DOM（文档对象模型）

最新推荐文章于 2023-12-11 18:18:30 发布

原创最新推荐文章于 2023-12-11 18:18:30 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

DOM（文档对象模型）是将HTML网页转化为JS可编辑对象的工具，允许JavaScript操作网页内容。DOM由节点构成，形成树状结构，包括Document、Element、Attribute和Text等节点类型。访问DOM的方法包括getElementById、getElementsByClassName、getElementsByTagName、querySelector和querySelectorAll等。

一、什么是DOM？

简单来说，DOM是一个工具，它将HTML网页转化为可供JS编辑的对象，从而实现对于网页内容的增删操作。英文全称Document Object Model.

从英文全称入手，从三个单词的方向来解释DOM:

Document(文档）:具体所指示的就是整个HTML网页的文档，也就是用于操作的文本内容。

Object(对象）：将网页中任意的一个元素都看作一个对象，就类似于写HTML时我们所使用的各种类型的标签就是一个小小的对象，感觉更接近于ID类型。

Model（模型）：使用模型来表示对象之间的关系。

JS是用来优化、美化网页的效果的工具，但是其不能直接对于网页中的各种元素进行修改美化，需要使用DOM作为工具来使JS能够正常地发挥作用。

二、DOM的最小组成单位——节点

节点有很多种类型，各个类型的节点彼此之间相互有着某种关系，这些关系构成了层级，最终构成了树状结构。

Document节点是每一种文档的根节点（个人理解：毕竟叫Document，所有的文件都一定是文件）。

对于一个HTML文档

根节点唯一的子节点是<html>(文档元素：包裹在一个文档最外层的一个元素，故只存在一个）

常见的节点类型有如下几种：（或许也可以理解为数据类型）

Document（文档节点）、Attribute（属性节点）、Element（元素节点）、Text（文本节点）等等。详细的语法可以参考

(16条消息) 什么是DOM（超详细解释，建议收藏！！！）_今天去学习了吗？的博客-优快云博客

三、访问DOM

1.getElementById( ) --- 通过ID访问；

<body>
    <div id="box">IDdiv box</div>
    <div class="box">Classdiv box</div>
    <div class="box">Classdiv box</div>
    <p class="p">p element</p>
    <p class="p">p element</p>
    <p id="third-p">p element</p>
    
    
    <script>
        var oBox = document.getElementById('box');
        console.log(oBox); //=><div id="box">div box</div>
        
        oBox.style.background = 'red';
    </script>
</body>

2.getElementsByClassName( ) --- 通过类名访问；
3.getElementsByTagName( ) --- 通过标签名称访问；
4.querySelector( ) --- 通过CSS选择器访问（单个）；
5.querySelectorAll( ) --- 通过CSS选择器访问（所有）；
（作者：蓝Sir_链接：https://www.jianshu.com/p/0d2ae67751fa 参考文章）