DOM的基础概念

1.什么是DOM？

DOM（document object model）中文翻译文档对象模型，是一个表示任何 HTML 或 XML文档并与之交互的 API。DOM 是加载在浏览器的的文档模型，将文档表示为节点树，其中每个节点表示文档的一部分（例如元素、文本字符串或注释）。

下面简单介绍几个关键词的含义：

元素（element）：文档中的都有标签都是元素，元素可以看成是对象。

节点（node）：文档中都有的内容都是节点：标签，属性，文本。

文档（document）：一个页面就是一个文档。

其中三者的关系是：文档包含节点，节点包含元素。

2.DOM的作用

DOM 的作用就是让 JavaScript 可以对文档中的标签、属性、内容等进行访问和增删改操作。

例如：

const paragraphs = document.querySelectorAll("p");
docunment.write(paragraphs);

上述代码的作用：DOM 指定在此代码片段中的方法必须返回文档中所有 <p> 元素的内容。

DOM 是使用多个协同工作的 API 构建的。 核心 DOM 定义实体描述任何文档及其中的对象。 其他 API 会根据需要对此进行扩展，这些 API 会向 DOM 添加新的特性和功能。

3.DOM与JavaScript的联系与区别

联系：

DOM 是用 JavaScript 编写的，但使用 DOM 来访问文档及其元素。DOM 不是一种编程语言，但如果没有它，JavaScript 语言就不会有任何网页、HTML 文档及其组成部分的模型或概念。整个文档、标题、文档中的表、表头、表单元格中的文本以及文档中的所有其他元素都是该文档的文档对象模型的一部分。它们都可以使用 DOM 和脚本语言（如 JavaScript）访问和操作。

区别：

DOM 不是 JavaScript 语言的一部分， 而是用于构建网站的 Web API。 其被设计为独立于任何特定的编程语言，使文档的结构表示可以从单个一致的 API 获得。

4.如何访问DOM

在JavaScript中直接使用API，称为脚本，即由浏览器运行的程序。

在创建脚本时，无论是内联在元素中还是包含在网页中，都可以立即开始使用文档或窗口对象的 API 来操作文档本身或网页中的任何各种元素。

HTML部分：

  <div class ="box">123</div>
    <div class ="box">abc</div>
    <p id="nav">导航栏</p>
    <ul>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>

CSS部分：

<style>
        .box{
            width: 200px;
            height: 200px;
        }
    </style>

JavaScript部分：

<script>
        const box = document.querySelector(".box")
        console.log(box);
        const nav = document.querySelector("#nav")
        console.log(nav);
        // 可以直接修改属性值
        // nav.style.color = 'red';
        const li = document.querySelector('ul li:first-child')
        console.log(li);
        // 不能直接修改，因为是个数组，所以只能通过遍历的方式一次给里面元素做修改
        const lis = document.querySelectorAll('ul li')
        console.log(lis)
    </script>

上述代码的作用是获取DOM元素，效果如下：

上述是DOM的基础概念，希望可以帮助小伙伴们来简单理解DOM的一些内容。（以后我会陆续开始更新前端的基本知识和进阶知识，和大家一起学习进步，谢谢大家的观看。）