JavaScript 系列笔记——DOM（贰）

本系列 JavaScript 笔记——目录

本系列 JavaScript 笔记——目录

目录

DOM

1. DOM 简介

2. 获取元素

3. 事件基础

4. 操作元素

5. 节点操作

6. DOM 重点核心

事件高级

1. 注册事件

2. 删除事件（解绑事件）

3. DOM事件流

4. 事件对象

5. 阻止事件冒泡

6. 事件委托（代理、委派）

7. 常见的鼠标事件

8. 常用的键盘事件

DOM

1. DOM 简介

1.1 什么是 DOM

文档对象模型（Document Object Model, 简称DOM），是由W3C组织所推荐的一种针对可扩展标记语言（HTML或XML）的标准程序接口。该模型主要针对这些标记语言的结构特点进行了规范设计，并广泛应用于基于网络资源的动态交互环境；同时作为通用编程语言的重要组成部分，在Web应用开发中发挥着基础性作用。

W3C已制定了一系列标准DOM接口；可被这些DOM接口所利用以修改网页内容、结构及样式。

1.2 DOM 树

**

**

• 文档：从本质上讲，一个网页相当于一个文件，在DOM模型中，默认情况下认为每个页面都对应着一个文档节点。
  • 元素：在HTML语言体系中，默认情况下认为每个标签都构成独立的元素单元，在DOM模型中则明确将其视为基本构建块。
  • 节点：在一个HTML文档中，默认情况下认为所有的内容（包括标签、属性、文字以及注释）都被组织为节点结构。

DOM把以上内容都看做是对象

2. 获取元素

2.1 获取页面元素

• 根据 ID 获取
• 根据标签名获取
• 通过 HTML5 新增的方法获取
• 特殊元素获取

2.2 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

    document.getElementById('id')

调用 console.dir() 可以帮助我们获取并打印所获得的元素对象体内容，并且更加直观地查看对象内部属性与方法。

2.3 根据标签名获取

使用 getElementsByName() 方法可以返回带有指定标签名的对象的集合。

    document.getElementsByName('标签名')

注意：

由于获得了多个独立的对象实例作为一个集合的形式存在，在后续的数据处理过程中为了实现对每个个体实例进行单独的操作而必须采用遍历的方式进行处理

2.4 通过 HTML5 新增的方法获取

 document.getElementsByClassName('类名')    // 根据类名返回元素对象集合

    
 document.querySelector('选择器')			// 根据指定选择器返回第一个元素对象
    
 document.querySelectorAll('选择器')		// 根据指定选择器返回

注意：

在querySelector和querySelectorAll内部的选择器需使用符号表示法进行定位操作，请参考以下示例：例如，在JavaScript脚本中使用 document.querySelector('#nav')来实现对该元素的引用。

2.5 获取特殊元素（body，html)

 // 获取body元素

    
 document.body				// 返回body元素对象
    
 // 获得html元素
    
 document.documentElement	// 返回html元素对象

3. 事件基础

3.1 事件概述

JavaScript提供了创建动态页面的能力；而事件是可以通过JavaScript探测到的行为。

JavaScript提供了创建动态页面的能力；而事件是可以通过JavaScript探测到的行为。

简单理解： 触发--- 响应机制。

3.2 事件三要素

1. 事件源（谁）

2. 事件类型（什么事件）

3. 事件处理程序（做啥）

3.3 执行事件的步骤

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采用函数赋值形式）

 // 1. 获取事件源

    
 let btn = document.getElementById('btn')
    
 // 2. btn.onclick 注册事件 
    
 // 3. 添加事件处理程序
    
 btn.onclick = function() {
    
     alter('你好')
    
 }

3.4 常见的鼠标事件

4. 操作元素

通过 JavaScript 的 DOM 操作，我们可以实现对网页内容、结构及样式的变化。在 DOM 结构中，我们可以通过操作特定的节点来修改其内部内容及其相关属性。需特别注意的是，在此上下文中涉及的所有字段均属于属性类别。

4.1 改变元素内容

    element.innerText

内容位于起始位置至终止位置之间，并且删除了所有 HTML 标签以及空白格和换行符。

    element.innerHTML

起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

4.2 常用元素的属性操作

 // 1. innerText、innerHTML        改变元素内容

    
 // 2. src、href
    
 element.src	// 可修改图片路径

4.3 表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：

    type、value、checked、selected、disabled

4.4 样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

 element.style                    // 行内样式操作

    
 element.className		// 类名样式操作

注意：

1. JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor

2. JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

3. className 会直接更改元素的类名，会覆盖原先的类名。

总结

**

**

4.5 自定义属性的操作

1. 获取属性值

 // element.属性    获取属性值

    
 element.getAttribute('属性')

区别：

• element.属性 通过调用可以访问到元素本身自带的信息
• element.getAttribute(‘特定字段’) 主要实现功能需求 其中针对开发者需求设计的功能

2. 设置属性值

 element.属性 = '值'         // 设置内置属性值

    
 element.setAttribute('属性', '值')

区别：

• element.属性赋值预定义的数值
  • element.setAttribute('字段') 主要用于自定义字段（常规方式）

3. 移除属性

    element.removeAttribute('属性')

4.6 H5 自定义属性

自定义属性的设置旨在实现数据的持久化与在页面中的直接调用功能。其中某些特定的数据类型可以在页面层面上进行存储和访问，并避免将这些数据提交至数据库以提高应用性能和资源利用率。

1. 设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。

    <div data-index="1"></div>

2. 获取H5自定义属性

要获取以 data 开头的属性

    element.dataset.index 或者 element.dataset['index']    // ie 11才开始支持

5. 节点操作

5.1 节点概述

网页中的所有信息都是节点（包括标签名、属性值、文本内容以及注释信息等），在 DOM 中对 node 的使用体现了对 HTML 元素的表示方法。任何 HTML 元素（作为 DOM 树中的对象）都可以通过 JavaScript 脱离开来供处理，并且支持新增或删除功能。

通常情况下，一个节点必须包含类型标识符、名称字段以及值部分这三个必要的信息字段。

• 元素节点的 nodeType 属性值为 1
• 属性节点的 nodeType 属性值为 2
• 文本节点的 nodeType 属性值为 3（包括文字字符、空格和回车换行）

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

5.2 节点层级

DOM树可用于将节点划分为不同的层级关系。常见的层级关系包括父节点、子节点和兄弟节点。

1. 父级节点

    node.parentNode

• parentNode 属性字段可返回某节点的直接父节点。
  • 若指定的节点无父节点，则该属性值为 null。

2. 子节点

 parentNode.childNodes	（标准）

parentNode.childNodes 返回包含指定节点的子节点的集合。

注意：

返回值里面包含了所有的子节点，包含元素节点，文本节点等

仅若仅需提取内部节点，则应采取特殊措施。 建议我们通常避免采用这种方式。

 parentNode.children	（非标准）

parentNode.children is a readonly property that returns all child nodes. It returns the child nodes, but not the other nodes (focus on understanding this concept)

 3. parentNode.firstChild

    
 4. parentNode.lastChild

firstChild 遍历到的第一个子节点；如果无法获取，则会返回null。同时也会包括所有的节点。

lastChild用于获取最后一个子节点；当无法获取时，则返回null。同样地, 它也包含了所有节点。

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

3. 兄弟节点

 node.nextSibling

通过调用node.siblingNextNode方法可以获得当前元素的下一个兄弟节点。如果无法找到下一个兄弟节点，则返回null。同时也可以获取所有相关的子节点。

 node.previousSibling

previousSibling 返回当前元素上一个同级元素的前驱节点位置索引。若找不到则返回null，并且该方法同样适用于获取所有相关节点的信息。此外，在某些情况下，默认行为会根据上下文自动调整参数设置以确保正确性。

 node.nextElementSibling

nextElementSibling 返回后续相邻的兄弟元素节点，并在无法找到时返回null

 node.previousElementSibling

previousElementSibling用于获取当前元素的前驱元素的下一个兄弟节点，在找不到时返回null。

注意： 3，4两个方法有兼容性问题， IE9 以上才支持

5.3 创建节点

    document.createElement('tagName')

通过 document.createElement() 方法能够生成指定名为 tagName 的 HTML 元素。
由于这些元素在最初时并不存在，并且是基于我们的需求而动态生成的，
因此我们也将此过程称为动态元素节点生成过程

5.4 添加节点

 node.appendChild(child)

该方法用于在DOM树中将指定的Node附加至其父Node的子Node列表末端，并采用与CSS after伪元素类似的行为机制实现动态布局调整。

 node.insertBefore(child, 指定元素)

node.insertBefore() 方法用于将一个节点插入到父节点指定子节点之前的位置。该方法等价于 CSS 中的 before::before伪元素。

5.5 删除节点

    node.removeChild(child)

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

5.6 复制节点（克隆节点）

    node.cloneNode()

node.cloneNode() 方法用于生成一个与当前实例相同的副本。也被称作复制节点或镜像节点。

注意：

如果括号参数为空或取值为布尔值false，则执行的是轻复制操作；这种情况下仅会将当前节点进行复制而不包含其中的子节点结构。这一行为不会影响到内部的层级结构

当括号参数设置为true时，则属于深度复制品的行为，并非浅层复制品的操作。

6. DOM 重点核心

关于DOM技术, 我们主要针对元素的操作. 主要有建立网站功能(创建), 删除网页内容(删), 修改网页内容(改), 查询数据(查), 获取属性信息(属性操作), 驴击事件(事件操作).

6.1 创建

1. document.write

2. innerHTML

3. createElement

6.2 增

1. appendChild

2. insertBefore

6.3 删

1. removeChild

6.4 改

主要修改dom的元素属性，dom元素的内容、属性, 表单的值等

1. 修改元素属性： src、href、title等

2. 修改普通元素内容： innerHTML 、innerText

3. 修改表单元素： value、type、disabled等

4. 修改元素样式： style、className

6.5 查

主要获取查询dom的元素

DOM提供的接口方法包括getElementById和getElementsByTagName。这些方法虽然曾经被广泛使用但已经过时且不再推荐使用

2. H5提供的新方法： querySelector、querySelectorAll 提倡

通过节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）推荐使用斜体包围代码部分

6.6 属性操作

主要针对于自定义属性

1. setAttribute：设置dom的属性值

2. getAttribute：得到dom的属性值

3. removeAttribute：移除属性

6.7 操作事件

给元素注册事件， 采取 事件源.事件类型 = 事件处理程序

事件高级

1. 注册事件

1.1 注册事件概述

给元素添加事件，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式

1.2 addEventListener 事件监听方式

    eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener() 函数配置绑定到 eventTarget（目标对象）上，在接收到指定事件时会执行相应的处理逻辑。

type：表示特定事件的类型标识符（如 click, mousemove 等），无需包含关键字 "on"。
listener：定义了一个响应特定事件的函数，在该事件触发时会自动调用。
useCapture：一个可选布尔值参数，默认设置为 false。

2. 删除事件（解绑事件）

2.1 删除事件的方式

1. 传统注册方式

    eventTarget.onclick = null

2. 方法监听注册方式

    eventTarget.removeEventListener(type, listene（r[, useCapture])

3. DOM事件流

事件流描述的是从页面中接收事件的顺序。

当事件发生时，在元素节点之间会按照特定顺序进行传播；此传播过程可称为 DOM 事件流。

DOM 事件流分为3个阶段：

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

比如我们给一个div 注册了点击事件：

• 事件冒泡： IE最先提出其模型，在该模型中IE最先提出其概念体系，在该模型中事件发生时由具体元素最先响应并依次向上传递至DOM顶层节点。
• 事件捕获： 网景最先提出相关的实现方案，在该方案中从DOM顶层节点开始响应并逐步向下传递至具体元素。

注意：

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。

2. onclick 和 attachEvent 只能得到冒泡阶段。

addEventListener(type, listener, [useCapture])用于在捕获阶段触发处理；如果不指定useCapture，默认为false。

4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。

5. 存在不触发冒泡效果的事件，例如：Blur、Focus、MouseMove和MouseLeave。

4. 事件对象

4.1 什么是事件对象

 eventTargt.onclick = function(event) {}

    
 eventTargt.addEvenetListener('click', function(event) {})
    
 // 这个 event 就是事件对象，可以写成 e 或 evt
    
 // 这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
    
 // 当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

官方定义：event 对象用于表示事件状态信息，例如键盘按键按下状态、鼠标的当前位置以及鼠标按钮的按下情况等。 简单理解：当某个事件发生后，与该事件相关的各种信息数据会被整合到一个特定的对象中（称为 event 对象），该对象包含了丰富的属性和方法供后续操作使用。

比如：

1. 谁绑定了这个事件。

2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。

3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

4.2 事件对象的常见属性和方法

e.target 和 this 的区别：

e.target 是事件触发的元素。

this 是事件绑定的元素， 这个函数的调用者（绑定这个事件的元素）

5. 阻止事件冒泡

5.1 阻止事件冒泡

事件冒泡：首先由具体实例接收事件信息后，在逐步向上扩散的过程中触发相关事件处理逻辑；最终到达DOM结构中的顶层元素触发最终的行为响应

利用事件对象里面的 stopPropagation()方法

    e.stopPropagation()

6. 事件委托（代理、委派）

6.1 事件委托

事件委托也称为事件代理， 在 jQuery 里面称为事件委派。

6.2 事件委托的原理

通常不为每个子节点单独设置事件观察者，而是将其设置在其父节点上，并通过冒泡机制影响每个子节点的配置。

6.3 事件委托的作用

我们只操作了一次 DOM，提高了程序的性能。

7. 常见的鼠标事件

7.1 常见的鼠标事件

1. 禁止鼠标右键菜单

contextmenu 主要由程序员决定何时显示上下文菜单，默认情况下会被取消

 document.addEventListener('contextmenu', function(e){

    
     e.preventDefault()
    
 })

2. 禁止鼠标选中（selectstart 开始选中）

 document.addEventListener('selectstart', function(e){

    
     e.preventDefault()
    
 })

7.2 鼠标事件对象

event 对象表示事件的状态及其相关的一系列信息集合。目前我们主要采用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent 进行操作。

8. 常用的键盘事件

8.1 常用键盘事件

注意：

1. 如果使用addEventListener 不需要加 on

2. onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。

3. 三个事件的执行顺序是： keydown -- keypress --- keyup

8.2 键盘事件对象