Day15_DOM课堂笔记

Day15 DOM 笔记

1 回顾

1.1 节点（元素）创建添加删除替换克隆

1. 创建元素
   document.createElement();
   
2. 添加子节点
   父元素.appendChild(新节点);
   父元素.insertBefore(新节点, 旧节点)
   
3. 删除子节点
   父元素.removeChild(要删除的节点);
   
4. 替换子节点
   父元素.replaceChild(新节点, 旧节点);
   
5. 克隆节点
   元素.cloneNode()

1.2 HTML DOM

1. 表单相关元素
   1.1 form 元素： submit() reset()
   1.2 输入框元素和文本域元素： blur() focus() select()
   1.3 select 元素： length value selectedIndex add()  remove()
   
2. 表格相关元素
   1.1 table 元素： rows	insertRow()  deleteRow()
   1.2 tr 元素： cells	rowIndex insertCell()  deleteCell()
   1.3 td 元素： cellIndex
   
3. 快速创建元素
   new Option(text, value)
   new Image(width, height)

1.3 document

documentElement
body
head
all
URL
domain
referrer
lastModified
title

write()
getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
querySelector()
querySelectorAll()

1.4 事件的监听

1. 给元素监听事件
   1.1 事件作为HTML标签的属性
   1.2 事件作为元素对象的方法
   1.3 使用 addEventListener()

2. 解除事件监听
   2.1 前两种方式监听的事件
       给元素对象重新设置事件，值设置为 null
   2.2 addEventListener() 监听的事件
       removeEventListener()

2 事件流

事件的触发过程被分为 3 个阶段：

捕获阶段： 从 window、document、html、body 一直向下，找到目标元素。

目标阶段： 找到目标元素，意味着捕获阶段的结束，冒泡阶段的开始。

冒泡阶段： 从目标元素一直层层向上，是捕获阶段的逆向过程。 事件默认在冒泡阶段触发！

注意：

1. 把事件触发过程只分为捕获阶段和冒泡阶段，这种说法也可以。
2. addEventListener() 方法的第三个参数可以设置事件在捕获阶段触发还是冒泡阶段触发： true 表示捕获阶段触发，fasle 表示冒泡阶段触发，false 是默认值。

3 事件的回调函数中 this 的指向

1. 函数中使用 this，谁调用该函数，this 就指向谁
2. 事件的回调函数是触发事件的元素调用的，所以事件回调函数中的this指向触发事件的元素。
3. 触发事件的元素不一定是目标元素，事件要想在该元素上触发，该元素必须监听事件。

4 常用事件总结

4.1 鼠标事件

click			单击
dblclick		双击
contextmenu		右击
mousedown		鼠标按键按下
mouseup			鼠标按键抬起
mousemove		鼠标移动
mouseover		鼠标进入元素， 建议使用 mouseenter
mouseout		鼠标离开元素， 建议使用 mouseleave
mouseenter		鼠标进入元素
mouseleave 		鼠标离开元素

4.2 键盘事件

keydown			键盘按键按下
keyup			键盘按键抬起
keypress		键盘按键按下，只有可输入按键（字母、标点）才能触发；组合按键会只触发一次。

哪些元素可以监听键盘事件？
1. document
2. 输入框或文本域

4.2 文档事件

load				文档加载完毕
DOMContentLoaded	文档加载完毕
beforeunload		文档关闭之前

哪些元素可以监听文档事件？
1. window
2. body 元素
3. img 元素可以监听 load 事件

load 事件与 DOMContentLoaded 事件的区别？
1、 DOMContentLoaded 只有等到页面中元素加载完毕局可以触发事件。
    load 事件需等到页面中所有一切加载完毕，包括外部文件，才能触发事件
2、 DOMCOntentLoaded 只能使用 addEventListener() 方法监听。