DOM是一个稍微复杂的东西，JavaScript当然也有操作DOM的对应API。我们这里就先简单讲讲什么DOM，如何通过JavaScript来操作DOM。
什么是DOM？
DOM中文就是文档对象模型，是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。网页是一个既可以在浏览器窗口中显示，也可以作为 HTML 源代码的文档。在这两种情况下，它都是同一个文档，但文档对象模型（DOM）的表示方式使它可以被操作。作为一个面向对象的网页表示，它可以用脚本语言（如 JavaScript）进行修改。
DOM和JavaScript
DOM 不是一种编程语言，但如果没有它，JavaScript 语言就不会有任何关于网页、HTML 文档、SVG 文档及其组成部分的模型或概念。文档作为一个整体，标题、文档中的表格、表头、表格单元中的文本以及文档中的所有其他元素都是该文档对象模型的一部分。它们都可以使用 DOM 和像 JavaScript 这样的脚本语言进行访问和操作。
DOM 不是 JavaScript 语言的一部分，而是用于建立网站的 Web API。JavaScript 也可以在其他情况下使用。例如，Node.js 在计算机上运行 JavaScript 程序，但提供了一套不同的 API，而且 DOM API 不是 Node.js 运行时的核心部分。
基本类型
实际项目中，我们常用的类型其实就几个：
| 数据类型 | 描述 |
|---|---|
| Document | 当一个成员返回 document 对象（例如，元素的 ownerDocument 属性返回它所属的 document），这个对象就是 root document 对象本身。 |
| Node | 位于文档中的每个对象都是某种类型的节点。在一个 HTML 文档中，一个对象可以是一个元素节点，也可以是一个文本节点或属性节点。 |
| Element | element 类型是基于 node 的。它指的是一个元素或一个由 DOM API 的成员返回的 element 类型的节点。 |
| NodeList | nodeList 是由元素组成的数组，如同 document.querySelectorAll() 等方法返回的类型。 |
访问DOM
在使用 DOM 时，不需要做任何其他特殊的操作。你可以在脚本中直接使用 JavaScript 的 API，这是一个由浏览器运行的程序。
我们在实际项目中，也会经常用到使用JavaScript来访问DOM，然后对其进行操作！我们来举个栗子！创建一个HTML文档，使用JavaScript来操作DOM。
获取DOM标签
- getElementsByTagName()，通过查找标签来获取DOM，返回一个数组
- getElementById()，通过查找标签的id来获取DOM，因为id是具有唯一性，所以返回的是一个对象。
- getElementsByClassName()，通过查找标签的class来获取DOM，返回一个数组
- querySelector()，查找啥都行，但是如果是多个的话，只会获取其中的第一个
- querySelectorAll()，也是查找啥都行，但是多了个ALL，意思就是返回的是一个数组，会查询当前页面所有符合的DOM标签。返回的类型就是NodeList。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript和DOM</title>
</head>
<body>
<div id="name">这是一个div</div>
<div class="tips">提示</div>
</body>
<script>
// 使用document.getElementsByTagName获取dom标签
const body = document.getElementsByTagName("body");
console.log("body", body);
// 使用document.getElementById获取dom标签
const nameDiv = document.getElementById("name");
console.log("nameDiv", nameDiv);
// 使用document.getElementsByClassName获取dom标签
const tips = document.getElementsByClassName("tips");
console.log("tips", tips);
// 使用document.querySelector获取标签
const query = document.querySelector('div')
console.log('query',query);
// 使用document.querySelectorAll获取标签
const queryAll = document.querySelectorAll('div')
console.log('queryAll',queryAll);
</script>
</html>
获取DOM对应的元素
- innerHTML，获取DOM标签的文本
- style，获取DOM标签的样式
- getAttribute，获取DOM标签的属性
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript和DOM</title>
</head>
<body>
<div id="name">这是一个div</div>
<div class="tips">提示</div>
</body>
<script>
// 使用document.getElementsByTagName获取dom标签
const body = document.getElementsByTagName("body");
console.log("body", body);
// 使用document.getElementById获取dom标签
const nameDiv = document.getElementById("name");
console.log("nameDiv", nameDiv);
// 使用document.getElementsByClassName获取dom标签
const tips = document.getElementsByClassName("tips");
console.log("tips", tips);
// 使用document.querySelector获取标签
const query = document.querySelector("div");
console.log("query", query);
// 使用document.querySelectorAll获取标签
const queryAll = document.querySelectorAll("div");
console.log("queryAll", queryAll);
// 使用innerHTML获取标签文本
const text = nameDiv.innerHTML;
console.log("text", text);
// 使用style获取标签的样式
const style = nameDiv.style;
console.log("style", style);
// 使用getAttribute获取标签的属性
const attr = nameDiv.getAttribute("id");
console.log("attr", attr);
</script>
</html>
创建DOM标签
- createElement，方法用于创建一个由标签名称 tagName 指定的 HTML 元素。
- write，将一个文本字符串写入对应的DOM标签
- append或者appendChild，追加一个标签
- write，写文本或者html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript和DOM</title>
</head>
<body>
<div id="name">这是一个div</div>
<div class="tips">提示</div>
</body>
<script>
// 使用document.getElementsByTagName获取dom标签
const body = document.getElementsByTagName("body");
console.log("body", body);
// 使用document.getElementById获取dom标签
const nameDiv = document.getElementById("name");
console.log("nameDiv", nameDiv);
// 使用document.getElementsByClassName获取dom标签
const tips = document.getElementsByClassName("tips");
console.log("tips", tips);
// 使用document.querySelector获取标签
const query = document.querySelector("div");
console.log("query", query);
// 使用document.querySelectorAll获取标签
const queryAll = document.querySelectorAll("div");
console.log("queryAll", queryAll);
// 使用innerHTML获取标签文本
const text = nameDiv.innerHTML;
console.log("text", text);
// 使用style获取标签的样式
const style = nameDiv.style;
console.log("style", style);
// 使用getAttribute获取标签的属性
const attr = nameDiv.getAttribute("id");
console.log("attr", attr);
// 创建标签，追加标签
const p = document.createElement("p");
p.innerText = "这个是新建的p标签";
p.id = "newP";
nameDiv.appendChild(p);
// write写文本
document.write("最后一个标签");
</script>
</html>
总结
以上就是常用的DOM API，当然还有很多其他的API，比如删除指定标签等！如果有兴趣可以对应的查一下！下一期讲BOM和JavaScript。
