原生js找到指定父元素获以及取指定节点的属性

最新推荐文章于 2025-02-17 14:38:19 发布
最新推荐文章于 2025-02-17 14:38:19 发布
阅读量1w 收藏 10
点赞数 7
CC 4.0 BY-SA版权
分类专栏： Javascript React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zlzbt/article/details/90047332
本文介绍了如何使用closest()方法定位DOM元素的最近父级，以及getAttribute()方法自定义属性值的读取方式，深入探讨了JavaScript中DOM操作的实用技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

语法： dom.closest(指定父元素的标签名)

currentTargetDom.closest('li.thisClickInfoLi');

saveExpressDeliveryMethod = (evt) => {
    const currentTargetDom = ReactDOM.findDOMNode(evt.currentTarget);
    if(!currentTargetDom){
        return;
     }
     const parentLi = currentTargetDom.closest('li.thisClickInfoLi');
 };

getAttribute() 方法返回指定属性名的属性值。

属性值可以自定义

<a href="/jsref/dom_obj_attributes.asp" data-msg='123' target="_blank">Attr 对象</a>，

const dataMsg = getAttribute('data-msg');

console.log(dataMsg )  //123

 

JavaScript技巧：查找元素的父节点
TechNovaX的博客
09-20 2806
然后，我们通过parentNode属性访问了该元素的父节点，并将结果存储在变量parent中。在上面的示例中，我们首先使用getElementById()方法获取了一个具体的元素，并使用closest()方法查找了class为’parentClass’的最近祖先节点，并将结果存储在变量parent中。在上面的示例中，我们使用getElementById()方法获取了一个具体的元素，并使用parentElement属性访问了该元素的父节点，并将结果存储在变量parent中。如有疑问，请随时提问。
JS找出指定id对应数据所有的父级元素
cyj0919的博客
03-14 996
【代码】JS找出指定id对应数据所有的父级元素。
js中通过父级进行查找定位元素
10-25
主要介绍了js中如何通过父级进行查找定位元素,需要的朋友可以参考下
JavaScript DOM编程(如何获取HTML标签的父元素和子元素)
热门推荐
m0_65725031的博客
03-03 1万+
今天迎来了我们的JS的第四讲，今天就给家人们浅讲一下如何获取JS中的HTML标签的父元素和子元素，大家有什么不懂的可以私信我或者在下方评论，看到了会回复噢，也希望一直跟着我在学JS的家人们，继续坚持下去!!! ...
查找指定的父元素
weixin_34007906的博客
11-27 159
<body class="ancestors">body (曾曾祖父) <div style="width:500px;">div (曾祖父) <ul>ul (祖父) <li class="one">li (直接父) <span>span</span> &l...
Javascript删除指定元素节点的方法
10-22
在早期的JavaScript中，删除DOM元素节点通常依赖于`removeChild()`方法，该方法存在于每个节点对象上，允许从父节点中移除指定的子节点。使用`removeChild()`方法时，首先需要找到要删除节点的父节点，然后通过调用...
JavaScript 获取元素在父节点中的下标(推荐)
10-19
在JavaScript中，获取元素在父节点中的下标是一项常见的任务，尤其在进行DOM操作和页面交互时。在jQuery中，我们可以方便地使用`$(this).index()`来获取元素在父节点同级元素中的索引位置。然而，在原生JavaScript中...
原生js实现给指定元素的后面追加内容
10-27
创建完毕后，我们并不会直接把新创建的元素节点追加到指定元素的后面，因为原生JavaScript没有提供一个直接的方法来实现这个功能。 接下来，我们定义了一个自定义函数insertAfter，它有两个参数：newElement代表...
原生js获取元素样式的简单方法
10-21
本文将介绍使用原生JavaScript来获取元素样式的方法，这种方法主要分为几种：使用ele.style属性、getComputedStyle方法、currentStyle属性以及getPropertyValue方法。 首先，ele.style属性是最直接获取样式的方式，...
jQuery父级以及同级元素查找介绍
萧刚
02-18 881
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 jQuery.children(expr).返回所有子节点，这个方法只会返回直
js查找指定父级元素（不确定层级）
XTP1138972631的博客
11-10 2759
js查找指定父级元素（不确定层级）
JavaScript之获取父级元素和子集元素
fsLees的博客
03-27 1万+
获取父级元素和子集元素
JQuery和js查找子、父、兄弟元素的方法
XiaoLong4150的博客
07-18 1077
parent()           parent() 方法返回被选元素的直接父元素     例：$('span').parent();parents()          parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。  例：$('span').parents();parentsUntil()   parentsUntil() 方法返回介于两个给定元素
html上获取父父元素的属性值,属性选择器，兄弟伪类，相对于父元素的伪类
weixin_39638309的博客
06-04 327
属性选择器：属性是相对于标签而言，是根据属性的值来查找元素的。1、标签[属性]2、标签[属性=属性值]。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。兄弟伪类有2种+:相邻的满足条件的。~满足条件的兄弟(同级)元素。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。相对于父元素的伪类p:first-child p元素的父元素的第一个子元素(不管是不是p，也...
父组件如何获取子组件的属性和方法-使用Ref
Jaden_Chiang的博客
02-26 2084
Ref在React中文文档中, 对于ref是这么解释的:Refs 提供了一种方式, 允许我们访问DOM节点或在render方法中创建的React元素而在最新的官方文档中,对于ref的定义如下:When you want to a component to “remember” some information, but you don’t want that information to trigger new renders(触发新的渲染), you can use aref。
Vue 点击获得父元素，子元素，兄弟元素（DOM操作）
qq_42709302的博客
11-03 4362
<ul @click ="clickfun($event)"> <li></li> </ul> methods: { clickfun(e) { e.target //是你当前点击的元素 e.currentTarget //是你绑定事件的元素 //获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML //获得点击元素的第一个子元素
JavaScript中的 closest 方法详解
2301_79858914的博客
12-04 2810
closestclosest()是一个非常强大的 DOM 方法，它使得在查找祖先元素时变得更加高效。它不仅适用于事件委托，还可以帮助你在处理复杂的 DOM 结构时轻松找到元素的祖先。在动态内容和复杂的 DOM 交互中，closest()也是一种非常便捷的工具。通过掌握closest()方法，开发者可以更加灵活地操作 DOM 元素，并提高代码的可维护性和性能。
html等待,休眠代码,HTML DOM closest()用法及代码示例
weixin_39865952的博客
06-08 659
元素接口的closest()方法用于遍历HTML文档树中的元素及其父元素，直到找到与提供的选择器字符串匹配的第一个节点。用法:targetElement.closest( selectors )参数：此方法接受如上所述和以下描述的单个参数：selectors:它是一个字符串，它指定将用于查找节点的HTML选择器。返回值：如果找到匹配的祖先，则此方法返回最接近的元素；否则，如果找不到此类元素，则返回...
JavaScript 中 closest 方法详解
最新发布
奋斗的小前端
02-17 1285
事件委托是一种常见的 DOM 事件处理技术，它将事件监听器添加到父元素上，而不是每个子元素。方法为 JavaScript 开发者在 DOM 操作中提供了极大的便利，无论是处理事件委托还是动态内容，都能轻松应对。在处理动态生成的内容时，传统的事件绑定方式可能会失效，因为新添加的元素没有绑定事件。如果遍历完所有元素都没有找到匹配的，该方法将返回。方法是一个非常实用的工具，它能帮助开发者高效地查找元素。方法就像是一个 “查找器”，能快速定位到符合条件的最近祖先元素。若指定的选择器在元素的祖先中不存在，
原生js实现find找到孙元素
09-04
原生JavaScript实现查找孙元素，需要使用DOM操作函数和递归算法。首先，我们需要获取到父元素和孙元素的标识，可以通过获取父元素的id或类名来获取父元素节点，而孙元素比较难通过直接获取，我们可以通过遍历或其他方式找到。 ```javascript function findGrandChildElem(parentElemId) { // 获取父元素节点 const parentElem = document.getElementById(parentElemId); // 递归函数用于查找孙元素 function findGrandChild(node) { // 初始化孙元素数组 let grandChildElems = []; // 遍历子元素节点 for (let child of node.children) { // 如果子元素节点有子元素节点，递归调用该函数 if (child.children.length > 0) { grandChildElems = grandChildElems.concat(findGrandChild(child)); } // 将孙元素节点添加到孙元素数组中 grandChildElems.push(...child.children); } return grandChildElems; } // 调用递归函数查找孙元素 const grandChildElems = findGrandChild(parentElem); // 返回孙元素数组 return grandChildElems; } // 示例用法 const grandChildElements = findGrandChildElem('parent-container'); console.log(grandChildElements); ``` 上述代码中，`findGrandChildElem`函数使用DOM操作函数获取到父元素节点，然后调用递归函数`findGrandChild`找到所有的孙元素节点，并将它们添加到一个数组中返回。最后，我们可以通过控制台输出这个孙元素数组。需要注意的是，`parentElemId`参数应该是父元素节点的id值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值