当前位置： 首页 > news >正文

JavaScript DOM 元素节点操作详解

news 2025/8/7 7:20:54

一、获取DOM元素

1. 通过ID获取

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

2. 通过类名获取

const elements = document.getElementsByClassName('className');
// 返回HTMLCollection（动态集合）

3. 通过标签名获取

const elements = document.getElementsByTagName('div');
// 返回HTMLCollection（动态集合）

4. 通过CSS选择器获取

// 获取第一个匹配元素
const element = document.querySelector('.container > .item');// 获取所有匹配元素
const elements = document.querySelectorAll('div.highlight');
// 返回NodeList（静态集合）

5. 通过name属性获取

const elements = document.getElementsByName('username');
// 返回NodeList

二、创建节点

1. 创建元素节点

const newDiv = document.createElement('div');
代码演示：
    <script>// 创建新的 div 元素const newDiv = document.createElement('div');// 添加内容或属性newDiv.textContent = '这是一个新的div';newDiv.id = 'myNewDiv';newDiv.className = 'box highlight';// 添加到文档的 body 中document.body.appendChild(newDiv);</script>
效果展示：

2. 创建文本节点

const textNode = document.createTextNode('Hello World');
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>创建文本节点</title>
</head><body><div id="text"></div><script>const text = document.getElementById('text')const textNode = document.createTextNode('Hello World')text.appendChild(textNode)</script>
</body></html>
效果展示：

3. 创建注释节点

const comment = document.createComment('This is a comment');
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="_div">你看我干嘛？我没有注释~</div><script>const comment = document.createComment('我是一条注释~~~');const _div = document.getElementById('_div');_div.appendChild(comment) //在div里面的末尾添加注释</script>
</body></html>
效果展示：

4. 克隆节点

1. 浅克隆（不包含子节点)
const originalElement = document.getElementById('myElement');
const shallowClone = originalElement.cloneNode(false); // 或 cloneNode()
2. 深克隆（包含所有子节点）
const originalElement_0 = document.getElementById('myElement');
const deepClone = originalElement.cloneNode(true);

true：克隆该节点及其整个子DOM树（包括所有后代节点）

false（默认值）：只克隆该节点本身，不包含子节点

注意事项

ID重复：克隆的节点会保留原节点的ID属性，这可能导致文档中出现重复ID

通常需要手动修改克隆节点的ID：

deepClone.id = 'newId';
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul id="myList"><li id="item1">Original Item</li><!-- JavaScript代码会克隆这个元素并添加新的列表项 --></ul><script>// 复制一个列表项并添加到列表中const list = document.getElementById('myList');//DOM操作获取返回其第一个子元素节点（忽略文本节点、注释节点等非元素节点）。const firstItem = list.firstElementChild;// 深克隆第一个项目const newItem = firstItem.cloneNode(true);// 修改内容避免重复newItem.textContent = 'New Item';newItem.id = 'item-' + Date.now(); // 设置唯一ID// 添加到列表末尾list.appendChild(newItem);</script></body></html>
效果展示：

三、添加节点

1. 添加到父节点末尾

parentElement.appendChild(newElement);
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>添加父节点</title>
</head><body><div id="parent">我是旧的元素</div><script>// 1. 获取父元素const parent = document.getElementById("parent");// 2. 创建新元素const newDiv = document.createElement("div");newDiv.textContent = "我是新的子元素";// 3. 追加到父元素末尾parent.appendChild(newDiv);</script></body></html>
效果展示：

2. 插入到指定节点前

parentElement.insertBefore(newElement, referenceElement);
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul id="list"><li>Item A</li><li id="item-b">Item B</li><li>Item C</li></ul><script>const list = document.getElementById("list");const itemB = document.getElementById("item-b");// 创建一个新元素const newItem = document.createElement("li");newItem.textContent = "我要插队！你奈我何！";// 在 "Item B" 前插入新元素list.insertBefore(newItem, itemB);</script></body></html>
效果展示：

3. 使用insertAdjacentHTML（高效）

element.insertAdjacentHTML('beforebegin', '<p>Before</p>');
element.insertAdjacentHTML('afterbegin', '<p>After Begin</p>');
element.insertAdjacentHTML('beforeend', '<p>Before End</p>');
element.insertAdjacentHTML('afterend', '<p>After End</p>');
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="target">目标元素</div><script>document.getElementById('target').insertAdjacentHTML('beforebegin', '<p>我插队到前面啦！</p>');</script>
</body></html>
效果展示：

四、删除节点

1. 移除子节点

parentElement.removeChild(childElement);
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="parent"><p>还好我没被移除嘤嘤嘤</p><p id="child">要被移除的元素</p></div><script>const parent = document.getElementById("parent");const child = document.getElementById("child");parent.removeChild(child); // 成功移除</script></body></html>
效果展示：

2. 直接移除节点

element.remove();

代码演示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul id="list"><li>Item 1</li><li id="item2">Item 2</li></ul><script>// 点击任意列表项时移除它document.querySelectorAll('#list li').forEach(item => {item.addEventListener('click', function () {this.remove(); // "this"指向当前被点击的<li>});});</script></body></html>
效果展示：

五、替换节点

替换子节点

parentElement.replaceChild(newChild, oldChild);
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="parent"><div id="old-child">这是要被替换的元素</div></div><button onclick="replaceElement()">点击替换</button><script>function replaceElement() {const parent = document.getElementById('parent');const oldChild = document.getElementById('old-child');const newChild = document.createElement('div');newChild.textContent = '新内容已替换!';newChild.style.color = 'red';parent.replaceChild(newChild, oldChild);}</script></body></html>
效果展示：

六、修改节点内容

1. 文本内容

element.textContent = 'New text content';
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="example"><p> 风华世界第一可爱</p></div><script>const div = document.getElementById('example');// 获取文本（包含子元素的文本）console.log(div.textContent); // "\n Original text\n"// 设置文本（覆盖原有内容）div.textContent = '原来的东西没啦！哈哈哈';// Result: // <div id="example">New &lt;em&gt;safe&lt;/em&gt; content</div></script></body></html>
效果展示：

2. HTML内容

element.innerHTML = '<strong>Bold text</strong>';
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="myDiv">原始文本</div><script>const div = document.getElementById('myDiv');// 设置带有HTML标签的内容div.innerHTML = '<strong>加粗文本</strong>和<i>斜体文本</i>';// 结果：<div id="myDiv"><strong>加粗文本</strong>和<i>斜体文本</i></div></script></body></html>
效果展示：

3. 外部HTML

element.outerHTML = '<div class="new">Replacement</div>';
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 目标元素 --><div id="target">Original Content</div><script>// 获取目标元素const element = document.getElementById('target');// 用新元素替换原元素element.outerHTML = '<div class="new">是一只小风华呀！</div>';</script>
</body></html>
效果展示：

七、操作属性

1. 获取/设置标准属性

// 获取
const id = element.id;// 设置
element.className = 'new-class'; // 整个class字符串
element.classList.add('active'); // 添加单个class
element.classList.remove('inactive'); // 移除class
element.classList.toggle('visible'); // 切换classelement.disabled = true; // 布尔属性
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM 元素操作示例</title><style>.new-class {color: red;}.active {font-weight: bold;}.visible {display: block;}</style>
</head><body><!-- 这些是JavaScript代码中要操作的元素 --><div id="exampleElement" class="initial-class inactive">这是一个示例元素</div><button id="exampleButton">示例按钮</button><script>// 获取DOM元素引用const element = document.getElementById('exampleElement');const button = document.getElementById('exampleButton');// 获取元素IDconst id = element.id;// 设置class相关属性element.className = 'new-class'; // 整个class字符串element.classList.add('active'); // 添加单个classelement.classList.remove('inactive'); // 移除classelement.classList.toggle('visible'); // 切换class// 设置布尔属性button.disabled = true; // 禁用按钮</script>
</body></html>
效果展示：

2. 自定义属性(data-*)

// 设置
element.dataset.userId = '12345';// 获取
const userId = element.dataset.userId;
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 假设element是某个HTML元素，比如一个div --><div id="myElement" ></div><script>// JavaScript部分const element = document.getElementById('myElement');// 设置 (实际上已经在HTML中设置了，这里可以省略)element.dataset.userId = '12345';// 获取const userId = element.dataset.userId;console.log(userId); // 输出: "12345"</script></body></html>
效果展示：

3. 通用属性方法

// 设置属性
element.setAttribute('title', 'Tooltip text');// 获取属性
const value = element.getAttribute('data-value');// 移除属性
element.removeAttribute('disabled');// 检查属性
const hasAttr = element.hasAttribute('required');
代码演示：
<!DOCTYPE html>
<html><head><title>Attribute Example</title>
</head><body><!-- 这是将被JavaScript操作的元素 --><div id="myElement" data-value="42" disabled required>Some content</div><script>const element = document.getElementById('myElement');// 设置属性element.setAttribute('title', 'Tooltip text');// 获取属性const value = element.getAttribute('data-value'); // "42"// 移除属性element.removeAttribute('disabled');// 检查属性const hasAttr = element.hasAttribute('required'); // true (在运行removeAttribute之前)</script>
</body></html>
效果展示：

八、操作样式

1. 内联样式

element.style.backgroundColor = 'blue';
element.style.fontSize = '16px';
代码演示：
<!DOCTYPE html>
<html><head><title>Styled Element Example</title>
</head><body><div id="myElement">一只小风华世界第一可爱呀！</div><script>// 获取元素const element = document.getElementById('myElement');// 应用样式element.style.backgroundColor = 'blue';element.style.fontSize = '16px';</script>
</body></html>
效果展示：

2. 操作类名

element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('expanded');// 检查类
const isActive = element.classList.contains('active');
代码演示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ClassList 操作示例</title><style>.hidden {display: none;}.active {color: red;font-weight: bold;}.expanded {padding: 20px;background-color: #f0f0f0;}</style>
</head><body><!-- 假设操作的element是这个div --><div id="myElement" class="hidden">这是一个可以被操作的元素</div><script>// 获取要操作的元素const element = document.getElementById('myElement');// 原始提供的代码element.classList.add('active');element.classList.remove('hidden');element.classList.toggle('expanded');// 检查类const isActive = element.classList.contains('active');// 可以在控制台查看结果console.log('元素是否包含active类:', isActive);console.log('当前元素的class列表:', element.className);</script>
</body></html>
效果展示：

3. 获取计算样式

const computedStyle = getComputedStyle(element);
const fontSize = computedStyle.fontSize;
代码演示：
<!DOCTYPE html>
<html lang="en"><style>#sample-element {font-size: 16px;padding: 20px;background-color: #f0f0f0;}
</style>
</head><body><!-- 这里是我们需要获取样式的元素 --><div id="sample-element">我是一段文字~</div><script>// 获取DOM元素const element = document.getElementById('sample-element');// 获取计算样式const computedStyle = getComputedStyle(element);const fontSize = computedStyle.fontSize;// 输出结果到控制台console.log('Font size:', fontSize);// 也可以显示在页面上element.insertAdjacentHTML('afterend', `<p>Computed font size: ${fontSize}</p>`);</script>
</body></html>
效果展示：

DOM操作方法总结表

类别方法/属性说明返回值/特性
获取元素document.getElementById()通过ID获取元素单个元素
document.getElementsByClassName()通过类名获取元素HTMLCollection（动态集合）
document.getElementsByTagName()通过标签名获取元素HTMLCollection（动态集合）
document.querySelector()通过CSS选择器获取第一个匹配元素单个元素
document.querySelectorAll()通过CSS选择器获取所有匹配元素NodeList（静态集合）
document.getElementsByName()通过name属性获取元素NodeList
创建节点document.createElement()创建元素节点新元素节点
document.createTextNode()创建文本节点文本节点
document.createComment()创建注释节点注释节点
element.cloneNode()克隆节点（参数true为深克隆）克隆节点（需注意ID重复问题）
添加节点parentElement.appendChild()添加到父节点末尾-
parentElement.insertBefore()插入到指定节点前-
element.insertAdjacentHTML()高效插入HTML（beforebegin/afterbegin/beforeend/afterend）-
删除节点parentElement.removeChild()移除子节点-
element.remove()直接移除当前节点-
替换节点parentElement.replaceChild()用新节点替换子节点-
修改内容element.textContent设置/获取文本内容（不解析HTML）安全，防XSS攻击
element.innerHTML设置/获取HTML内容（解析标签）可能引发XSS风险
element.outerHTML设置/获取包含自身标签的HTML替换整个元素
操作属性element.属性名获取/设置标准属性（id/className/disabled等）直接访问
element.dataset操作自定义data-*属性驼峰式访问（如dataset.userId）
element.setAttribute()设置任意属性-
element.getAttribute()获取属性值-
element.removeAttribute()移除属性-
element.hasAttribute()检查属性是否存在返回布尔值
操作样式element.style.属性设置内联样式（backgroundColor/fontSize等）需使用驼峰命名
element.classList操作类名（add/remove/toggle/contains）推荐使用
getComputedStyle(element)获取最终计算样式只读，包含所有样式

关键特性对比

集合类型特性示例方法
HTMLCollection动态集合，随DOM变化自动更新getElementsByClassName()
NodeList默认静态集合（除getElementsByName）querySelectorAll()

使用建议：

  1. ID获取：优先使用getElementById获取单个元素

  2. 现代选择：多用querySelector和querySelectorAll

  3. 文本安全：防XSS攻击时用textContent代替innerHTML

  4. 类名操作：推荐classList方法而非直接修改className

  5. 样式获取：计算样式用getComputedStyle()而非style

http://www.dtcms.com/a/317677.html

相关文章：

  • 前端UI组件库
  • 15.Linux systemd和守护进程
  • AVDTP Media Packet 传输全流程解析：从 SDP 到连接终止
  • Zustand
  • 从代码学习深度强化学习 - 模仿学习 PyTorch版
  • 【数据库】MySQL详解：关系型数据库的王者
  • MySQL和Navicat Premium的安装
  • stm32项目（22）——基于stm32的智能病房监护系统
  • Python面试题及详细答案150道（01-15） -- 基础语法篇
  • 代数——第6章——对称性(Michael Artin)
  • vue3 find 数组查找方法
  • CPP网络编程-异步sever
  • FPGA学习笔记——VGA彩条显示
  • python:非常流行和重要的Python机器学习库scikit-learn 介绍
  • STM32学习笔记3-GPIO输入部分
  • WMS及UI渲染底层原理学习
  • 【STM32 LWIP配置】STM32H723ZG + Ethernet +LWIP 配置 cubemx
  • 无人机图传的得力助手：5G 便携式多卡高清视频融合终端的协同应用
  • 中宇联5G云宽带+4G路由器：解锁企业办公高效协同与门店体验升级
  • 图解 Claude Code 子智能体 Sub-agent
  • [ java GUI ] 图形用户界面
  • 【软考系统架构设计师备考笔记4】 - 英语语法一篇通
  • ctfshow_vip题目限免-----SVN漏洞，git泄露
  • Git Cherry-Pick 指南
  • Leetcode——菜鸟笔记1
  • Git 分支管理：从新开发分支迁移为主分支的完整指南
  • 鸿蒙app 开发中 全局弹窗类的封装 基于PromptAction
  • C#之基础语法
  • 机器学习之朴素贝叶斯
  • Suno API V5模型 php源码 —— 使用灵感模式进行出创作