DOM（Document Object Model）和document不一样。
什么是DOM？document？
-
document是浏览器提供的一个对象，它是DOM的一部分，是访问和操作网页内容（DOM树）的入口。
通过document对象可以获取页面中的元素、创建新元素、修改元素属性等诸多操作。例如，可以使用
document.getElementById获取具有特定id的元素。 -
DOM（Document Object Model）即文档对象模型，是一种树形结构的编程接口，用于表示HTML或XML文档中的所有内容。
它将文档中的标签、属性、文本等都转换为对象，除了document对象外，还包括各种元素节点、文本节点、属性节点等。
例如，一个
<div>标签在DOM中是一个元素节点，这个节点可以有子节点，像其中包含的文本就是文本节点，节点之间构成了层次关系，就像树一样。
如何使用 JavaScript 操作 dom
在JavaScript中，可以通过以下常见方式操作DOM：
选择元素
-
通过ID选择：使用
document.getElementById("id名称")，返回一个与指定id属性值匹配的元素节点。例如，若有
<div id="myDiv"></div>，可以用document.getElementById("myDiv")来获取这个div元素。 -
通过标签名选择：
document.getElementsByTagName("标签名")会返回一个包含所有指定标签名的元素节点列表。如
document.getElementsByTagName("p")能获取文档中所有的<p>元素。 -
通过类名选择：
document.getElementsByClassName("类名")返回一个包含所有指定类名的元素节点列表。例如，
document.getElementsByClassName("myClass")获取所有类名为myClass的元素。 -
querySelector：使用
document.querySelector("CSS选择器")，它返回文档中匹配指定CSS选择器的第一个元素。例如
document.querySelector(".myClass")会返回第一个类名为myClass的元素；document.querySelector("#myId")返回id为myId的元素。 -
querySelectorAll：
document.querySelectorAll("CSS选择器")返回一个包含所有匹配指定CSS选择器的节点列表。像
document.querySelectorAll("p.myPara")会获取所有类为myPara的<p>元素。
改变元素内容
-
修改文本内容：对于获取到的元素节点，可以通过
innerHTML属性来改变元素包含的HTML内容。比如
document.getElementById("myDiv").innerHTML = "新的内容";。也可以使用textContent属性仅修改纯文本内容。 -
修改属性：可以修改元素的各种属性，如
src（对于<img>元素）、href（对于<a>元素）等。例如
document.getElementById("myImage").src = "新的图片路径";。 -
直接修改style属性：可以直接修改元素的
style属性来改变样式。例如
document.getElementById("myElement").style.color = "red";，这会将id为myElement的元素文字颜色设为红色。 -
使用classList属性：通过
classList属性来操作元素的类名。如
document.getElementById("myElement").classList.add("newClass")给元素添加一个newClass类；document.getElementById("myElement").classList.remove("oldClass")移除oldClass类；document.getElementById("myElement").classList.toggle("active")在元素有active类时移除，没有则添加。
创建和添加元素
-
创建元素：使用
document.createElement("标签名")来创建一个新的元素节点。例如
var newDiv = document.createElement("div");创建了一个新的div元素。 -
添加元素：可以将新创建的元素添加到文档中。如果想把新元素添加为某个元素的子元素，可以使用
appendChild方法。如
document.getElementById("parentDiv").appendChild(newDiv);，这就把newDiv添加到了id为parentDiv的元素内部。
删除元素
-
移除元素：使用
removeChild方法从DOM中移除元素。例如，若有一个元素
childDiv是parentDiv的子元素，可通过document.getElementById("parentDiv").removeChild(document.getElementById("childDiv"))将其移除。
