节点操作

节点操作

利用节点层级关系获取元素

• 利用父子兄节点关系获取元素
• 逻辑性强，但兼容性差

一般地，节点至少拥有node Type（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性

• 元素节点 nodeType 为1
• 属性节点 nodeType 为2
• 文本节点 nodeType 为3（文本节点包含文字、空格、换行等）
• 主要操作元素节点

节点层级

1. 父节点： .parentNode
2. 子节点：parentNode.childNodes（标准）
   1)parentNode,childNodes 返回包含指定节点的子节点的集合，该集合为及时更新的集合
   注意：返回值里面包含了所有的子节点，包括元素节点、文本节点等。
   如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes

var ul = document.querySelector('ul');
for(var i = 0; i < ul.childNodes.length; i++){
	if (ul.childNodes[i].nodeType == 1）{
		//ul.childNodes[i] 是元素节点
		console.log(ul.childNodes[i]);
	}
}

2)parentNode.children(非标准)
parentNode.children 是一个只读属性，返回所有的子元素节点。他只返回子元素节点，其余节点不返回
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
3) parentNode.firstChild
firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
4)parentNode.lastChild
lastChild 返回最后一个子节点
5)parentNode.firstElementChild
.firstElementChild 返回第一个子元素节点，找不到则返回null
6)parentNode.lastElementChild
.lastElementChild 返回最后一个子元素节点，找不到则返回null
注意：这两个方法有兼容性问题， IE9以上才支持
7)解决兼容性问题的方案：
如果想要第一个子元素节点，可以使用parentNode.children[0]
如果想要最后一个子元素节点，可以使用parentNode.children[parentNode.children.length - 1]
3. 兄弟节点

1. node.nextSibling
   nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点
2. node.previousSibling
   previousSibling 返回当前元素的上一个兄弟节点，找不到则返回Null,包含所有节点
3. node.nextElementSibling
   nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null
4. node.previousElementSibling
   previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回null
   以上两个方法有兼容性问题

新浪下拉菜单案例

案例分析

1. 导航栏里面的 li 都要有鼠标经过效果，所以需要循环注册鼠标事件
2. 核心原理：当鼠标经过 li 里面的第二个孩子ul显示，当鼠标离开则 ul 隐藏