246节---------6月19日

节点操作

获取元素的两种方法

• 利用DOM提供的方法获取元素
• 利用节点层级关系获取元素

---

节点概述

节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）

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

在实际操作中，节点操作主要操作的是元素节点

---

节点层级

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

父子节点

• 父结点   parentNode
  • 得到的是离元素最近的父级节点
  • 如果没有父结点返回null
• 子节点   childNodes
  • 返回值里面包含了所有的子节点，包括元素节点，文本节点
  • 也可以chileren，只返回子元素节点
• 第一个子节点        firstChild     //  firstElementChild，也可以children[0]
• 最后一个子节点    lastChild     //  lastElementChild，也可以children[ol.children.length - 1]

兄弟节点

node.nextSibling：返回当前元素的下一个兄弟节点，找不到则返回null，包含所有节点

node.previousSibling：返回当前元素的上一个兄弟节点，找不到则返回null，包含所有节点

---

创建节点

document.creatElement('tagName')

由tagName指定的HTML元素，因为这些元素原先不存在，是根据需求动态生成的，索爷也叫做动态创建元素节点

---

添加节点

• node.appendChild(child)
  • 将一个节点添加到指定父结点的子节点列表末尾，；类似css中的after伪元素
  • node是父级，child是子级
  • 如：ul.appendChild('li');
• node.insertBefore(child，指定元素)
  • 将一个节点添加到指定父结点的子节点列表后尾，；类似css中的before伪元素

---

删除节点

node.removeChild(child)

从DOM中删除一个子节点，返回删除的节点

---

复制节点（克隆节点）

node,cloneNode()

返回调用该方法的节点的一个副本

注意

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

---

三种动态创建元素区别

1. document.write()
2. element.innerHTML
3. document.creatElement()

区别：

• 第一个是直接将内容写入页面的内容流，但是文档流执行完毕，他会导致页面全部重绘
• 第二个试讲内容写入某个DOM的节点，不会导致页面全部重绘。效率高（不需要拼接字符转，采取数组形式拼接），结构稍微复杂
• 第三个创建元素效率低，但是结构清晰