JavaScript笔记_DOM编程

DOM编程

文档对象模型（Document Object Model）：是W3C组织推荐的可扩展标记语言（html或xhtml）的标准编程接口

DOM模型用一个逻辑树来表示一个文档

• 文档：就相当于是document对象。
• 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
• 节点包含了属性和文本还有子节点。

为什么学习DOM

为了使用JavaScript语言操作网页中的元素

获取网页中的元素

getElementById()

getElementsByName()

getElementsByTagName()

getElementsByClassName()

返回文档中与指定的选择器匹配的第一个元素节点

Document.querySelector()

返回包含文档中与指定的选择器匹配的所有元素节点的列表

Document.querySelectorAll()

目前最常用的获取元素的方法是      

querySelector和querySelectorAll.

常见的鼠标事件

获取属性值和设置属性值

1. getAttribute() 返回元素上一个指定的属性值。如果指定的属性不存在，则返回 `null` 或 `""` （空字符串）；
2. setAttribute()：设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
3. hasAttribute 返回一个布尔值，指示该元素是否包含有指定的属性（attribute）。

• result为返回的布尔值：`true` 或 `false`。
• attName是一个字符串，表示属性的名称。

节点

节点与元素的关系

1. Element是一个通用性非常强的基类，所有对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 `Element` 并且增加了一些额外功能的接口描述了具体的行为。
2. Node 是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如，继承同一组方法，或者用同样的方式测试。

基本属性

nodeName：返回当前节点的节点名称

nodeType：返点当前节点的类型

nodeValue：返回或设置当前节点的值，只有文本节点才有值，标签元素和属性节点是没有值的。

Node.ELEMENT_NODE 1 元素节点

Node.ATTRIBUTE_NODE 2 属性节点

Node.TEXT_NODE 3 文本节点

节点之间的关系

1. 父子关系
   1. 获取父节点
      1. Node.parentNode：返回指定的节点在 DOM 树中的父节点。
      2.  parentElement：返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 `null`。
2. 兄弟关系
   1. 获取子节点
      1. Node.childNodes：返回包含指定节点的子节点的集合。
      2. Element.children：是一个只读属性，返回 一个 Node 的子elements
      3. Element.childElementCount 只读属性，返回一个无符号长整型数字表示给定元素的子元素数。

获取头尾节点

1. Node.firstChil只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 `null`。
2. Node.lastChild 是一个只读属性，返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回 `null`。

获取前后节点

1. Node.nextSibling 是一个只读属性，返回其父节点的childNodes 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 `null`。
2. Node.previousSibling：返回当前节点的前一个兄弟节点，没有则返回`null.`

创建节点和添加节点

1. Node.appendChild()方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 `appendChild()` 只会将它从原先的位置移动到新的位置（不需要事先移除要移动的节点）。

删除节点

Node.removeChild() 方法从 DOM 中删除一个子节点。返回删除的节点。

1. child是要移除的那个子节点。
2. node 是`child`的父节点。

PS：只能由父节点删除子节点

复制，克隆节点

Node.cloneNode()方法返回调用该方法的一个副本

1. 是否采用深度克隆，如果为 true，则该节点的所有后代节点也都会被克隆，如果为 false，则只克隆该节点本身。

事件进阶内容

页面初始化事件

load事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。它与DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。

window.onload = function(){

}

注册事件的两种方式

1. 基于监听的方式注册事件

addEventListener(type, listener, useCapture);

- type：事件类型

- listener：监听事件的方法

- useCapture：捕获还是冒泡

1. 基于属性的方式

移除事件

事件流原理

1. 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。
2. 冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。

       阻止事件触发和冒泡