tutorials/javascript/dom/manipulation

JavaScript DOM 操作教程

DOM（文档对象模型）是浏览器用来解析和操作HTML和XML文档的接口。在JavaScript中，DOM操作是网页动态交互的基础。以下是一些关于JavaScript DOM操作的基础教程。

基础概念

DOM节点：HTML文档中的每个元素都可以被视为一个节点，例如元素节点、文本节点、属性节点等。
DOM树：HTML文档被解析成DOM树，每个节点都是树中的一个节点。

常用DOM操作

获取元素：
- document.getElementById(id)：通过ID获取元素。
- document.getElementsByTagName(tagName)：通过标签名获取元素集合。
- document.querySelector(selector)：通过CSS选择器获取元素。
修改元素内容：
- element.innerHTML：获取或设置元素内部HTML。
- element.innerText：获取或设置元素内部文本。
修改元素属性：
- element.getAttribute(attributeName)：获取元素属性。
- element.setAttribute(attributeName, value)：设置元素属性。
添加和删除元素：
- document.createElement(tagName)：创建一个新的元素节点。
- element.appendChild(child)：将子元素添加到父元素的末尾。
- element.removeChild(child)：从父元素中删除子元素。

实例

以下是一个简单的例子，演示如何使用JavaScript修改HTML元素的文本内容：

// 获取元素
var element = document.getElementById('myElement');

// 修改文本内容
element.innerText = 'Hello, world!';

// 添加新元素
var newElement = document.createElement('p');
newElement.innerText = '这是一个新元素。';
element.appendChild(newElement);

扩展阅读

想要了解更多关于JavaScript DOM操作的知识，可以阅读以下教程：