dom获取节点(子节点、兄弟节点、父节点)

article/2025/10/26 21:01:13

今天在做一个项目拿兄弟节点的事,刚开始拿不到,后来网上查了一下,于是 便找到方法了,下面把我的问题写出来,话不多说直接上问题,

在这里插入图片描述
遇到的问题是我要通过点击删除按钮删除这一行数据,后端给的接口要传的参数就是设备编号(imei),重点是这个列表本身也是动态的数据,用框架渲染出来的,然后就想到了用dom节点来删除,还算比较简单, 我要获取的就是imei,然后通过ajxa调用接口删除,完美实现,下面是源码:

<script type="text/javascript">$(function(){function deleteUL(obj){// obj.parentNode.parentNode.remove();
var $imei= $(obj.parentNode.parentNode.children[1]).text() 
//console.log( $(obj.parentNode.parentNode.children[1]).text() )//这里获取到的就是该行的imei了$.ajax({url:"**********",type:"post",async:true,//cache:true,data:{//id:menuId"DeviceIMEI" : $imei},success:function(data){//console.log(data)//console.log($imei)window.location.reload(true);      重新加载}
}var deleteBtns = document.getElementsByClassName('deleteBtn');
for(var i=0; i<deleteBtns.length; i++){//console.log(22);deleteBtns[i].onclick = function(){// console.log(this);deleteUL(this);};}
})</script>

下面就来总结一下关于获取节点的详情:
一、js获取子节点的方式
1.通过获取dom方式直接获取子节点
其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。

var a = document.getElementById("test").getElementsByTagName("div");

2.通过childNodes获取子节点
使用childNodes获取子节点的时候,childNodes返回的是子节点的集合,是一个数组的格式。他会把换行和空格也当成是节点信息。

var b =document.getElementById("test").childNodes;

为了不显示不必须的换行的空格,我们如果要使用childNodes就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。下面是过滤掉

//去掉换行的空格
for(var i=0; i<b.length;i++){if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){document.getElementById("test").removeChild(b[i]);}
}
//打印测试
for(var i=0;i<b.length;i++){console.log(i+"---------")console.log(b[i]);
}
//补充 document.getElementById("test").childElementCount;  可以直接获取长度 同length

4.通过children来获取子节点
利用children来获取子元素是最方便的,他也会返回出一个数组。对其获取子元素的访问只需按数组的访问形式即可。

var getFirstChild = document.getElementById("test").children[0];

5.获取第一个子节点
firstChild来获取第一个子元素,但是在有些情况下我们打印的时候会显示undefined,这是什么情况呢??其实firstChild和childNodes是一样的,在浏览器解析的时候会把他当换行和空格一起解析,其实你获取的是第一个子节点,只是这个子节点是一个换行或者是一个空格而已。那么不要忘记和childNodes一样处理呀。

var getFirstChild = document.getElementById("test").firstChild;

6.firstElementChild获取第一个子节点
使用firstElementChild来获取第一个子元素的时候,这就没有firstChild的那种情况了。会获取到父元素第一个子元素的节点 这样就能直接显示出来文本信息了。他并不会匹配换行和空格信息。

var getFirstChild = document.getElementById("test").firstElementChild;

7.获取最后一个子节点
lastChild获取最后一个子节点的方式其实和firstChild是类似的。同样的lastElementChild和firstElementChild也是一样的。不再赘余。

 var getLastChildA = document.getElementById("test").lastChild;var getLastChildB = document.getElementById("test").lastElementChild;

二、js获取父节点的方式
1.parentNode获取父节点
获取的是当前元素的直接父元素。parentNode是w3c的标准。

var p  = document.getElementById("test").parentNode;

2.parentElement获取父节点
parentElement和parentNode一样,只是parentElement是ie的标准。

var p1 = document.getElementById("test").parentElement;

3.offsetParent获取所有父节点
一看offset我们就知道是偏移量 其实这个是于位置有关的上下级 ,直接能够获取到所有父亲节点, 这个对应的值是body下的所有节点信息。

var p2 = document.getElementById("test").offsetParent;

三、js获取兄弟节点的方式
1.通过获取父亲节点再获取子节点来获取兄弟节点

var brother1 = document.getElementById("test").parentNode.children[1];

2.获取上一个兄弟节点
在获取前一个兄弟节点的时候可以使用previousSibling和previousElementSibling。他们的区别是previousSibling会匹配字符,包括换行和空格,而不是节点。previousElementSibling则直接匹配节点。

var brother2 = document.getElementById("test").previousElementSibling;
var brother3 = document.getElementById("test").previousSibling;

3.获取下一个兄弟节点
同previousSibling和previousElementSibling,nextSibling和nextElementSibling也是类似的。

var brother4 = document.getElementById("test").nextElementSibling;
var brother5 = document.getElementById("test").nextSibling;

http://chatgpt.dhexx.cn/article/bpim99sj.shtml

相关文章

# 如何获取父节点和子节点

文章目录 一、获取父级节点二、获取子节点1、获取子节点2、获取指定子节点 三、总结 一、获取父级节点 node.parentNode 代码如下&#xff08;示例&#xff09;&#xff1a; <!DOCTYPE html> <head>父节点操作</head> <body><div class"box&q…

JS节点操作(1) - 父节点,子节点,兄弟节点

节点操作的作用 获取元素通常使用的两种方式&#xff1a; 1. 利用DOM提供的方法获取元素 document.getElementById()document.getElementsByTagName()document.querySelector() 等等逻辑性不强&#xff0c;繁琐 2. 利用节点层级关系获取元素 利用父子兄弟节点关系获取元素…

树中的重要概念

1 基本术语及定义 1.1 根节点 根节点&#xff1a;是树中唯一没有入边的节点。 1.2 父节点 父节点&#xff1a;一个节点是其所有子节点的父节点 1.3 子节点 子节点&#xff1a;一个节点通过出边与子节点相连 1.4 兄弟节点 兄弟节点&#xff1a;具有同一个父节点的节点称…

VScode 代码注释

MAC&#xff1a; 单行注释/取消注释&#xff1a; command/ 多行注释/取消注释&#xff1a; 1.选中要注释代码块command/ 2.optionshifta 3.JsDOc注释&#xff1a;/tab** 如下图所示 常用于给方法写注释&#xff0c;写在方法上时会自动带上此方法的参数&#xff0c;而且会车自…

说说代码中的注释

*what&#xff1a; 注释&#xff0c;也是解释&#xff0c;标记。代码中的注释不会被执行&#xff01; *why&#xff1a; 方便提醒自己&#xff0c;这代码代表的是什么功能&#xff1f;当代码量很大的时候&#xff0c;非常有用。 当然&#xff0c;平时写代码就得规范&#x…

3、代码注释与编码规范

目录 一、代码注释 &#xff08;1&#xff09;单行注释 &#xff08;2&#xff09;多行注释 &#xff08;3&#xff09;文档注释 2. 编码规范 一、代码注释 &#xff08;1&#xff09;单行注释 “//”为单行注释标记&#xff0c;从符号“//”开始直到换行为止的所有内容…

关于如何优雅的做好代码注释

问题思考 作为研发同学&#xff0c;对于代码“注释”其实并不陌生。它往往作为我们代码文档的特殊补充而存在。 其实在代码文档中&#xff0c;起主要作用的因素并非注释&#xff0c;而是好的编程风格。 编程风格包括&#xff1a;良好的程序结构、易于理解的方法、有意义的变量…

VS Code - 自动生成代码注释

目录 1. 代码注释 2. 插件安装 3. 使用示例 1. 代码注释 代码注释在软件的迭代过程中举足轻重&#xff0c;所以一个规范化的代码注释也非常重要&#xff0c;在用 VS Code 中则可以使用插件来规范化代码注释。 autoDocstring: VSCode Python Docstring Generator GitHub - N…

python中如何注释代码

1、python中通过#来注释单行不需要运行的代码&#xff0c;如&#xff1a; 此时&#xff0c;被注释代码变灰色了&#xff0c;那么在执行程序时&#xff0c;该行代码就不会被运行了 2、注释多行代码用xxxxx或者"""xxxx"""来注释&#xff0c;作用同…

python 代码注释

文章目录 写在前面使用方法plainEpytextGoogleNumpyreStructuredText相关程序包其他 写在前面 如果说高效率的算法是一个项目的内核&#xff0c;那么完备的文档注释、API 接口则是项目的外壳&#xff0c;直接与客户交互。 pycharm 提供了 5 种 代码注释格式。 分别是 plain, e…

谈代码注释

只要写代码&#xff0c;就会遇到代码注释的问题。在不同的公司&#xff0c;不同的项目组&#xff0c;不同的项目中&#xff0c;可能会有不同的注释标准。有些标准让我们感觉很受益&#xff0c;有些则让我们感觉很反感。而对于没有明确标准的项目&#xff0c;我们往往会遇到“百…

教你写好代码注释

前言 相信大家都会遇到这种情况&#xff1a;一周前自己写的代码&#xff0c;现在再拿出来看&#xff0c;发现读不懂了&#xff0c;“ 这代码是我写的&#xff1f;&#xff1f;&#xff1f;”。这时候&#xff0c;代码注释就可以发挥它的作用了——提高晦涩难懂的代码的可读性&…

关于代码的注释的几种方法

注释就是对代码的解释和说明&#xff0c;其目的是让人们能够更加轻松地了解代码。注释是编写程序时&#xff0c;写程序的人给一个语句、程序段、函数等的解释或提示&#xff0c;能提高程序代码的可读性。注释只是为了提高可读性&#xff0c;不会被计算机编译。 注释一般分为行注…

C++设计模式之观察者模式和发布订阅模式

在软件工程中&#xff0c;设计模式&#xff08;Design Pattern&#xff09;是对软件设计普遍存在&#xff08;反复出现&#xff09;的各种问题&#xff0c;锁提出的解决防范。根据模式的目的来划分的话&#xff0c;GoF&#xff08;Gang of Four&#xff09; 设计模式可以分为以…

Redis发布订阅模式实现原理

前言 发布订阅系统在我们日常的工作中经常会使用到&#xff0c;这种场景大部分情况我们都是使用消息队列&#xff0c;常用的消息队列有 Kafka&#xff0c;RocketMQ&#xff0c;RabbitMQ&#xff0c;每一种消息队列都有其特性&#xff0c;很多时候我们可能不需要独立部署相应的消…

RabbitMQ入门案例之发布订阅模式

前言 本文章主要介绍RabbitMQ的发布订阅模式&#xff0c;该模式下&#xff0c;消息为广播形式&#xff0c;一经发布则会进入交换机绑定的队列中&#xff0c;详细介绍可以阅读官方文档。 官网文档地址&#xff1a;https://rabbitmq.com/getstarted.html 什么是发布与订阅模式 …

浅谈JS发布订阅模式

&#x1f3c6;分享博主自用牛客网&#x1f3c6;&#xff1a;一个非常全面的面试刷题求职网站&#xff0c;真的超级好用&#x1f36c; 文章目录 前言一、发布订阅模式是什么&#xff1f;二、使用步骤1.创建调度中心2.实际操作3. React中的应用 总结 前言 在使用前端各大框架时&…

React 中的发布订阅模式

1、react 通信 react的数据流是单向的, react 通信有以下几种方式&#xff1a; 单向数据流&#xff1a;指当前组件的 state 以 props 的形式流动时只能流向组件树中比自己层级更低的组件 父向子通信&#xff1a;父组件提供state&#xff0c;并且内部设置好数据&#xff0c;子组…

深入Vue原理_全面剖析发布订阅模式

文章目录 发布订阅模式优化优化思路思考理解发布订阅模式(自定义事件)收集更新函数触发更新函数6.5 总结 总结写在最后本期推荐 欢迎各位小伙伴们&#xff01; 为大家推荐一款刷题神奇哦 点击链接访问牛客网 各大互联网大厂面试真题。从基础到入阶乃至原理刨析类面试题 应有尽有…

观察者模式VS发布订阅模式区别

观察者模式VS发布订阅模式区别 观察者模式&#xff1a;订阅者收集函数&#xff0c;发布者循环调用 发布订阅&#xff1a;收集发布单独给一个中介 对比 以结构来分辨模式&#xff0c;发布订阅模式相比观察者模式多了一个调度中心&#xff1b; 以意图来分辨模式&#xff0c;都…