在前端开发中，JavaScript 是一种常用的编程语言，它可以通过 DOM (文档对象模型) 操作网页的结构、样式和内容，实现动态交互效果。本文将深入探讨 JavaScript DOM 的相关知识点，并提供实例代码进行演示。
什么是 DOM？
DOM 是一种将 HTML 或 XML 文档表示为树形结构的 API，包含了文档的每个部分（如元素、属性、文本等）以及它们之间的关系。通过 DOM，我们可以使用 JavaScript 来操作这棵树，从而改变页面的外观和行为。
DOM 节点
在 DOM 树中，所有内容都是节点，每个节点都有其对应的类型、属性和方法。以下是常见的节点类型：
- 元素节点：HTML 中的标签如
<body>、<div>等。 - 属性节点：HTML 元素的属性如
id、class等。 - 文本节点：HTML 元素内的文本内容。
- 注释节点：HTML 注释内容。
- 文档节点：整个 HTML 文档。
获取节点
我们可以通过不同的方式获取 DOM 节点，以下是一些常用的方法：
getElementById()
该方法通过元素的 ID 属性获取指定的元素节点。
let element = document.getElementById("myId");getElementsByClassName()
该方法通过元素的类名获取指定的元素节点列表，返回值为一个集合。
let elements = document.getElementsByClassName("myClass");getElementsByTagName()
该方法通过元素的标签名获取指定的元素节点列表，返回值为一个集合。
let elements = document.getElementsByTagName("div");querySelector()
该方法通过 CSS 选择器获取指定的第一个元素节点。
let element = document.querySelector("#myId .myClass");querySelectorAll()
该方法通过 CSS 选择器获取指定的所有元素节点列表，返回值为一个集合。
let elements = document.querySelectorAll("div.myClass");节点属性
每个 DOM 节点都有一系列属性，以下是常用的属性：
nodeName / tagName
返回节点的名称，对于元素节点来说，nodeName 返回标签名（大写），tagName 返回标签名（小写）。
let element = document.getElementById("myDiv");
console.log(element.nodeName); // "DIV"
console.log(element.tagName); // "div"nodeType
返回节点类型的数字代码，如 1 表示元素节点，3 表示文本节点，8 表示注释节点等，详细信息请参考官方文档。
let element = document.getElementById("myDiv");
console.log(element.nodeType); // 1nodeValue / textContent
返回节点的内容，对于元素节点来说，nodeValue 返回 null，而 textContent 返回其内部文本内容。
let element = document.getElementById("myDiv");
console.log(element.nodeValue); // null
console.log(element.textContent); // "Hello World"parentNode / parentElement
返回节点的父级节点，parentNode 和 parentElement 都可以使用。
let element = document.getElementById("myDiv");
console.log(element.parentNode); // <body>
console.log(element.parentElement); // <body>节点操作
通过 JavaScript，我们可以对 DOM 节点进行以下操作：
创建节点
我们可以通过以下方法创建新的节点：
document.createElement()
该方法可以创建一个指定名称的元素节点，并返回该节点对象。
let newElement = document.createElement("div");document.createTextNode()
该方法可以创建一个包含指定文本内容的文本节点，并返回该节点对象。
let newText = document.createTextNode("Hello World");添加节点
我们可以使用以下方法将节点添加到页面中：
element.appendChild()
该方法可以将一个节点添加为另一个节点的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1432