Web API---节点操作

 

 

目录： 

1.为什么学习节点操作

2.节点操作之父节点

3. 节点操作之子节点

4.子节点--获取第一个和最后一个

5.新浪的下拉菜单--案例

6.兄弟节点

7.创建节点--添加节点

 

 

 

 

 

 

 

 

1.为什么学习节点操作

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

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

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector() 等等
• 逻辑性不强、繁琐

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

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

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

 

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

元素节点

属性节点

文本节点

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

 

 

 

 

2.节点操作之父节点

节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

父级节点

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

 

 

 

 

3. 节点操作之子节点

 

 parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。

 

 例子：

 

 推荐使用children

 

 

 

 

4.子节点--获取第一个和最后一个

 

 

 

 

 

 

 

5.新浪的下拉菜单--案例

 

 

 

6.兄弟节点

 

 

 

 

 

 

 

7.创建节点--添加节点

 

 

 

添加节点

 

 

 

 

8.删除节点

 

 案例：

 

 

 

 

9.复制节点(克隆节点)

 

 注意：

如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

如果括号参数为true,则是深度拷贝，会复制节点本身以及里面所有的子节点。