Web前端开发学习笔记09--Web API：DOM

1、DOM 基础

DOM 简介：

• 定义：文档对象模型，是处理可扩展编辑语言的标准编程接口，通过 DOM 接口可以改变网页的内容、结构和样式
• 一个页面就是一个文档，DOM 中用 document 表示
• 页面中的所有标签就是都是元素，DOM 中用 element 表示
• 网页中的所有内容都是节点，DOM 中用node 表示
• 获取过来的 DOM 元素都是一个对象

1.1 获取元素

• 根据 ID 获取

var timer = document.getElementById('id');

• 根据标签名获取：以伪数组形势存储的元素对象的集合

var timer = document.getElementByTagName('标签名');  
// 父元素必须是单个对象（必须指明），获取的时候不包括父元素自己

• 根据类名获取：返回元素对象集合

var li = document.getElementByClassName

• 根据选择器：返回指定选择器的第一个元素对象

var dh = document.querySelector('.box');  //类选择器

var nav = document.querySelector('#nav')  //id选择器

var all = document.querySelectorAll('box') //所有box

• 获取特殊元素

1、document.body              //获取body元素
2、document.documentElement   //获取html元素

1.2 事件

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

执行步骤：1、获取事件源 2、注册事件 3、添加事件处理程序

<button> id="btn">按钮</button>
<script>
//1、获取事件源 事件别触发对象
var btn = document.getElementById('btn');
//2、注册事件 触发的方式：onclick
//3、添加事件处理程序
btn.onclick = function() {
  .....
}
</script>

• 常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

1.3 操作元素

• 改变元素内容

element.innerText  // 从起始位置到终止位置的内容，不识别 html 标签，同时空格和换行也会去掉

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

• 修改元素属性：如src、href、id、alt、title 等

btn.onclick = function() {
  img.src = 'XXXXX';   //改变图片路径
}

• 修改表单属性：type、value、checked、selected、disabled 等

<button>按钮</button>
<input type="text" value="内容">
<script>
var btn = document.querySelector('button');
var input = document.querySelecttor('input');
btn.onclick = function() {
  input.value = '修改的内容'; // 实现修改内容
  this.disabled = true; // 禁用
}
</script>

• 修改样式属性

JS里面的样式采取驼峰命名法

1、element.style     //行内样式操作产生行内样式，css 权重比较高
2、element.className //类名样式操作：直接更改元素的类名，覆盖原先的类名

-排他思想：1、所有元素清除样式 2、给当前元素设置样式

• 自定义属性操作：自定义属性以 ‘data-’ 开头作为属性名

获取元素：

element.属性;                   //获取内置属性值
element.getAttribute('属性');   //主要获取自定义属性
element.dataset.属性;           //自定义属性

设置属性值：

element.属性 = '值';          //内置属性值
element.setAttribute('属性','值'); //自定义属性

移除属性：

element.removeAttribute('属性');

1.4 节点操作

节点至少拥有nodeType、nodeName 和 nodevalue 三个基本属性

1. 元素节点 nodeType 为1
2. 属性节点 nodeType 为2
3. 文本节点 nodeType 为3

• 节点层级

父子节点	含义
node.parentNode	父级节点
parentNode.childNode	返回包括指定节点的子节点集合，包括元素、文本节点
parentNode.children	子节点，返回子元素节点
parentNode.firstChild	返回第一个子节点，包含元素和文本节点（IE9+）
parentNode.firstElementChild	返回第一个子元素节点
parentNode.lastChild	返回最后一个子节点
parentNode.lastElementChild	返回最后一个子元素节点（IE9+）

兄弟节点	含义
node.nextSibling / node.previousSibling	返回当前元素的下一个兄弟节点，包括所有节点
node.nextElementSibling	下一个兄弟元素节点（IE9+）
node.previousElementSibling	上一个兄弟元素节点（IE9+）

解决兼容性问题：

function() {
  var el = element;
  while (el = el.nextSibling) {
    if (el.nodeType ===1) {
      return el;
    }
  }
  return null;
}

• 创建 、添加节点

方法	说明
document.createElement(‘tagName’)	原先元素不存在，由 tagName 指定 HTML 元素，故为动态创建节点
node.appendChild(Child)	将一个节点添加到指定父节点的子节点的列表末尾
node.insertBefore(child,指定元素)	将一个节点添加到父元素的指定子节点的前面

• 删除、复制节点

方法	说明
node.removeChild(child)	从 DOM 中删除一个子节点，返回删除的节点
node.cloneNode()	返回该方法的节点的一个副本，括号为空或 false 是浅拷贝，只复制标签；为 true 是深拷贝，复制节点本身以及节点里面左右的子节点

• 三种动态创建元素区别

方法	区别
document.write	直接将内容分写入羽绒棉，但当文档执行完毕，会导致页面重绘
element.innerHTML	创建多个元素效率更高（采取数组形式拼接）
document.createElement()	创建多个元素效率低一些，但结构更清晰

2、DOM 重点核心

2.1 注册事件（绑定事件）

• 传统注册方式

利用 on 开头的事件，如 onclick：btn.onclick = function() {}

注册事件的唯一性：同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

• 方法监听注册方式：addEventListener 监听方式

evenTarget.addEventListener(type，listener[, useCapture])   
// 将指定的监听器注册到evenTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数

参数：

type：事件类型字符串，比如 click、mouseover 等
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，一个布尔值，默认是 false

特点：同一个元素同一个事件可以注册多个监听器，按注册顺序执行（IE9+，IE9以前用 attachEvent() 代替）

• attachEvent 监听方式

eventTarget.attachEvent(eventNameWithOn,callback)

参数：

eventNameWithOn：事件类型字符串，比如 onclick、onmouseover 等
callback：事件处理函数，当目标触发事件时回调函数被调用

2.2 删除事件（解绑事件）

• 传统方式

eventTarget.onclick = null;

• 方法监听方式

1、eventTarget.removeEventListener(type,listener[,useCapture]); // 事件处理函数不能为匿名函数
2、eventTarget.detachEvent(eventNameWithOn,callback);

2.3 DOM 事件流

事件流描述的是从页面中接受事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

1. 事件捕获：由 DOM 最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程

2. 事件冒泡：事件开始时有最具体的元素接收，然后逐级向上传播到 DOM最顶层节点的过程

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

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

5. 如果addEventListener 第三个参数是 true，表示在事件捕获阶段调用事件处理程序；如果是 false ，表示在事件冒泡阶段调用处理程序

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

7. 有些事件没有冒泡，如 onblur、onfocus、onmouseenter、onmouseleave

2.4 事件对象

• 什么是事件对象：event 对象代表事件的状态，比如鼠标的位置

事件发生后，跟事件相关的一系列信息数据的集合都被放到这个对象里面，这个对象就是事件对象 event，它有很多属性和方法。

<div></div>
<script>
  var div = document.querySelector('div');
  div.onclick = function(event) {}
  // 1、event 就是一个事件对象，当形参来看
  // 2、事件对象只有有了事件才会存在，系统自动创建，不需要我们传递参数
  // 3、事件对象是事件的一系列相关数据的集合，比如鼠标点击里面包含了鼠标的相关信息
  // 4、事件对象也可以自己命名
  // 5、兼容性问题：IE678 通过 window.event ，
</script>

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

事件对象属性方法	说明
e.target	返回触发事件的对象 / 元素（标准）
e.srcElement	返回触发事件的对象（IE6~8）
e.type	返回事件类型，比如 click，不带 on
e.cancelBubble	该属性阻止冒泡（IE6~8）
e.returnValue	该属性阻止默认事件（IE6~8），比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（标准，如不让链接跳转
e.stopPropagation()	阻止冒泡（标准）

1. e.target 和 this 的区别：e.target 返回的是触发事件的元素，this 返回绑定事件的元素
2. return false 也可以阻止默认行为（仅限于传统注册方式）

2.5 阻止事件冒泡

• 标准写法

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

• 阻止事件冒泡的兼容性方案

if (e && e.stopPropagation) {
  e.stopPropagation();
}else {
  window.event.cancelBubble = ture;
}

2.6 事件委托

• 原理：监听事件设置在其父节点上，然后利用冒泡原理影响设置的每个子节点

实现案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，事件会冒泡到 ul 上，ul 有注册事件，救护触发事件监听器

var ul = document.querySelector('ul');
ul.addEventListener('click',function(e){
  e.target.style.backgroundColor = 'red'; // 此操作会让 ul 中的 li 背景变红
})

2.7 常用的鼠标事件

• 鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

• 鼠标事件对象：MouseEvent

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的 X 坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的 Y 坐标
e.pageX	返回鼠标相对于文档页面的 X 坐标（IE9+）
e.pageY	返回鼠标相对于文档页面的 Y 坐标（IE9+）
e.srceenX	返回鼠标相对于电脑屏幕的 X 坐标
e.srceenY	返回鼠标相对于电脑屏幕的 Y 坐标

• 键盘事件

注意：
1、如果使用 addEventListener 不需要加 on
2、三个事件执行顺序是：keydown — keypress — keyup

键盘事件	说明
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发，但它不能识别 功能键

• 键盘事件对象

注意：onkeydown 和 onkeyup 不区分大小写字母，onkeypress 区分大小写字母

键盘事件对象属性	说明
keyCode	返回该键的 ASCII 值

• 禁止鼠标右键菜单

contextmenu 主要控制应该何时访问上下文菜单，主要用于取消默认的上下文菜单

document.addEventListener('contextmenu',function(e) {
  e.preventDefault;
})

• 禁止鼠标选中文字

selectstart ：开始选中

document.addEventListener('selectstart',function(e) {
  e.preventDefault;
})