children的childNodes区别

childNodes：获取子元素的节点，包括文本节点、元素节点、注释节点；

<div id="box"><ul id="ul"><li>第一个</li><li>第二个</li><li>第三个</li></ul><p>我是第二个子节点</p>
</div>

var oBox = document.getElementById("box");console.log(oBox.childNodes.length);  //得到的结果为5；

children：获取子元素的元素节点（只包括元素节点）；

var oBox = document.getElementById("box");console.log(oBox.children.length);//得到的结果为2；

childNodes模拟children：

function myChild(ele){var eleChild = ele.childNodes; //获取所有的子元素(包括文本节点、元素节点、注释节点)；
    var str = [];for(var i = 0;i<eleChild.length;i++){ //循环所有的文本节点，以便都能拿到；
        if(eleChild[i].nodeType == 1){  //nodeType == 1 是文本节点；
            str.push(eleChild[i]);//将得到的每一项子元素添加到数组的后面；}}return str;
}
var oBox = document.getElementById("box");console.log(myChild(oBox).length);  //得到的是2--所有元素节点

children的childNodes区别相关推荐

javascript中children和childNodes的区别
javascript中children和childNodes的区别 1.childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点. 可以通过nodeType ...
children与childNodes的区别
children与childNodes都是获取目标元素的子节点,不同的是: 1.children是非标准属性,childNodes是标准属性. 2.children获取的都是元素节点,而childNo ...
php childnodes,小tips：HTML DOM中的children和childNodes属性
childNodes 属性标准的,childNodes 属性返回节点的子节点集合,以 NodeList 对象.包括HTML节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当 ...
jquery 中后代遍历之children、find区别
jquery 中children.find区别首先看一段HTML代码,如下: 1 <table id="tb"> 2 <tr> 3 <td>0 ...
JavaScript中Element与Node的区别，children与childNodes的区别
关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称 ...
js dom node.children与node.childNodes区别
不同点:node.children不会取到节点下面的TextNode但是node.childNodes会取到共同点:两者都是集合类数组,可以通过索引的方式取到值也可以用for循环遍历更多专业前端知 ...
children和childNodes 的区别
1,childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属 ...
JS中children与childNodes的区别
博主"不知所言"在https://blog.csdn.net/yhn1121/article/details/52461353中已经写得很生动形象了, 个人做一点点补充, var ...
Dom 中 children 与childNodes 的区别
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

children的childNodes区别

children的childNodes区别相关推荐

最新文章

热门文章