The JavaScript Way第十五章高级：ES6+特性全解析-优快云博客

The JavaScript Way第十五章高级：ES6+特性全解析

【免费下载链接】thejsway The JavaScript Way book 项目地址: https://gitcode.com/gh_mirrors/th/thejsway

在Web开发中，动态修改页面内容是提升用户体验的核心技能。《The JavaScript Way》第15章详细讲解了如何通过JavaScript操作DOM（文档对象模型）实现页面交互，本章将带你系统掌握DOM修改的关键技术，从元素更新到样式控制，让你的网页真正“活”起来。

修改现有元素

DOM遍历不仅能查找元素，还能直接更新它们的内容和属性。本章所有示例基于以下HTML结构展开：

<h3 class="beginning">Some languages</h3>
<div id="content">
    <ul id="languages">
        <li id="cpp">C++</li>
        <li id="java">Java</li>
        <li id="csharp">C#</li>
        <li id="php">PHP</li>
    </ul>
</div>

HTML内容操作

innerHTML属性允许通过字符串直接修改元素的HTML内容。例如添加新语言到列表：

document.getElementById("languages").innerHTML += '<li id="c">C</li>';

提示：官方文档示例建议仅在小型内容修改时使用innerHTML，大规模操作应采用更安全的DOM方法。

清空元素内容也非常简单：

document.getElementById("languages").innerHTML = "";

文本内容修改

textContent属性专门用于操作元素的纯文本内容，不会解析HTML标签：

document.querySelector("h3").textContent += " for programming";

属性与类操作

通过setAttribute()方法或直接属性赋值可以修改元素属性：

// 两种设置id属性的方式
document.querySelector("h3").setAttribute("id", "title");
document.querySelector("h3").id = "title";

classList属性提供了便捷的类名操作方法：

const titleElement = document.querySelector("h3");
titleElement.classList.remove("beginning");  // 移除类
titleElement.classList.add("title");         // 添加类

添加新元素

创建新元素需要三个步骤：创建元素→设置属性→插入DOM。以添加"Python"语言为例：

const pythonElement = document.createElement("li"); // 创建元素
pythonElement.id = "python";                       // 设置属性
pythonElement.textContent = "Python";              // 设置文本
document.getElementById("languages").appendChild(pythonElement); // 插入DOM

高级插入技巧

除了appendChild()，还有多种插入方式满足不同场景：

文本节点插入：使用createTextNode()创建纯文本节点
指定位置插入：insertBefore(newNode, referenceNode)在参考节点前插入
精准位置插入：insertAdjacentHTML(position, htmlString)支持四种位置参数

// 在PHP前插入Perl
document.getElementById("languages").insertBefore(perlElement, document.getElementById("php"));

// 在列表开头插入JavaScript
document.getElementById('languages').insertAdjacentHTML("afterBegin", '<li id="javascript">JavaScript</li>');

节点替换与删除

替换节点：replaceChild(newNode, oldNode)
删除节点：removeChild(node)

// 替换Perl为Lisp
document.getElementById("languages").replaceChild(lispElement, document.getElementById("perl"));

// 删除Lisp节点
document.getElementById("languages").removeChild(document.getElementById("lisp"));

样式操作

style属性

通过元素的style属性可以直接修改内联样式：

const paragraphElement = document.querySelector("p");
paragraphElement.style.color = "red";
paragraphElement.style.margin = "50px";
paragraphElement.style.fontFamily = "Arial";
paragraphElement.style.backgroundColor = "black";

注意：CSS复合属性在JS中使用驼峰式命名，如background-color变为backgroundColor

计算样式

getComputedStyle()方法能获取元素最终应用的所有样式，包括CSS文件定义的样式：

const paragraphStyle = getComputedStyle(document.getElementById("para"));
console.log(paragraphStyle.fontStyle); // "italic"
console.log(paragraphStyle.color);     //  rgb(0, 0, 255)

性能优化建议

频繁DOM操作会导致页面重排重绘，影响性能。最佳实践是：

创建元素后先设置所有属性再插入DOM
使用文档片段（DocumentFragment）批量处理节点
避免频繁读取offset等触发重排的属性

// 性能较差的方式
const newNode = document.createElement("li");
parentNode.appendChild(newNode); // 先插入DOM
newNode.textContent = "内容";    // 再修改属性

// 性能更优的方式
const newNode = document.createElement("li");
newNode.textContent = "内容";    // 先设置属性
parentNode.appendChild(newNode); // 最后插入DOM

实践练习

添加带链接的段落

在语言列表下方添加包含外部链接的段落：

报纸列表生成

将数组数据转换为可点击的链接列表：

const newspapers = ["https://www.nytimes.com", "https://www.washingtonpost.com", "http://www.economist.com"];

迷你词典实现

使用<dl>标签创建术语列表：

更多实践练习及完整代码可参考第十五章原文，包括：

动态修改页面颜色
获取元素尺寸信息
复杂DOM结构生成

掌握这些DOM操作技术后，你将能够创建交互丰富的动态网页。建议结合项目教程中的示例代码进行练习，逐步提升前端开发技能。

本章所有示例图片及完整代码均来自The JavaScript Way项目源码，可通过项目仓库获取更多学习资源。

【免费下载链接】thejsway The JavaScript Way book 项目地址: https://gitcode.com/gh_mirrors/th/thejsway

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考