JS之获取子节点

　　　在JS中获取子节点有以下几种方法：

firstElementChild、firstChild、childNodes和children

我们通过一个例子来分析这几种方法的区别（获取div下的p标签）

输出结果是这样的：

firstElementChild和Children 都成功获取到了p标签，那另外两个文本（#text）是什么东西呢？

其实是因为现在的标准浏览器会为空白符创建文本节点（标签之间换行或空格之类的都会产生空白符），而ie9以前的浏览器却不会。

我们知道DOM节点分为三大类

1.元素节点

2.文本节点

3.属性节点

firstElementChild和Children比较针对，只会返回指定元素里面的元素节点，其他一概不管，但firstElementChildren 在ie9以前不兼容，会返回undefined。

而firstChild、childNodes就厉害了，事无巨细，无论是元素、文本、属性啥都给你获取过来，所以上面那个例子里获取到的是空白符，

所以使用这俩的时候要小心一些，最好使用Children来获取比较保险。

但也不是没有办法，附上几种取巧的办法

解决办法：

1.标签之间不换行

可以这样写 <div><p>123</p></div>，结果就都一样了

时间： 2024-08-08 13:18:58

JS之获取子节点的相关文章

js获取子节点和修改input的文本框内容

js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点例如:$("#"+defaultPVItemId).children().eq(3).find('input').val('当前位置'); //修改某个选择器下的第四个子节点的input节点的输入框文本内容 js修改属性内容: attr():该方法一般是获取某个属性值,或者修改某个属性值,

JS获取子节点、父节点和兄弟节点的方法实例总结

JS获取子节点.父节点和兄弟节点的方法实例总结原生js 参考网址 Jquery 参考网址原文地址:https://www.cnblogs.com/renxiuxing/p/10180558.html

js|jq获取兄弟节点,父节点,子节点

08.19自我总结 js|jq获取兄弟节点,父节点,子节点一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes; // 全部子节点 var first = test.firstChild; // 第一个子节点 var last = test.lastChile; // 最后一个子节点 var previous = test.previousSibling; // 上一个兄弟节点 var next = test

TreeView获取子节点

1 if (e.Node.Parent!=null)//如果存在父节点 2 { 3 MessageBox.Show(e.Node.Text);//就显示当前选中的 4 } TreeView获取子节点

ztree 获取子节点所有父节点的name的拼接

//获取子节点,所有父节点的name的拼接字符串function getFilePath(treeObj){if(treeObj==null)return "";var filename = treeObj.name;var pNode = treeObj.getParentNode();if(pNode!=null){filename = getFilePath(pNode) +">"+ filename;}return filename;} 原文地址:ht

js 下获取子元素的方法

笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js不同于jQuery,在获取DOM时,有很多不方便的地方,哎,没办法,原始的东东,虽然万能,但却不方便. 咱今天在使用原生js的时候,就遇见一个坑------>firstChild,具体是使用firstChild获取元素的第一个子节点,可是相当的悲剧!!! 这个是一个小模型: <div> &l

zTree获取子节点

1 var ids=[]; 2 ids=getChildren(ids, treeNode);//TreeNode是选中节点,ids是子节点id数组,格式:123,223,4,55 1.获取直接子节点的id //返回值包含选中节点的id,即ids[0] function getChildren(ids, treeNode) { ids.push(treeNode.id);//选中节点id,即父节点id if (treeNode.isParent) { for (var obj in treeNo

不同浏览器中childNodes获取子节点个数

以一段简单的HTML代码为例 <div id="div"> <div id="div01"> 这是div01</div> <div id="div02"> 这是div02</div> </div> childNodes:获取某节点下的所有直接子节点 var node = document.getElementById("div").childNodes;

获取子节点

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 window.onload=function(){ 9 var b01=document.getElementById(&q