js词典

1、querySelector() 方法，获取元素

1、 querySelector() 方法，获取元素
单词解析：query 英 /'kwɪərɪ/ 查选
Selector 英 /sɪ’lektə/选择器
查询选择器(querySelector)
document.querySelector(“div”);根据选择器获取一个DOM元素，多则第一个DOM元素
// 根据选择器获取一个DOM元素,如果有多个,就获取第1个
选择器有 标签名选择器、类名选择器、ID名选择器、属性选择器
伪类选择器和伪类元素不能使用

**案例：加深理解获取文档中第一个 <p> 元素：
多个p标签

获取文档中 class="example" 的第一个元素:
document.querySelector(".example");

2、addEventListener() 方法，添加侦听

添加，事件，侦听
在用户点击按钮时触发监听事件：
document.getElementById(“myBtn”).addEventListener(“click”, displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。

element.addEventListener(啥事件“”, 干啥，让谁做, 事件的按个阶段做（冒泡做还是捕获做）);

根据根元素向下找，这个过程叫捕获
目标元素向上传这个过程叫做冒泡阶段（系统默认是false 也就是冒泡阶段）

事件的思路就要看 节点树去理解，依次进行和传递获取