DOM操作指南：获取、更新与添加节点

"JavaScript操作DOM对象Day05" 在JavaScript中，DOM（Document Object Model）是一种标准，用于表示HTML或XML文档的结构，并允许程序和脚本动态更新、添加和删除文档内容。DOM是一个树形结构，其中每个元素都是一个节点，可以通过JavaScript访问和操作这些节点来改变网页的行为。 0. 核心概念 浏览器中的网页可以看作是一个DOM树，每个HTML元素对应一个DOM节点。要对网页进行交互，首先需要获取到相应的DOM节点，然后才能进行更新、添加或删除操作。 1. 获取DOM节点 - `getElementsByTagName(tagName)`：通过标签名获取所有匹配的元素，返回的是一个NodeList集合。 - `getElementById(id)`：根据ID获取唯一匹配的元素。 - `getElementsByClassName(className)`：根据类名获取所有匹配的元素，同样返回NodeList集合。 - `father.children`：获取父节点的所有子节点，返回一个HTMLCollection。 - `father.firstChild` 和 `father.lastChild`：分别获取父节点的第一个和最后一个子节点。 2. 更新节点 - `innerText` 和 `innerHTML`：分别用于设置或获取元素的纯文本内容和HTML内容。 - `style`属性：通过`.style`可以访问和修改元素的内联样式，如`.style.color`、`.style.fontSize`等，注意CSS属性名通常采用驼峰式命名。 3. 添加节点 - 当需要在已存在的DOM节点后面添加新节点时，可以使用`appendChild(node)`方法，将新节点添加到指定元素的末尾。 - 如果要将已有节点插入到特定位置，如在某个元素之前或之后，可以使用`insertBefore(newNode, referenceNode)`或`insertAdjacentElement(position, newNode)`。 - 创建新节点的方法有`document.createElement(tagName)`，例如创建一个新`<div>`元素。 举例来说，如果你有一个列表元素`<ul id="list">`，并且你想在其内部添加一个新的`<li>`元素，你可以这样做： ```javascript var list = document.getElementById('list'); var newLi = document.createElement('li'); newLi.textContent = '新项目'; list.appendChild(newLi); ``` 这将在`<ul>`列表的末尾添加一个新的列表项。 4. 删除节点 - `removeChild(node)`：从其父节点中移除指定的子节点。 - `replaceChild(newNode, oldNode)`：替换父节点中的一个子节点。 掌握DOM操作是JavaScript在网页开发中不可或缺的一部分，它使得我们可以与用户界面进行实时互动，构建动态和响应式的Web应用。了解并熟练运用这些基本操作，将有助于你更有效地操控网页元素。