js获取子元素，原生获取子元素

最新推荐文章于 2025-08-04 21:39:08 发布
原创 最新推荐文章于 2025-08-04 21:39:08 发布 · 3.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js获取子元素 #不包含text节点 #除去文本节点

本文介绍了一种封装成公用方法的JS原生技术，用于简化和提高DOM节点操作的效率，通过实例展示了如何利用此方法批量删除特定类型的文本节点。

js原生获取子节点:

1.封装成公用方法,以便于复用.

function deleteTextNode(id) {

var _elem = document.getElementById(id),

      _child = _elem.childNodes,
                       i = 0; 
    for (; i < _child.length; i++) {
        if (_child[i].nodeName === "#text") {
            _elem.removeChild(_elem.childNodes[i]);
         }
    }
    return _child;
}

2.调用方法传入id获取到子元素.

var children = deleteTextNode("wrap");

 

js获取子元素
时光的博客
07-17 3万+
在原生js里获取子元素childNodes ，但是在一些浏览器会把空格当成子元素 html html： &lt;div class="box"&gt; &lt;div&gt;2&lt;/div&gt; &lt;div&gt;1&lt;/div&gt; &lt;/div&gt; Js： var $ = function(o){ //获取元素函数 return doc
js获取元素下的第一级子元素的方法(推荐)
12-01
js childnodes获取的是所有的子元素，而我们实际要获取第一级子元素。 function getChildren(obj){ var objChild = [] ; var objs = obj.getElementsByTagName('*'); for(var i=0,j=objs.length; i<j;++i){ if(objs[i].nodeType != 1){alert(objs[i].nodeType); continue ; } var temp = objs[i][removed]; if(temp.no
原生JS获取元素集合的子元素宽度实例
12-29
有些时候，在一个网页的ul li中，存在左右两个部分的内容，但是右边元素内容又是不固定，左边元素相对应的不能用固定宽度，所有需要我们动态的获取右边元素宽度，来赋值给左边元素的marginRight值。 HTML结构： <ul class=itemCon> <li class=item> <div class=leftMess> <div class=leftCon> <span>头像</span> <p>名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字名字</p> </div> </div
JS--获取事件的子元素与父元素
IT利刃出鞘的博客
08-04 288
本文介绍JS如何获取事件的子元素与父元素。
原生JS查找元素的方法(推荐)
10-21
下面小编就为大家带来一篇原生JS查找元素的方法(推荐)。小编觉得挺不错的，希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦
原生js获取子元素
Jason的学习笔记
04-29 7717
感谢原文作者：归一山人 原文链接：https://www.cnblogs.com/guiyishanren/p/12214757.html 获取子元素的方法有 //获取第一个demo类 dom = document.getElementsByClassName('demo')[0]; //获取父节点 dom.parentNode; //获取上一兄弟节点 dom.previousSibling;...
DOM方法
xuxunjy的博客
09-14 275
获取当前元素的子节点 通过具体的元素节点调用 元素不包括字符，节点包括空格和字符 元素是标签之类的， ​ 1.getElementsByTagName() ​ -方法，返回当前节点的指定标签名后代节点 ​ 2.childNodes ​ -属性，表示当前节点的所有子节点 ​ 3.firstChild ​ -属性，表示当前节点的第一个子节点 ​ 4.lastChild ​ -属性，表示当前节点的最后一个子节点 ​ 5.children ​ 属性可以获取当前元素的所有子元素 ​ 6.firstEle
原生javascript实现获取指定元素下所有后代元素的方法
10-25
原生JavaScript实现获取指定元素下所有后代元素的方法是一个在Web开发中非常实用的技巧。后代元素指的是嵌套在给定元素内的所有子元素以及更深层级的元素。这些元素可能是直接子元素，也可能是嵌套在多层子元素内部...
JavaScript 获取元素在父节点中的下标(推荐)
10-19
在这个例子中，我们首先通过`document.getElementById('mts')`找到目标元素`<li>`，然后使用`parentNode.querySelectorAll('li')`获取所有`<li>`子元素，形成一个NodeList。由于NodeList不是真正的数组，它没有`...
js与jquery获取父元素,删除子元素的两种不同方法
10-26
无论是在原生JavaScript还是在jQuery中，都经常需要对DOM元素进行遍历、获取父元素以及删除子元素等操作。 首先，我们来看如何在JavaScript中获取DOM对象，并对其进行操作。使用`document.getElementById("id")`...
js获取子级元素
王百林的博客
08-25 1504
var a = docuemnt.getElementById("test").getElementsByTagName("div");
6、JS原生查找元素方法
Rinalin
01-12 5134
document.getElementById(“test”) document.getElementByName(“name”) document.getElementByTagName(“name”) document.getElementByclassName(“name”) getAttribute() setAttribute() removeAttribute() ...
原生 JS 获取节点方法总结
清平调、其N 的博客
01-26 7687
一、js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。 1 var a = document.getElementById("test").getElementsByTagName("div"); ...
关于原生js 如何找到他的直接子元素而不是后代子元素
热门推荐
MelodyFreedom的博客
07-28 1万+
1  在项目中，经常会碰到删除某个元素，有些时候，删除某个父元素下面所有的具有某个标识的子元素，有时候，删除某个父元素具有某个标识的直接子元素。  一，原生js找到某个元素的下面的所有子元素。 document.getElementById("parent").children;可以找到他的所有子元素。 二 原生js找到某个元素下面的直接子元素。  要找到他的某个元素直接子元素。  va
原生Javascript和jQuery获取元素归纳 document.getElementById,document.querySelector(““) 子节点 父节点 兄弟节点
hangshao_123的博客
11-03 2630
1. var div = document.querySelector("#box") var div = document.getElementByID("box") var div = document.getElementByClass("box")
原生js快速查找指定元素
晴天有何特别
04-19 1166
虽然已经很少有原生js写项目，不过有些组件任然使用js，原生js有一个非常麻烦的问题就是查找元素，写class怕准确度底，id总不不能写一大堆，又不想引用jquery。只需要通过父元素缩小范围，在元素队列中通过自定义属性锁定想要查找的元素,不需要定义一堆id，定义class有时候就觉得烦，更别说一堆id了。：id，class，tag支持父元素指向下级的子元素。：通过自定义属性筛选。
原生js获取html根元素,JS获取屏幕高度的简单实现代码
weixin_42436482的博客
06-04 993
主要使用了document对象关于窗口的一些属性,这些属性的主要功能和用法如下。要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在netscape下需要使用window的属性；在ie下需 要深入document内部对body进行检测；在dom环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。window对象的innerwidth属性包含当前窗口的内...
原生js获取html根元素,2020-06-12 html的Boilplate + css的3选择器级数 + js的纯函数 +Banlance...
weixin_31720227的博客
06-04 270
2020-06-12 题目来源：http://www.h-camel.com/index.html[html] 你有使用过HTML5 Boilerplate吗？说说你对它的理解为web前端的最佳实践的HTML+CSS+jquery模板集合，引用知乎的评价：1. Viewport Metatag：让页面能够在各种设备上正确显示。2. Chrome Frame：对于某些老浏览器，比如：IE6,7,8,...
获取子元素的第二个
最新发布
09-03
获取子元素中的第二个元素可以通过以下几种方式： ### 原生 JS 方式 首先可以使用 `getElementsByClassName` 方法获取元素，再通过 `childNodes` 获取子元素集合，由于浏览器会把 `dom` 节点下的空格、换行、文本都当成一个元素，所以需要剔除这些非元素节点，之后就可以选择想要的第二个元素。示例代码如下： ```javascript // 获取第一个 demo 类 dom = document.getElementsByClassName('demo')[0]; // 获取 demo 类下面的所有子元素 children = dom.childNodes; // 剔除文本节点 for (var i = 0; i < children.length; i++) { if (children[i].nodeName == '#text') { children[i].parentNode.removeChild(children[i]); i--; } } // 选择第二个元素 var secondChild = children[1]; ``` 这种方法中，`getElementsByClassName` 用于获取指定类名的元素，`childNodes` 用于获取子节点集合，通过遍历剔除文本节点后，就可以准确获取到第二个元素 [^1]。 ### 考虑浏览器解析问题的方式 当使用 `firstChild` 或 `childNodes` 时，浏览器会把换行和空格也解析为节点，所以获取第一个子元素可能会出现问题，同样的问题也会影响获取第二个元素。需要像处理 `childNodes` 一样处理，示例代码如下： ```javascript dom = document.getElementsByClassName('demo')[0]; children = dom.childNodes; var filteredChildren = []; for (var i = 0; i < children.length; i++) { if (children[i].nodeType === 1) { filteredChildren.push(children[i]); } } var secondChild = filteredChildren[1]; ``` 这里通过判断节点类型是否为元素节点（`nodeType === 1`）来过滤出元素节点，然后获取第二个元素 [^2]。 ### Vue 方式 在 Vue 中，如果需要获取点击元素的子元素，可以通过事件对象来操作。示例代码如下： ```vue <template> <div> <li class="del" @click="del($event)">删除</li> </div> </template> <script> export default { methods: { del(e) { // 获得点击元素的子元素集合 var children = e.currentTarget.children; if (children.length > 1) { var secondChild = children[1]; } } } } </script> ``` 在 Vue 中，通过 `e.currentTarget.children` 可以获取点击元素的子元素集合，然后获取第二个元素 [^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值