本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

本文主要内容：介绍了DOM的定义与作用，总结了一些在JS中对DOM可以进行的操作

在简单地学习完基础的react内容并且自己尝试开发一个小项目后，最大的感触是来自JS基础的不扎实。所以接下来会踏踏实实地总结一些JS的相关知识点，来进一步加深对JavaScript的理解。

什么是DOM

在我学习什么是DOM时，感觉总是有点懵懵懂懂，好像明白是什么，但是要用自己的话来解释一下DOM，就只会展开它的缩写顺便翻译一下，Document Object Model(文本对象模型)

而在读了这篇文章后，里面有一段如下的话，瞬间解答了我的困惑

If we consider the phrase 'Document Object Model' , it's actually quite a good name to explain the underlying concept. It says that the DOM is an object-based model of a document.

所以现在在我的理解中，普通的 HTML 文件是一个文本文件，是纯粹的文档。

而 DOM 是一个对象模型，里面的像<body> <head>什么的都是可供 JS 操作的属性。所以就可以引用MDN里的一个公式

API (web 或 XML 页面) = DOM + JS

DOM 经过 JS 的操作后，能够生成网页

如何操作DOM

了解了什么是 DOM ，以及网页需要 DOM 经过操作生成后，接下来就详细介绍一下 JS 对 DOM 可以进行哪些操作。

获取DOM元素

在操作之前当然要先获取要被操作的元素，本文介绍三种方法

getElementById()

这是我目前最常用的方法，每次在 react 中将 App.js 里写的一大堆东西 render 到 id="root" 的 <div> 时，都会用到这个方法

所以看一个小例子，

<head>
    <title>DOM</title>
</head>
<body>
    <div id="test">Hello, world!</div>
</body>
<script src="./index.js"></script>
</html>

这是创建的一个HTML文件，此时就可以将整体看作一个DOM。下面将对它进行操作

const text1 = document.getElementById("test")
console.log(text1)

可以看到我们获取了id="test"的<div>元素，并且将它打印了出来

querySelector()

这个方法也是类似，不过有更多的可操作余地

比如说这时我们还是想根据 id 来获取上面HTML文件中元素，那么我们可以使用下面的语句

const text1 = document.querySelector("#test")
console.log(text1)

即使用#代表使用id进行查询

此外还有另外两种类似 CSS 的查询方法，但是它们获取的对象也相应的复杂了不少

const text1 = document.querySelector("div")
console.log(text1)

直接利用标签名进行查询，经过尝试会获得有着大量属性的对象

还有可以利用class进行查询，给div添加一个class="world"，于是可以使用下面语句

const text1 = document.querySelector(".world")
console.log(text1)

会获得与上面图片相同的结果。

querySelectorAll()

上面一种方法仅仅会选中第一个匹配的元素，而这种方法会匹配所有选中的元素，如下

在HTML文件中添加了一个<div>Hello, DOM!</div>，使用下面的语句查询

const text1 = document.querySelectorAll("div")
console.log(text1)

于是就能获得上面图片的结果。

创建DOM元素

每次都在 HTML 中手动创建 DOM 元素在工程量上去后会显得不够优雅，所以在 JS 中也有创建 DOM 元素的方法，createElement()和appendChild()

所以我们可以使用下面的代码

const title = document.createElement("h1");
document.body.appendChild(title);

看一下效果

虽然是空白的页面，但是<h1>元素已经被创建成功了，我们接下来可以填充<h1>来获得内容

const title = document.createElement("h1");
title.textContent = "Hello, DOM!"
document.body.appendChild(title);

于是就能获得想要的结果了

改变DOM元素样式

在我们知道了如何获取 DOM 元素和如何创建DOM元素后，这个只需要知道基本的语法就行了。

比如修改上面创建的元素的颜色为红色，我们能直接使用title.style.color = "red"，效果如下

比如想修改已有DOM元素的值，我们们需要先通过三种方法之一获取已有DOM元素，然后修改

const test = document.getElementById("test")
test.style.color = "blue"

效果如下

添加DOM事件

除了修改DOM元素的内容和样式外，还有很重要的一个是添加事件

比如我们想给一个按钮添加点击事件，那么我们可以先获取它，再用addEventListener()添加事件

代码如下

const button = document.getElementById("btn");
button.addEventListener("click", () => {
    alert("Hello, DOM!");
});

于是我们就给DOM元素按钮添加了事件

小结

因为本篇文章的重点在于原生JS对于DOM的操作，所以还并未涉及虚拟DOM的操作，在未来的文章中会进一步对虚拟DOM以及影子DOM做一些总结。

本篇文章虽然基础，但是也算是较为系统地梳理了我对DOM的理解，包括

DOM可理解为被JS操作的文本对象
使用getElementById() querySelector() querySelectorAll()三种方法获取DOM元素
使用createElement()和appendChild()创建DOM元素，并放到HTML文件上
使用.style修改DOM元素样式
使用addEventListener()给DOM元素添加事件

参考文章1： www.freecodecamp.org/news/what-i…

参考文章2： www.codeguage.com/courses/js/…

【JavaScript】什么是DOM | 如何使用JS操作DOM

前言