JavaScript DOM节点操作详解

贝西奇谈2025-10-30 12:40

一、什么是节点

DOM模型是树状结构模型，二组成这棵树的就是一个个点，在网络术语中称之为节点。

节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的，DOM节点也有其不同的类型。

二、节点类型

DOM节点分为5种类型：

  • 文档节点（就是整个HTML文档，也就是document对象）
  • 元素节点 注释节点（在HTML文档中写的注释）
  • 属性节点
  • 文本节点

1、元素节点

我们看到的一个个标签元素在DOM节点树中就是元素节点，它是我们操作节点的核心，即使我们要操作属性节点和文本节点，也要先找到它们的元素节点

DOM中element对象的三个属性：

  • nodeType属性可以显示节点的类型 1表示元素节点 2表示属性节点 3表示文本节点
  • nodeName属性可以显示节点的名字，显示的名字是大写形式
  • nodevalue属性可以显示节点的值，元素节点没有值，显示null

2、属性节点

html 复制代码 
// 每个标签元素都有自己的一些属性，这些属性就是属性节点。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<h2>让推广显而易见</h2>
<p id="node">没有推广不了的产品</p>
<ul>
    <li>知数网络</li>
    <li>知数SEO</li>
</ul>
</body>
<script>
    var pObj = document.getElementById('node');  // 获取p元素节点
    var p_id = pObj.getAttributeNode('id'); // 获取id属性节点
    console.log(p_id); // 打印p的id属性  node
    var p_id_type = p_id.nodeType; // p元素的节点类型
    console.log(p_id_type); // 打印节点类型 2
    var p_id_name = p_id.name; // p元素节点的名字
    console.log(p_id_name); // id
    var p_id_value = p_id.value; // p元素节点的值
    console.log(p_id_value); // node

</script>
</html>
// 代码中我们使用getAttributeNode()方法获取属性节点，它和getAttribute()方法的区别在于后者得到的属性值而不是对象

3、文本节点

html 复制代码 
// 我们写在标签中的文本内容就是文本节点，在浏览器中呈现给用户的内容就是一个文本节点。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<h2>让推广显而易见</h2>
<p id="node">没有推广不了的产品</p>
<ul>
    <li>知数网络</li>
    <li>知数SEO</li>
</ul>
</body>
<script>
    var pObj = document.getElementById('node'); // 获取p元素节点
    var p_text = pObj.firstChild;
    console.log(p_text);
    var p_text_type = p_text.nodeType;
    console.log(p_text_type); // 3
    var p_text_name = p_text.nodeName;
    console.log(p_text_name); // #text
    var p_text_value = p_text.nodeValue;
    console.log(p_text_value);  // 没有推广不了的产品

</script>
</html>

4、节点类型、节点名字、节点值

4.1、节点类型

可以通过nodeObject.nodeType属性获取

4.2、节点名字

不同DOM节点有不同的名称， 可以通过nodeObject.nodeName 属性得到节点的名称

4.3、节点值

节点的值可以通过nodeObject.nodeValue属性获取

三、通过文档对象方法获取节点

我们相操作某个节点，第一步就是获得这个节点。

1、通过id属性获取节点

通过document读喜庆提供的 getElementById() 方法，接收一个标签元素的id属性值，就可以获取到对应id的标签元素

2、通过标签名字获取节点

getElementsByTagName()方法

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<h2>让推广显而易见</h2>
<p id="node">没有推广不了的产品</p>
<ul>
    <li>知数网络</li>
    <li>知数SEO</li>
</ul>
</body>
<script>
    var lis = document.getElementsByTagName('li'); // 获取所有li标签元素
    console.log(lis); // 打印li元素集合
    console.log(lis[0]); // 打印第一个li元素

</script>
</html>
// getElementsBytagName()不仅是document对象的方法，也是element对象的方法

3、通过类名获取节点

getElementsByClassName()方法

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div>春雨惊春清谷天，</div>
<div class="bgcolor">夏满芒夏暑相连。</div>
<div>秋处露秋寒霜降，</div>
<div class="bgcolor">冬雪雪冬小大寒。</div>
</body>
<script>
    var bgcolors = document.getElementsByClassName('bgcolor');
    console.log(bgcolors);
    console.log(bgcolors[0]);
</script>
</html>

4、通过name属性获取节点

还可以通过表单中的name属性值来获取到指定的input标签元素

getElementsByName()方法接受一个name值就可以获取到对应的input标签元素,它返回一个数组，这个数组存放着所有name值等于我们传到函数中的那个值

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form id="myForm" action="">
    <input type="text" name="username"><br>
    <input type="radio" name="sex" value="男">男<br>
    <input type="radio" name="sex" value="女">女<br>

</form>
</body>
<script>
    var sex = document.getElementsByName('sex');
    console.log(sex);
    console.log(sex[0]);
</script>
</html>

四、通过层级关系获取节点

HTML文档在浏览器中被解析成DOM树状结构模型，而且这种树状结构模型非常方便我们寻找该节点相关的一些关系，我们可以通过层级关系来找到对应的节点。

1、子节点childNodes

html 复制代码 
// 一个节点可以有一个或多个子节点，通过DOM提供的方法，我们可以操作这个节点的所有子节点
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content">
    <p>知数</p>
    <span>专注搜索引擎优化和品牌推广</span>
    <p>一个懂技术的seoer</p>
    <a href="https://www.zhishunet.com">知数SEO</a>
</div>
</body>
<script>
    // 获取div标签元素节点对象
    var divobj = document.getElementById('content');
    // 获取该div下的所有子节点
    var childs = divobj.childNodes;
    // 打印获得的所有子节点
    console.log(childs);
    // 打印获得的所有子节点的个数
    console.log(childs.length);
</script>
</html>

// firstChild属性可以获得第一个子节点
// lastChild属性可以获得最后一个子节点

2、父节点parentNode

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content">
    <p>知数</p>
    <span>专注搜索引擎优化和品牌推广</span>
    <p id="p_node">一个懂技术的seoer</p>
    <a href="https://www.zhishunet.com">知数SEO</a>
</div>
</body>
<script>
    // 获取标签元素节点对象
    var p_obj = document.getElementById('p_node');
    // 获取p元素的父节点
    var parent = p_obj.parentNode;
    console.log(parent);
</script>
</html>

3、兄弟节点

html 复制代码 
// 所谓的兄弟节点就是同级节点 
// nextSibling属性可以获取某个节点的下一个节点
// previousSibling属性可以获取某个节点的上一个节点
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content">
    <p>知数</p>
    <span>专注搜索引擎优化和品牌推广</span>
    <p id="p_node">一个懂技术的seoer</p>
    <a href="https://www.zhishunet.com">知数SEO</a>
</div>
</body>
<script>
    // 获取标签元素节点对象
    var p_obj = document.getElementById('p_node');
    // 获取p元素的下一个节点
    var nextNode = p_obj.nextSibling;
    console.log(nextNode);
</script>
</html>

五、节点的其他操作

1、添加节点

html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
    // 创建一个a元素节点
    var a = document.createElement('a');
    // 设置a元素节点的属性节点
    a.setAttribute('href','https://www.zhishunet.com');
    // 创建新的文本节点
    var text = document.createTextNode('知数SEO');
    // 将文本节点插入到新创建的a元素节点中
    a.appendChild(text);
    // 找到要插入新节点到某个父节点下
    var parent = document.getElementById('content');
    // 向这个父节点尾部插入新创建的节点
    parent.appendChild(a);
</script>
</html>

// 还可以使用createTextNode()方法来创建文本节点 还可以使用textContent属性来设置元素节点的文本内容
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
    // 创建一个a元素节点
    var a = document.createElement('a');
    // 设置a元素节点的属性节点
    a.setAttribute('href','https://www.zhishunet.com');
    // 设置或修改a元素节点的文本内容
    a.textContent = '知数';
    // 找到要插入新节点到某个父节点下
    var parent = document.getElementById('content');
    // 向这个父节点尾部插入新创建的节点
    parent.appendChild(a);
</script>
</html>

// 还可以使用innerHTML属性来设置或获取元素节点的所有内容
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
    // 找到要插入的父节点
    var parent = document.getElementById('content');
    // 向这个目标节点插入需要的内容
    parent.innerHTML = '<a href="https://www.zhishunet.com">知数SEO</a>';
</script>
</html>

2、删除节点

html 复制代码 
// 删除节点和替换节点有些相似，必须先找到父节点，才能删除这个父节点下的某个子节点
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div>
    <p id="p_node">这个需要删除</p>
    <p>宝剑锋从磨砺出</p>
    <p>梅花香自苦寒来</p>
</div>
</body>
<script>
    // 找到要删除的节点
    var delNode = document.getElementById('p_node');
    // 得到要删除的节点的父节点
    var parent = delNode.parentNode;
    // 通过父节点的removeChiled()方法删除目标节点
    parent.removeChild(delNode);
</script>
</html>

3、修改节点

html 复制代码 
// 我们可以使用elment对象的replaceChild()方法来替换子节点
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<div id="div_node">
    <p>这个需要替换的</p>
    <p>宝剑锋从磨砺出</p>
    <p>梅花香自苦寒来</p>
</div>
</body>
<script>
    // 创建一个a元素
    var a = document.createElement('a');
    // 设置a元素的属性节点
    a.setAttribute('href','https://www.zhishunet.com')
    // 创建新的文本节点
    var text = document.createTextNode('知数SEO')
    // 将文本节点插入到新创建的a元素节点中
    a.appendChild(text);
    // 找到目标父节点div元素节点
    var parent = document.getElementById('div_node');
    // 找到第一个p元素节点
    var oldNode = parent.childNodes[1];
    // 替换内容
    parent.replaceChild(a,oldNode);
</script>
</html>

六、JS操作CSS样式

1. 直接使用 style 属性设置样式

style 属性是 DOM 中最简单直接的方式，用于动态修改元素的内联样式。内联样式的优点是它能在不影响其他样式的情况下，直接应用于指定的元素。通过 JavaScript 可以轻松访问并修改元素的 style 属性。

例如，假设我们有如下的 HTML 元素：

html 复制代码 
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

通过 JavaScript 修改该元素的样式，可以这样实现：

html 复制代码 
const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.width = '200px';

执行这段代码后，div 的背景颜色会从红色变成蓝色，宽度从 100px 增加到 200px。

2. 常见问题：使用驼峰命名

在 JavaScript 中，CSS 属性名通常需要使用驼峰式命名。比如，background-color 在 JavaScript 中需要写成 backgroundColor，而 font-size 则要写成 fontSize。这是因为 style 属性遵循 JavaScript 的命名规则。

3. 操作多个样式

通过 style 属性，我们可以对单个样式进行操作，但如果需要批量修改多个样式，直接使用 style 进行设置可能会显得冗余。对于这种情况，使用 className 或 classList 来批量管理样式会更加高效。

html 复制代码 
box.style.cssText = 'width: 300px; height: 300px; background-color: green;';

在上面的代码中，通过 cssText 可以一次性设置多个 CSS 样式。

相关推荐
学习编程的Kitty3 小时前
JavaEE初阶——多线程（4）线程安全
java·开发语言·jvm
报错小能手3 小时前
计算机网络自顶向下方法4——详解协议层次及其服务模型
服务器·计算机网络·php
刚子编程3 小时前
ASP.NET Core Blazor 核心功能一：Blazor依赖注入与状态管理指南
开发语言·.netcore·blazor
海木漄3 小时前
C# 内存是绝对自动清理吗？
开发语言·c#
野老杂谈3 小时前
如何快速学习智能合约开发语言 Solidity
开发语言·学习·智能合约·solidity·以太坊·区块链开发
Han.miracle3 小时前
Java线程的学习—多线程(一)
java·开发语言·学习
光影34154 小时前
专利撰写与申请核心要点简报
前端·数据库·php
应用市场4 小时前
PHP microtime()函数精度问题深度解析与解决方案
android·开发语言·php
长存祈月心4 小时前
Rust HashSet 与 BTreeSet深度剖析
开发语言·后端·rust
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07Labelme从安装到标注：零基础完整指南08在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10jdk21下载、安装（Windows、Linux、macOS）