ES6 - HTML DOM

ES6+ 与 HTML 文档对象模型 (DOM)

在浏览器中加载的每个网页都有一个相应的文档对象模型 (DOM)。DOM 将 HTML 文档表示为一个树状结构的对象，其中每个对象对应文档的一部分（如元素、属性和文本）。JavaScript 可以与 DOM 交互来访问、修改、创建或删除元素和内容，从而使网页具有动态性和交互性。

DOM 是由万维网联盟 (W3C) 和 Web 超文本应用技术工作组 (WHATWG) 标准化的语言中立的 API（应用编程接口）。现代浏览器实现了这个标准 DOM，提供了一种一致的方式来操作网页文档。

DOM 层次结构 (概念)

DOM 以层次结构组织对象。顶部是 window 对象，表示浏览器窗口。window 对象有一个 document 属性，它是页面内容的入口点。

Window: 客户端 JavaScript 中的全局对象，代表浏览器窗口或标签页。
Document: 代表加载到窗口中的整个 HTML 文档。它是文档树的根。
Element: 代表一个 HTML 元素（例如，<p>、<div>、<img>）。元素可以包含其他元素、文本或属性。
Attribute: 代表元素的属性（例如，id、class、src）。
TextNode: 代表元素内的文本内容。

这种树状结构允许脚本通过访问这些对象及其属性和方法来导航和操作文档。

访问 DOM 元素

JavaScript 提供了几种从 DOM 中选择元素的方法：

document.getElementById(id): 返回具有指定 id 的元素。由于 ID 应该是唯一的，此方法返回单个元素或 null。
document.getElementsByTagName(tagName): 返回具有指定标签名的元素的 HTMLCollection（实时的、类似数组的对象）。
document.getElementsByClassName(className): 返回具有指定类名的元素的 HTMLCollection。
document.querySelector(cssSelector): 返回文档中第一个匹配指定 CSS 选择器的元素。如果没有找到匹配项，返回 null。
document.querySelectorAll(cssSelector): 返回一个静态的 NodeList（类似数组的对象），表示匹配指定 CSS 选择器组的文档元素列表。

querySelector 和 querySelectorAll 通常更受欢迎，因为它们使用 CSS 选择器，这对于 Web 开发人员来说功能强大且熟悉。

示例：访问元素

<!DOCTYPE html>
<html>
<head><title>DOM Access</title></head>
<body>
    <h1 id="main-title">Welcome</h1>
    <p class="content">This is a paragraph.</p>
    <p class="content">Another paragraph.</p>
    <div><button>Click Me</button></div>

    <script>
        const titleElement = document.getElementById('main-title');
        console.log('Title Element:', titleElement.textContent); // Welcome

        const paragraphs = document.getElementsByClassName('content');
        console.log('Number of paragraphs:', paragraphs.length); // 2
        for (let i = 0; i < paragraphs.length; i++) {
            console.log(`Paragraph ${i+1}:`, paragraphs[i].textContent);
        }

        const firstButton = document.querySelector('div button');
        console.log('First button text:', firstButton.textContent); // Click Me

        const allParagraphsQuery = document.querySelectorAll('p.content');
        allParagraphsQuery.forEach(p => console.log('QuerySelectorAll P:', p.textContent));
    </script>
</body>
</html>

修改 DOM 元素

一旦获得元素的引用，就可以修改其内容、属性和样式。

内容：
element.textContent: 获取或设置元素及其后代的文本内容（纯文本）。
element.innerHTML: 获取或设置元素内部的 HTML 内容（标记）。如果使用不受信任的用户输入进行设置，需谨慎，存在潜在的安全风险（XSS）。
属性：
element.getAttribute(name): 获取属性的值。
element.setAttribute(name, value): 设置属性的值。
element.removeAttribute(name): 移除属性。
element.id, element.className 等: 直接访问常见属性的属性。
element.classList: 一个用于操作类的对象（add, remove, toggle, contains）。
样式：
element.style.propertyName: 获取或设置内联 CSS 样式（例如，element.style.color = 'blue';）。属性名称使用驼峰命名法（camelCased）（例如，backgroundColor）。

示例：修改元素

<!DOCTYPE html>
<html>
<head><title>DOM Modification</title></head>
<body>
    <p id="myParagraph">Initial text.</p>
    <img id="myImage" src="old-image.jpg" alt="An image">

    <script>
        const p = document.getElementById('myParagraph');
        p.textContent = 'Text updated by JavaScript!'; // 文本已由 JavaScript 更新！
        p.style.color = 'green'; // 设置文字颜色为绿色
        p.style.fontWeight = 'bold'; // 设置文字粗体

        const img = document.getElementById('myImage');
        img.setAttribute('src', 'new-image.png'); // 设置图片 src 属性
        img.alt = 'A new image provided by script'; // 直接属性访问设置 alt 文本

        p.classList.add('highlight'); // 添加 CSS 类
        // Assuming CSS: .highlight { background-color: yellow; } // 假设 CSS: .highlight { background-color: yellow; }
    </script>
</body>
</html>

创建和添加/移除元素

您还可以创建新的 HTML 元素并将其添加到 DOM 中，或移除现有元素。

document.createElement(tagName): 创建一个新的元素。
document.createTextNode(text): 创建一个新的文本节点。
parentElement.appendChild(childElement): 将 childElement 添加到 parentElement 的最后一个子元素。
parentElement.insertBefore(newNode, referenceNode): 在 parentElement 内的 referenceNode 之前插入 newNode。
element.remove(): 从 DOM 中移除该元素（现代方法）。
parentElement.removeChild(childElement): 从 parentElement 中移除 childElement（较旧的方法）。

示例：创建和添加元素

<!DOCTYPE html>
<html>
<head><title>DOM Creation</title></head>
<body>
    <div id="container"></div>

    <script>
        const container = document.getElementById('container');

        // Create a new <h2> element
        // 创建一个新的 <h2> 元素
        const newHeading = document.createElement('h2');
        newHeading.textContent = 'Dynamically Added Heading'; // 动态添加的标题

        // Create a new <p> element
        // 创建一个新的 <p> 元素
        const newParagraph = document.createElement('p');
        newParagraph.textContent = 'This paragraph was created and added using JavaScript.'; // 这个段落是使用 JavaScript 创建并添加的。

        // Append the new elements to the container
        // 将新元素添加到容器中
        container.appendChild(newHeading);
        container.appendChild(newParagraph);

        // To remove the heading after 2 seconds (example)
        // 2 秒后移除标题（示例）
        setTimeout(() => {
            if (document.body.contains(newHeading)) { // Check if still in DOM // 检查是否仍在 DOM 中
                 newHeading.remove();
            }
        }, 2000);
    </script>
</body>
</html>

关于遗留 DOM 功能的注意事项：

旧的教程可能会提到一些在页面加载期间用于 DOM 操作的属性，如 document.alinkColor、document.bgColor，或方法如 document.write()、document.clear()。在现代 Web 开发中，这些大多数已被弃用或被认为是不好的做法。对于样式，请使用 CSS。对于页面加载后动态更新内容，请使用上述的 DOM 操作方法（textContent、appendChild 等），而不是 document.write()。

理解 DOM 以及如何操作它对于创建交互式和动态的 Web 应用程序至关重要。请始终参考最新的资源，例如 MDN Web Docs，以获取关于 DOM API 的最新信息。