一文读懂JavaScript DOM节点操作（JavaScript DOM节点操作详解）

news2024/10/7 8:25:28

一、什么是节点

DOM模型是树状结构模型，二组成这棵树的就是一个个点，在网络术语中称之为节点。
节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的，DOM节点也有其不同的类型。

二、节点类型

DOM节点分为5种类型：

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

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

DOM中element对象的三个属性：

  • nodeType属性可以显示节点的类型 1表示元素节点 2表示属性节点 3表示文本节点
  • nodeName属性可以显示节点的名字，显示的名字是大写形式
  • nodevalue属性可以显示节点的值，元素节点没有值，显示null
2、属性节点
// 每个标签元素都有自己的一些属性，这些属性就是属性节点。
<!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、文本节点
// 我们写在标签中的文本内容就是文本节点，在浏览器中呈现给用户的内容就是一个文本节点。
<!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属性获取

节点类型节点说明
元素节点每个HTML标签就是元素
属性节点元素节点的属性，如id class name src等
文本节点元素节点或属性节点的文本内容，如<p>标签内容是文本节点</p>
注释节点文档的注释
文档节点整个html文档，DOM树中的根<html>标签
4.2、节点名字

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

节点类型节点名字
元素节点HTML标签的名称，大写如<p>元素节点是P
属性节点属性的名称
文本节点永远是text
注释节点永远是#comment
文档节点永远是#document
4.3、节点值

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

节点类型节点的值
元素节点没有值
属性节点属性的值就是属性节点的值
文本节点文本内容就是文本节点的值
注释节点注释内容就是注释节点的值
文档节点没有值

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

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

1、通过id属性获取节点

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

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

*getElementsByTagName()*方法

<!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()*方法

<!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值等于我们传到函数中的那个值

<!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
// 一个节点可以有一个或多个子节点，通过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
<!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、兄弟节点
// 所谓的兄弟节点就是同级节点 
// 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、添加节点
<!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、删除节点
// 删除节点和替换节点有些相似，必须先找到父节点，才能删除这个父节点下的某个子节点
<!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、修改节点
// 我们可以使用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>

六、自封装函数库

原始的DOM操作需要很多代码才能得到我们想要的效果，还有就是浏览器的兼容问题。所以我们要写很多代码来解决这些问题，如果每次操作DOM都要写很多重复的代码，就不符合开发的思想（不要重复造轮子）。

<script>
// 自定义DOM函数库
function MyDom(obj){
	this.obj = obj; // 设置对象为传递过来的节点对象
	this.getChildList = function(){};  // 获取所有子元素节点的方法
	this.getFirstChild = function(){};  // 获取第一个子元素节点的方法
	this.getLastChild = function(){};  // 获取最后一个子元素节点的方法
	this.getNextNode = function(){};  // 获取下一个元素节点的方法
	this.getPreNode = function(){};  // 获取上一个元素节点的方法
	this.appendChild = function(){}; // 添加子节点的方法
	this.removeChild = function(){};  // 删除元素节点的方法
	this.bind = function(){};  // 绑定事件的方法
	this.html = function(){};  // 获取或者设置元素节点内容的方法
}
</script>

// 也可以先创建一个空对象，然后通过修改她的prototype属性来设置对象的属性和方法
<script>
// 自定义DOM函数库
function MyDom(obj){
	this.obj = obj;
};

MyDom.prototype = {
	this.obj = obj; // 设置对象为传递过来的节点对象
	this.getChildList = function(){};  // 获取所有子元素节点的方法
	this.getFirstChild = function(){};  // 获取第一个子元素节点的方法
	this.getLastChild = function(){};  // 获取最后一个子元素节点的方法
	this.getNextNode = function(){};  // 获取下一个元素节点的方法
	this.getPreNode = function(){};  // 获取上一个元素节点的方法
	this.appendChild = function(){}; // 添加子节点的方法
	this.removeChild = function(){};  // 删除元素节点的方法
	this.bind = function(){};  // 绑定事件的方法
	this.html = function(){};  // 获取或者设置元素节点内容的方法
}
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1405605.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

eclipse基础操作+基础知识（一）

eclipse基础操作+基础知识（一）

&#x1f58a;作者 : D. Star. &#x1f4d8;专栏 :JAVA &#x1f606;今日分享 : 电影版–花千骨 背景&#xff1a;eclipse已经安装完成。 eclipse版本&#xff1a;2020.06 tomcat版本&#xff1a;8.5 文章目录 一、进入eclipse二、创建JAVA项目三、创建Web项目1. 打开eclipse…
阅读更多...
YTM32的HSM模块在信息安全场景中的应用

YTM32的HSM模块在信息安全场景中的应用

YTM32的HSM模块在信息安全场景中的应用 文章目录 YTM32的HSM模块在信息安全场景中的应用引言应用场景&#xff1a;一点点密码学基础硬件&#xff1a;YTM32的信息安全子系统HCU外设模块硬件特性基本的应用操作流程&#xff0c;以计算AES-ECB为例硬件上对处理多块数据上的一些设计…
阅读更多...
S7-200 SMART 编程连接故障常见诊断方法

S7-200 SMART 编程连接故障常见诊断方法

使用 S7-200 SMART PLC 时&#xff0c;您是否遇到过无法下载、上传或监控程序状态的情况&#xff1f;或者通信接口一片空白、编程电缆的驱动不存在、搜索不到 CPU 的 IP 地址、编程软件提示端口被占用等情况…… 本文将针对 S7-200 SMART 无法建立编程连接的情形&#xff0c;从…
阅读更多...
架构的演进

架构的演进

1.1单体架构 单体架构也称之为单体系统或者是单体应用。就是一种把系统中所有的功能、模块耦合在一个应用中的架构方式。 存在的问题&#xff1a; 代码耦合&#xff1a;模块的边界模糊、依赖关系不清晰&#xff0c;整个项目非常复杂&#xff0c;每次修改代码都心惊胆战迭代困…
阅读更多...
黑马——Java学生管理系统

黑马——Java学生管理系统

一、学生管理系统 学生管理系统 需求&#xff1a; 采取控制台的方式去书写学生管理系统。 loop:while(true){ for(){ break loop;//给while循环取名loop&#xff0c;break loop;可以跳出while循环 } } 或者使用System.exit(0);停止虚拟机运行&#xff0c;相当于让所有代码停…
阅读更多...
代码随想录算法训练营29期|day28 任务以及具体安排

代码随想录算法训练营29期|day28 任务以及具体安排

93.复原IP地址 class Solution {List<String> result new ArrayList<>();public List<String> restoreIpAddresses(String s) {StringBuilder sb new StringBuilder(s);backTracking(sb, 0, 0);return result;}private void backTracking(StringBuilder s,…
阅读更多...
Element中的el-input-number+SpringBoot+mysql

Element中的el-input-number+SpringBoot+mysql

1、编写模板 <el-form ref"form" label-width"100px"><el-form-item label"商品id&#xff1a;"><el-input v-model"id" disabled></el-input></el-form-item><el-form-item label"商品名称&a…
阅读更多...
excel 设置密码保户

excel 设置密码保户

目录 前言设置打开密码设置编辑密码 前言 保户自己的数据不被泄漏是时常有必要的&#xff0c;例如财务数据中最典型员工工资表&#xff0c;如果不设置密码后果可想而知&#xff0c;下面我们一起来设置excel查看密码和编辑密码。我用的是wps,其它版本类似&#xff0c;可自行查资…
阅读更多...
教育大模型浪潮中，松鼠Ai的“智适应”故事好讲吗？

教育大模型浪潮中，松鼠Ai的“智适应”故事好讲吗？

“计算机对于学校和教育产生的影响&#xff0c;远低于预期&#xff0c;要改变这一点&#xff0c;计算机和移动设备必须致力于提供更多个性化的课程&#xff0c;并提供有启发性的反馈。” 这是2011年5月份乔布斯与比尔盖茨最后一次会面时的记录&#xff0c;当时的电脑还十分落后…
阅读更多...
webrtc线程代码研究

webrtc线程代码研究

webrtc线程类的实现集成了socket的收发&#xff0c;消息队列&#xff0c;值得研究&#xff0c;基于webrtc75版本。 主要类介绍 Thread类 虚线&#xff1a;继承 实线&#xff1a;调用 橙色&#xff1a;接口 Thread继承MessageQueueThread提供两个静态方法,分别用来创建带socke…
阅读更多...
如何正确使用RC滤波网络

如何正确使用RC滤波网络

众所周知&#xff0c;最有效的滤波电路应靠近噪声源放置&#xff0c;滤波的作用是对噪声电流进行及时有效地阻止和转移&#xff0c;实际设计中&#xff0c;工程师经常使用高的串联阻抗&#xff08;电阻、电感和铁氧体&#xff09;阻止电流&#xff0c;并使用低的并联阻抗&#…
阅读更多...
蓝桥杯真题（Python）每日练Day4

蓝桥杯真题（Python）每日练Day4

题目 OJ编号2117 题目分析 第一种先采用暴力的思想&#xff0c;从第一根竹子开始&#xff0c;找到连续的高度相同的竹子&#xff0c;砍掉这些竹子&#xff0c;一直循环这个方法&#xff0c;直到所有的竹子高度都为1。很明显&#xff0c;依次遍历竹子的高度复杂度为O&#x…
阅读更多...
RabbitMQ消息应答与发布

RabbitMQ消息应答与发布

消息应答 RabbitMQ一旦向消费者发送了一个消息,便立即将该消息,标记为删除. 消费者完成一个任务可能需要一段时间,如果其中一个消费者处理一个很长的任务并仅仅执行了一半就突然挂掉了,在这种情况下,我们将丢失正在处理的消息,后续给消费者发送的消息也就无法接收到了. 为了…
阅读更多...
C语言之反汇编查看函数栈帧的创建与销毁

C语言之反汇编查看函数栈帧的创建与销毁

文章目录 一、 什么是函数栈帧&#xff1f;二、 理解函数栈帧能解决什么问题呢&#xff1f;三、 函数栈帧的创建和销毁解析3.1、什么是栈&#xff1f;3.2、认识相关寄存器和汇编指令3.2.1 相关寄存器3.2.2 相关汇编命令 3.3、 解析函数栈帧的创建和销毁3.3.1 预备知识3.3.2 代码…
阅读更多...
Ansible详解（架构，模块）及部署示例

Ansible详解（架构，模块）及部署示例

目录 Ansible概述 Ansible作用 Ansible特点 Ansible架构 工作流程 ansible 环境安装部署 环境准备 安装Ansible服务 Ansible 命令行模块 模块详解 ansible-doc command模块 shell模块 cron 模块 user模块 group模块 copy 模块 file 模块 hostname 模块 pin…
阅读更多...
【论文+视频控制】23.08DragNUWA1.5：通过集成文本、图像和轨迹来进行视频生成中的细粒度控制 （24.01.08开源最新模型）

【论文+视频控制】23.08DragNUWA1.5：通过集成文本、图像和轨迹来进行视频生成中的细粒度控制 （24.01.08开源最新模型）

论文链接&#xff1a;DragNUWA: Fine-grained Control in Video Generation by Integrating Text, Image, and Trajectory 代码&#xff1a;https://github.com/ProjectNUWA/DragNUWA 一、简介 中国科学技术大学微软亚洲研究院 在 NUWA多模态模型、 Stable Video Diffusion …
阅读更多...
mockjs(3)

mockjs(3)

mockjs&#xff08;1&#xff09; mockjs&#xff08;2&#xff09; 这篇主要是Mock.random工具类&#xff0c;前段要用的话主要是在模版中的占位符。mockjs&#xff08;1&#xff09;里面的3.2 6 Mock.random Mock.Random 是一个工具类&#xff0c;用于生成各种随机数据。 …
阅读更多...
即插即用篇 | YOLOv8 引入 SENetv2 | 多套版本配合使用

即插即用篇 | YOLOv8 引入 SENetv2 | 多套版本配合使用

卷积神经网络（CNNs）通过提取空间特征并在基于视觉的任务中实现了最先进的准确性，彻底改变了图像分类。所提出的压缩激励网络模块收集输入的通道表示。多层感知机（MLP）从数据中学习全局表示，在大多数用于学习图像提取特征的图像分类模型中起到关键作用。在本文中，我们引入…
阅读更多...
论文阅读2---多线激光lidar内参标定原理

论文阅读2---多线激光lidar内参标定原理

前言&#xff1a;该论文介绍多线激光lidar的标定内参的原理&#xff0c;有兴趣的&#xff0c;可研读原论文。 1、标定参数 rotCorrection&#xff1a;旋转修正角&#xff0c;每束激光的方位角偏移&#xff08;与当前旋转角度的偏移&#xff0c;正值表示激光束逆时针旋转&…
阅读更多...
实用的SQLite数据库可视化管理工具推荐

实用的SQLite数据库可视化管理工具推荐

前言 俗话说得好“工欲善其事&#xff0c;必先利其器”&#xff0c;合理的选择和使用可视化的管理工具可以降低技术入门和使用门槛。今天推荐7款实用的SQLite数据库可视化管理工具(GUI)&#xff0c;帮助大家更好的管理SQLite数据库。 什么是SQLite&#xff1f; SQLite是一个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023