节点操作简单概述~JS
1:概述
一般，节点至少拥有nodeType（节点类型)、nodeName(节点名称）和nodeValue(节点值）这三个基本属性。
-
元素节点nodeType为1
-
属性节点nodeType为2
-
文本节点 nodeType为3（文本节点包含文字、空格、换行等)
这三个节点会返回不同的值，在后期会用来获取相关属性，我实际开发中,节点操作主要操作的是元索节点，nodetype==1的值，HTML所有标签都可以看为一个节点
2、获取方法
A:利用dom树可以把节点分为不同的层级关系，常见的是父子兄层级关系
B:父级节点
语法：node（获取过来的一个元素）. parentNode，parentNode属性可返回某节点的父节点，注意是最近的一个父节点 如果指定的节点没有父节点则返回null
C：子节点
A:获取方法一（麻烦会返回所有节点）
语法：parentNode.childNodes（标准）
对于子节点是一个集合来说返回的是一个伪数组，假如ul里面有4个li就会返回9个节点，因为里面还存在5个txet节点（空格也算是节点），集合里面包含了所有的节点，包括元素节点、文本节点，如果只想要获得里面的元素节点，就需要处理
var ul = document.querySelector("ul");
for( var i=0;i
过程繁琐不提倡
推荐方法：parentNode.children（parentNode父节点名）
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(这个是我们重点掌握的）。 虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以使用
我们想要获得第几个li可以采用如下方法
ul.children[0]、ul.children[1]、ul.children[2]
B：获取方法二（麻烦会返回第一个节点包含文字节点）
语法一：parentNode .firstChild 返回第一个子节点，找不到结果返回null。同样也是包含所有的节点。 语法：parentNode. lastChild
返回第一个子节点，找不到结果返回null。同样也是包含所有的节点。
我们只需要获取元素节点就可以了为此出现方法三：
C：获取方法三（IE9以上支持此语法）
语法：parentNode .firstElementChild firstElementchild返回第一个子元素节点，找不到则返回null。
语法：parentNode . lastElementChild lastElementchild返回最后一个子元素节点，找不到则返回null。
下拉菜单利用parentNode.children元素节点制作
源码：
Document
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
