JavaScript操作HTML元素和样式详解

结果或目标

通过JavaScript动态修改HTML页面结构，包括新增段落、移除特定标签以及即时改变文本颜色等视觉效果。

准备条件

一个包含基本HTML结构的网页文件，以及内嵌或外部的JavaScript脚本环境。

真实操作顺序

第1步：创建新的 HTML 元素

目的：在页面中动态插入新内容。

入口：浏览器控制台或 <script> 标签内的逻辑。

动作：

1. 使用 document.createElement("tag") 创建元素节点。
2. 使用 document.createTextNode("text") 创建文本节点。
3. 将文本节点追加到元素节点：element.appendChild(textNode)。
4. 找到父容器（如使用 document.getElementById）并将新元素追加到其中。

关键参数与示例：

var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);

完成状态：指定的父元素下多了一个包含新文本的 <p> 标签。

第2步：删除已有的 HTML 元素

目的：从页面结构中移除不需要的节点。

入口：DOM 树中的父元素引用。

动作：由于 removeChild 必须由父元素调用，推荐以下两种路径：

• 路径A（已知父元素）：获取父元素引用后调用 parent.removeChild(child)。
• 路径B（仅知子元素）：利用 parentNode 属性自动定位父级，执行 child.parentNode.removeChild(child)。

代码示例：

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

完成状态：目标元素及其内部所有子内容从页面上消失。

第3步：改变 CSS 样式

目的：交互反馈或视觉高亮，无需加载额外CSS文件。

入口：元素的 style 对象。

动作：直接赋值 JavaScript 驼峰命名的样式属性。

语法：document.getElementById(id).style.property = "new style";

示例：

// 改变段落颜色为蓝色
document.getElementById("p2").style.color = "blue";

// 按钮点击事件示例
// onclick="document.getElementById('id1').style.color='red'"

注意：CSS 中的连字符属性（如 background-color）在 JS 中需转为驼峰式（backgroundColor）。

简要总结

以上就是通过 JavaScript 操作 HTML 元素结构和内联样式的详细内容，更多关于 DOM 高级操作及性能优化的资料请关注本站其它相关文章！