节点基础~节点层级

一.为什么学习节点操作

获取元素通常使用两种方式:

1.利用DOM提供的方法获取元素

• document.getElementByld（）
• document.getElementsByTagName(）
• document.querySelector等
• 逻辑性不强、繁琐

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

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

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单

网页中的所有内容都是节点(标签、属性、文本、注释等），在DOM中，节点使用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点)均可被修改，也可以创建或删除。

 一般地，节点至少拥有nodeType(节点类型) 、nodeName(节点名称）和nodeValue(节点值)这三个基本属性。

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

我们在实际开发中，节点操作主要操作的是元索节点

二.节点操作之父节点

parentNode属性可返回某节点的父节点，注意是最近的一个父节点如果指定的节点没有父节点则返回null

三.节点操作之子节点

 parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意:返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

 

 parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回(这个是我们重点掌握的）。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

四.第一个子元素和最后一个子元素

firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

 lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

firstElementchild返回第一个子元素节点，找不到则返回null

 lastElementchild返回最后一个子元素节点，找不到则返回null.。
 注意:这两个方法有兼容性问题，IE9以上才支持。

 实际开发中，firstchild和lastchild包含其他节点，操作不方便，而firstElementchild，lastElementchild又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢?

如果想要第一个子元素节点，可以使用parentNode.chilren[0]

解决方案如下：

新浪下拉菜单案例

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

HTML代码：

CSS代码： 

JS代码：

 五.节点操作之兄弟节点

1.nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

2.previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

3.nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null。

4.previousElementsibling返回当前元素上一个兄弟节点，找不到则返回null
 

 注意∶这两个方法有兼容性问题，IE9以上才支持。

如何解决兼容性问题：自己封装一个兼容性函数