JavaScript with-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 中的 DOM 操作

DOM (Document Object Model) 是一种编程接口，用于处理 HTML 或 XML 文档。它将文档表示为节点和对象，使得开发者可以通过编程方式来访问和操作这些文档的内容、结构和样式。

什么是 DOM？

DOM 将网页视为一个由节点构成的树状结构。这个结构包含了文档中的所有元素，如文本、元素标签等。通过 DOM，开发者可以动态地修改页面内容、添加或删除元素，甚至改变元素的属性和样式。

DOM 节点类型

DOM 节点主要有以下几种类型：

Element：代表 HTML 或 XML 元素。
Attribute：代表元素的属性。
Text：代表文本节点。
Document：代表整个文档。
DocumentType：代表 DOCTYPE 声明。
Comment：代表注释。

获取 DOM 元素

在 JavaScript 中，获取 DOM 元素是进行 DOM 操作的第一步。常用的方法有以下几种：

通过 ID 获取元素

let element = document.getElementById('elementId');

通过标签名获取元素

let elements = document.getElementsByTagName('tagName');

通过类名获取元素

let elements = document.getElementsByClassName('className');

使用 `querySelector` 和 `querySelectorAll`

querySelector 返回匹配指定 CSS 选择器的第一个元素。querySelectorAll 则返回所有匹配指定 CSS 选择器的元素。

let element = document.querySelector('#idSelector');
let elements = document.querySelectorAll('.classSelector');

修改 DOM 元素

获取到 DOM 元素后，我们可以对其进行各种修改，包括修改内容、样式、属性等。

修改元素内容

使用 .innerHTML 或 .textContent 来修改元素的内容。

element.innerHTML = '<strong>New content</strong>';
element.textContent = 'New text content';

修改元素样式

可以通过 .style 属性来修改元素的样式。

element.style.color = 'red';
element.style.fontSize = '20px';

也可以通过修改类名来应用样式表中的样式。

element.className = 'newClass';

修改元素属性

使用 .setAttribute 方法来修改元素的属性。

element.setAttribute('src', 'newImage.jpg');

添加和删除元素

添加元素

可以通过创建新元素并将其插入到现有元素中来实现。

// 创建新元素
let newElement = document.createElement('div');

// 设置新元素的内容
newElement.textContent = 'This is a new div';

// 插入新元素
document.body.appendChild(newElement);

删除元素

可以通过 removeChild 方法来删除元素。

let parent = document.getElementById('parent');
let child = document.getElementById('child');
parent.removeChild(child);

或者直接使用 remove 方法（兼容性较好的现代浏览器）。

let element = document.getElementById('element');
element.remove();

事件处理

DOM 元素可以绑定事件处理器，当特定事件发生时执行相应的代码。

// www.javascriptcn.com code example
// 绑定点击事件
element.addEventListener('click', function() {
    alert('Element clicked!');
});

// 或者使用传统的事件处理程序
element.onclick = function() {
    alert('Element clicked!');
};

遍历 DOM 结构

DOM 结构可以使用多种方法进行遍历。

子节点

let children = element.children; // 获取所有子元素
let firstChild = element.firstChild; // 获取第一个子节点
let lastChild = element.lastChild; // 获取最后一个子节点

父节点

let parentNode = element.parentNode; // 获取父节点

兄弟节点

let nextSibling = element.nextSibling; // 获取下一个兄弟节点
let previousSibling = element.previousSibling; // 获取上一个兄弟节点

动态生成表格

使用 JavaScript 动态生成表格是一个常见的应用场景。

// www.javascriptcn.com code example
<table id="table"></table>
<script>
    let table = document.getElementById('table');
    let data = [
        ['Name', 'Age', 'Country'],
        ['Alice', '30', 'USA'],
        ['Bob', '25', 'Canada']
    ];

    for (let i = 0; i < data.length; i++) {
        let row = document.createElement('tr');

        for (let j = 0; j < data[i].length; j++) {
            let cell = document.createElement('td');
            cell.textContent = data[i][j];
            row.appendChild(cell);
        }

        table.appendChild(row);
    }
</script>

总结

本章介绍了如何使用 JavaScript 对 DOM 进行操作。从获取元素、修改内容和样式，到添加和删除元素，再到处理事件和遍历 DOM 结构，这些基础操作是前端开发中不可或缺的部分。熟练掌握这些技术，将帮助你更高效地构建和维护复杂的 Web 应用。

JavaScript with