JavaScript知识点笔记（三）

DOM：（DOM的元素对象获取的方法可以在MDN内查询到）

文档对象模型（Document Object Model 简称DOM），是一个编程接口。
console.dir 打印返回的元素对象 更好的查看里面的属性和方法

HTML5新增的方法获取
1.document.getElementsByClassName(‘类名’); //根据类名返回元素对象集合
2.document.querySelector(‘选择器’); //根据指定选择器返回第一个元素对象
3.document.querySelectorAll(‘选择器’); //根据指定选择器返回

获取特殊元素（body，html）
获取body元素：
document.body //返回body元素对象
获取html元素：
document.documentElement //返回html元素对象

事件三要素：事件源、事件类型、事件处理程序

如：
(1)事件源 事件被触发的对象 按钮
var btn = document.getElementById(‘btn’);
(2)事件类型 如何触发 鼠标点击(onclick)
(3)事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() {
}

执行事件的步骤
1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值的形式）

操作元素
1.改变元素的内容
element.innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

在函数里面使用this，this的含义是指向函数的调用者

常见元素的属性操作
1.innerText、innerHTML改变元素内容
2.src、href
3.id、alt、title

表单元素的属性操作
利用DOM可以操作如下表单元素的属性：
type、value、checked、selected、disabled

样式属性操作
通过JS修改元素的大小、颜色、位置等样式
1.element.style 行内样式操作
2.element.className 类名样式操作

注意：
1.如果样式修改较多，可以采取操作类名方式更改元素样式。
2.class 因为是个保留字，因此使用className来操作元素类名属性
3.className 会直接更改元素的类名，会覆盖原先的类名。（如果需要保留原先的类名不被覆盖，可以使用多类名选择器操作，方法与后代选择器一样，多个类名选择器进行分开中间用空格）

鼠标经过事件：onmouseover
鼠标离开事件：onmouseout

键盘事件：
onkeyup: 某个键盘按键被松开时触发
onkeydown: 某个键盘按键被按下时触发
onkeypress： 某个键盘按键被按下时触发 不识别功能键
键盘事件对象中的keyCode属性可以得到相应键的ASCII码值

自定义属性的操作
1.获取属性值
element.属性 获取属性值
element.getAttribute(‘属性’);
区别：
element.属性 获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’); 主要获得自定义的属性（标准）

2.设置属性值
element.属性 = ‘值’ 设置内置属性值
element.setAttribute(‘属性’,’值’);
区别：
element.属性 设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性（标准）

3.移除属性
element.removeAttribute(‘属性’);

H5自定义属性
目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’)获取
H5新增自定义属性
1.设置H5自定义属性
H5规定自定义属性data-开头为属性名并且赋值。
比如<div data-index = “1”></div>
或者使用JS设置
element.setAttribute(‘data-index’,2)

2.获取H5自定义属性
兼容性获取element.getAttribute(‘data-index’);
H5新增element.dataset.index 或者 element.dataset[ ‘index’ ] ie 11才开始支持

节点操作

节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
一般的，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点 nodeType为 1
属性节点 nodeType为 2
文本节点 nodeType为 3（文本节点包含文字、空格、换行等）
实际开发中，节点操作主要操作的是元素节点

节点层级
1.父级节点（常用）
node.parentNode
parentNode属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null

2.子节点（常用）
①parentNode.childNodes (标准)
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理，所以不提倡使用childNodes

②parentNode.children (非标准)(该属性浏览器的各个版本兼容,实际开发常用)
parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（重点）

③parentNode.firstChild
firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

④parentNode.lastChild
lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

⑤parentNode.firstElementChild（兼容性问题，IE9以上支持）
firstElementChild返回第一个子元素节点，找不到则返回null。

⑥parentNode.lastElementChild（兼容性问题，IE9以上支持）
lastElementChild返回最后一个子元素节点，找不到则返回null。
对于⑤⑥的解决方法：
如果想要得到第一个子元素节点，可以使用parentNode.children[0]（采用②的方法后面跟着数组索引号即可，实际开发写法）

3.兄弟节点
①node.nextSibling
nextSibling返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

②node.previousSibling
previousSibling返回当前元素上一个兄弟节点，找不到返回null。同样，也是包含所有的节点。

③node.nextElementSibling（兼容性问题，IE9以上支持）
nextElementSibling返回当前元素下一个兄弟的元素节点，找不到则返回null。

④node.previousElementSibling（兼容性问题，IE9以上支持）
previousElementSibling返回当前元素上一个兄弟的元素节点，找不到则返回null。
对于③④的解决方法：
封装一个兼容性的函数
Function getNextElementSibling(element) {
Val el = element;
While (el = el.nextSibling) {
If(el.nodeType === 1) {
Return el;
}
}
Return null;
}

4.节点操作
①创建节点
document.createElement(‘tagName’)
document.createElement()方法创建由tagName指定的HTML元素，称为动态创建元素节点。

②添加节点
1.node.appendChild(child)
node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素，相当于数组中的push（）方法。
2.node.insertBefore(child,指定元素)
node.insertBefore()方法将一个节点添加到父节点的指定子节点前面，类似于css里面的before伪元素。

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

④复制节点（克隆节点）
node.cloneNode()
node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
注意：
1.如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
2.如果括号参数为true，则是深拷贝，会复制节点本身以及里面所有的子节点。

注册事件（绑定事件）

传统注册方式：
利用on开头的事件onclick
<button onclick= “alert(‘hi~’)”></button>
btn.onclick = function() {}
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

方法监听注册方式：（ie9以上支持）
特点：同一个元素同一个事件可以注册多个监听器，将注册顺序依次执行
addEventListener事件监听方式
eventTarget.addEventListener(type,listener[ , userCapture ])
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就是执行事件处理函数。

该方法接收三个参数：
type：事件类型字符串，比如click、mouseover，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
userCapture：可选参数，是一个布尔值，默认是false。

删除事件（解绑事件）
传统注册方式：
eventTarget.onclick = null;
方法监听注册方式：
eventTarget.removeEventListener（type，listener[，useCapture]）;

DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
注意：
1.JS代码只能执行捕获或者冒泡其中的一个阶段
2.onclick和attachEvent只能的到冒泡阶段
3.addEventListener(type,listener[ , userCapture ])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序;如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
4.实际开发中常用事件冒泡
5.有些事件没有冒泡，比如：onblur、onfocus、onmouseenter、onmouseleave

事件对象：
eventTarget.onclick = function(event){}
eventTarget.addEventListener(‘click’,function(event) {})
//这个event就是事件对象，可以写成e或者evt
事件对象：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面
event是个形参，系统设置为事件对象，不需要传递实参
注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

阻止事件冒泡

阻止事件冒泡的两种方式
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。

阻止事件冒泡
标准写法：利用事件对象里面的stopPropagation()方法
e.stopPropagation(); // stop 停止 Propagation 传播
非标准写法：IE6-8利用事件对象cancelBubble属性
e.cancelBubble = true; // cancel 取消 Bubble 泡泡

事件委托

事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。