js获取子元素

最新推荐文章于 2025-07-20 22:47:24 发布

原创最新推荐文章于 2025-07-20 22:47:24 发布 · 3.2w 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

21 篇文章

订阅专栏

在原生JavaScript中，使用childNodes获取子元素时，某些浏览器会将空格和文本节点视为子元素，导致计数不准确。为解决这个问题，可以通过删除不必要的文本和空格节点来获取正确的子元素数量。而在jQuery中，直接使用方法可以简洁地获取子元素。

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

在原生js里获取子元素childNodes ，但是在一些浏览器会把空格当成子元素

html

html：
<div class="box">
	<div>2</div>
        <div>1</div>
</div>

Js：
var $ = function(o){  //获取元素函数
	return document.querySelector(o);  
}

console.log($(".box").childNodes);   //获取.box下面的子元素

在这里只有两个子元素，但是在一些浏览器里它就变成5个子元素

在这个浏览器里会把文本和空格都当初一个子元素，这样你会想到把.box下面的空格和text删除就好，没错，接下来删除这些元素就可以了


//第一种方法：
var box  = $(".box");
var box_child = $(".box").childNodes;

for(var i = 0; i<box_child.length; i++){
    if(box_child[i] == "#text" && !/\s/.test(box_child.nodeValue)){
        return box.removeChild(box_child[i]); //判断当前的子元素是否为空格或者文本元素，是就删除当前元素
    }
    
}
console.log(box_child);


//第二种方法

var box  = $(".box");
var box_child = $(".box").childNodes;
for(var j = 0; j < box_child.length; j++){
        if(box_child[i].nodeType !== 1){
           return box.removeChild(box_child[i]);
        }   //判断这种元素是否为元素节点,如果当前节点的nodeType不等于1，就会删除当前节点，否则保留， 元素节点:nodeType=1,属性节点:nodeTyp=2,文本节点:nodeType=3 
    
}

console.log(box_child);

这样就完美的获取到正确的子元素了

上面是原生js获取子元素，在jq里可以直接使用

$(".box").children() //直接获取子元素，不会出现原生js里的问题