JavaScrip节点属性-访问子节点

访问子结点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组(所以索引从0开始)，它具有length属性。

语法：elementnode.childNodes

注意：如果选定的节点没有子节点，则该属性返回不包含节点的Nodelist.

demo:

编辑器：sublime 字体颜色：Monokai bright(挚爱)

运行结果：

UL子节点个数：3

节点类型：1 （元素）

其它浏览器：

UL子节点个数：7

节点类型：3 （文本）

注意：

1. IE全系列、firefox、chrome、opera、safari兼容问题。（屌丝一枚，什么时候能用上safari）

2. 节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点，所以IE是3，其它浏览器是7，

3.不同浏览器输出的节点类型还不一样，需要注意！！！

如下图所示:

解决办法：挤一挤，更健康，不留空隙！

1 <ul><li>JavaScript</li><li>JQuery</li><li>PHP</li></ul>

demo:

任务

试一试，在script标签内，获取子节点，并输出相应属性。

1. 获取第一个DIV的子节点。

2. 使用for遍历每个节点.(因为获取的子节点是一个数组)

3. 输出相应节点的属性。

4.getElementsByTagName(),返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。 1 <!DOCTYPE HTML>


 8 <div>
 9       javascript
10   <p>javascript</p>空白节点
11   <div>jQuery</div>空白节点
12   <h5>PHP</h5>空白节点
13 </div>
14 <script type="text/javascript">
15         var     x=document.getElementsByTagName(“div”)[0].childNodes;
16         for(i=0;i<x.length;i++)
17        {
18         document.write("节点类型:"+x[i].nodeName+x[i].nodeType+x[i].nodeValue+"<br>");
19        }
24 </script>

输出结果：

javascript

jQuery

PHP

节点类型:#text3 javascript
节点类型:P1null
节点类型:#text3
节点类型:DIV1null
节点类型:#text3
节点类型:H51null
节点类型:#text3

转载于:https://www.cnblogs.com/liheheaiwangxinxin/p/5691395.html

JavaScrip节点属性-访问子节点相关推荐

【Groovy】自定义 Xml 生成器 BuilderSupport ( 构造 Xml 节点类 | 封装节点名称、节点值、节点属性、子节点 | 将封装的节点数据转为 Xml 字符串 )
文章目录一.构造 Xml 节点类 1.封装节点名称.节点值.节点属性.子节点 2.将封装的节点数据转为 Xml 字符串二.Xml 节点类完整代码一.构造 Xml 节点类生成 Xml 数据前 , ...
zTree中父节点禁用，子节点可以用
参考学习网址:http://www.treejs.cn/v3/main.php#_zTreeInfo zTree中父节点禁用,子节点可以用 axios.get('/base/unit/unittree ...
常用递归结构数据表,返会指点节点,跟其子节点的操作
内容来自机械工业出版的仓库管理系统设计一书表结构{WareHouserID , ParentWarehouseID } 查询指定节点跟其子节点的信息 ALTER FUNCTION dbo.GetW ...
cms 移动根节点到根节点中的子节点，根节点消失解决办法
cms 移动根节点到根节点中的子节点,根节点消失解决办法 cms使用对应有个NetCMS数据库,找到其中NT_News_Class表,这个表就是保存栏目名称的表 select * from dbo.N ...
js获取树形JSON数据根节点到任一子节点路径
js获取树形JSON数据根节点到任一子节点路径数据结构,deep表示节点深度现在定义一个方法传入一个子节点对象,返回其对应路径. 首先遍历数据将遍历顺序放在一个数组中![首先递归遍历数据将遍历顺序 ...
JS监听页面元素删除子节点、增加子节点、修改子节点的内容
监听这个事件DOMSubtreeModified. 表示如果当前监听元素的子节点有改动:包括删除子节点.增加子节点.修改子节点的内容,都会触发这个事件. var container = documen ...
SqlServer中递归查询父节点及其所属子节点
SqlServer中递归查询父节点及其所属子节点需求场景 SQL脚本实现-根据子节点查询所有的父节点查询结果 SQL脚本实现-根据父节点查询所有的子节点查询结果需求场景递归查询父节点及其所属 ...
tree父节点不被选中和勾选(所以父节点)只选择子节点
tree父节点不被选中和勾选(所以父节点)只选择子节点 t = $.fn.zTree.init(t, setting, result); var zTree = $.fn.zTree.getZTree ...
jstree禁用父节点点击_Jstree选中父节点时禁用子节点也被选中
这次给大家带来Jstree选中父节点时禁用子节点也被选中,解决Jstree选中父节点时禁用子节点也被选中的注意事项有哪些,下面就是实战案例,一起来看一下. 问题描述: 最近用jstree遇到一个问题, ...
WebAPI-DOM树，获取父节点、获取子节点的方法汇总
DOM树 DOM树又称为文档树模型,就是把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加载到当前的页面中. DOM树就像人类家族的族谱,族谱可以很容易的表明家族成员之间的关系,将复杂 ...

JavaScrip节点属性-访问子节点

访问子结点childNodes

任务

PHP

JavaScrip节点属性-访问子节点相关推荐

最新文章

热门文章