本文将介绍JavaScript中的DOM（文档对象模型）基础知识，包括DOM树结构、节点类型及其属性和方法等。读者将学习如何使用JavaScript操作DOM以实现动态改变网页内容，提升用户交互体验。
DOM树结构
DOM树是HTML文档中所有元素的层次结构，在DOM树中，每个HTML元素都是一个节点，节点可以有子节点、父节点和兄弟节点等关系。通过JavaScript可以很方便地访问和操作DOM树中的任何一个节点。
示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------------- ------- ------ ----------------------------- ---------------------- ---- --------------- -------------------- -------------------------- ----- ------- -------展开代码
在上面的示例代码中，整个HTML文档就是一个DOM树，<!DOCTYPE>、<html>、<head>、<title>、<body>、<h1>、<p>、<ul>和<li>等元素都是DOM节点。
节点类型及其属性和方法
在DOM中，每个节点都有一个nodeType属性，用于表示该节点的类型。节点类型有以下几种：
- 元素节点（
Node.ELEMENT_NODE）：代表元素，比如<div>、<p>、<ul>等。 - 属性节点（
Node.ATTRIBUTE_NODE）：代表属性，比如class、id、src等。 - 文本节点（
Node.TEXT_NODE）：代表文本内容，比如<p>标签中的文本内容。 - 注释节点（
Node.COMMENT_NODE）：代表注释内容，比如<!-- 这是一段注释 -->。
对于不同类型的节点，还有不同的属性和方法可供操作。
例如，我们可以使用document.createElement()方法创建一个新的元素节点，并使用appendChild()方法将其添加到指定父节点的子节点列表中：
var newElement = document.createElement('div'); newElement.id = 'new-div'; newElement.className = 'box'; newElement.textContent = '这是一个新的div'; var parentElement = document.getElementById('parent-div'); parentElement.appendChild(newElement);
上述代码会创建一个新的<div>元素节点，并设置其id、class和文本内容，然后将其添加到ID为parent-div的父节点中。
使用JavaScript操作DOM
使用JavaScript操作DOM可以实现动态改变网页内容，提升用户交互体验。下面是一些常见的操作DOM的方法：
document.getElementById(id)：通过元素的id属性获取指定元素节点。element.parentNode：获取指定元素节点的父节点。element.childNodes：获取指定元素节点的所有子节点。element.firstChild：获取指定元素节点的第一个子节点。element.lastChild：获取指定元素节点的最后一个子节点。element.previousSibling：获取指定元素节点的前一个兄弟节点。element.nextSibling：获取指定元素节点的后一个兄弟节点。element.getAttribute(name)：获取指定元素节点的某个属性值。element.setAttribute(name, value)：设置指定元素节点的某个属性值。element.innerHTML：获取或设置指定元素节点的HTML内容。element.textContent：获取或设置指定元素节点的文本内容。
示例代码：
var elem = document.getElementById(' > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/4095) ，转载请注明来源 [https://www.javascriptcn.com/post/4095](https://www.javascriptcn.com/post/4095)
