学习内容

• WebAPI 介绍
• 获取文档元素
• 基础事件（DOM 0级事件）
• 修改元素
• 操作元素自定义属性
• 高级事件（DOM 2级事件）
• DOM 事件流
• 事件对象

一、WebAPI 介绍

• js组成：
  • ES：JavaScript 基础语法
  • DOM：把html文档当做对象
  • BOM：浏览器当做一个对象
• WebAPI：浏览器的提供的两类（DOM控制html文档和BOM控制浏览器）内置方法
• DOM & DOM 树
  • DOM
    • 描述：浏览器提供的一类操作 html 文档的方法
    • 作用：
      • 修改网页的内容、样式、结构
      • 响应用户对网页的操作
    • 用法：函数调用的方式，如：获取元素 document.getElementById('id');
  • DOM 树：
    • 描述：HTML 文档在浏览器中的存储结构
    • 组成：文档（一个页面document）、元素（所有标签element）、节点（页面所有内容node）都被看成对象
  • DOM的 API 分类：获取元素、操作元素属性、事件、操作节点

二、获取文档元素

• 通过 ID 获取元素
  • document.getElementById('id'); 通过元素 id 返回一个元素对象
• 通过标签名获取元素
  • document.getElementsByTagName('标签名')
  • 注意：返回伪数组数据，一个页面可以有多个相同标签名的元素，可以使用 .length 方法获取元素个数和 [index] 方法获取某个具体元素，不能使用其他数组内置方法

  	var element = document.getElementById('father');
  	element.getElementsByTagName('标签名')[0];
  	element.getElementsByTagName('标签名').length;
  	//可以通过**for循环**获取每一个元素
  	for(var i = 0;i<element.getElementsByTagName('标签名').length;i++){
  		element.getElementsByTagName('标签名')[i];
  	}
  

• 通过类名获取元素 & 获取 body 元素
  • document.getElementsByClassName('类名')
  • 返回伪数组数据，一个页面可以有多个相同类名的数据
  • body元素：document.body
• 通过 CSS 选择器方式获取元素
  • 获取单个语法 element.querySelector('css选择器')，得到 element 中符合 CSS 选择器要求的第一个元素
  • 获取全部语法：element.querySelectorAll('css选择器');返回所有符合 css 选择器元素的伪数组

三、事件基础（DOM 0级事件）

• 事件：当用户在某个页面元素进行某种操作（鼠标点击、划过）时，网页能够做出相应的回应
• 事件三要素：事件源、事件类型、事件处理程序
• 注册事件步骤：获取事件源、绑定事件类型、添加时间处理程序
• 注册事件语法：事件源.on事件类型 = 时间处理程序

var div = document.getElementById('div');
div.onclick = function() {
	console.log('I am div');
}

• 事件类型：

// 点击事件
var div = document.getElementById('div');
div.onclick = function() {
	console.log('点击事件');
}
var ipt = element.getElementByTagName('input')[0];
// 获得焦点事件
ipt.onfocus = function(){
    console.log('我是获得焦点事件');
}

// 失去焦点事件
ipt.onblur = function(){
    console.log('我是失去焦点事件');
}

四、修改元素

修改元素内容

• 操作元素属性步骤：① 获取需要操作的元素 ② 操作元素的属性
• 标准属性：元素自带的属性（可读可写）
• 获取语法：element.属性名
• 设置语法：element.属性名 = '属性值'
• 普通元素内容设置（div、p、span、a...）
  • element.innerHTML = '内容' 识别标签、空格 经常使用
  • element.innerText = '内容'
• 表单元素（input、textarea）：element.value = '内容'

设置元素样式

• style
  • 设置元素行内式，优先级高
  • element.style = 'css属性名1:属性值; css属性名2:属性值'
  • element.style.css属性名 = '属性值'; 设置单个样式，如果样式用 - 连接则需要用驼峰方式设置
• class
  • element.className = '类名1 类名2 类名3 设置多个样式 会刷新元素的class属性
  • element.classList 设置多个样式
    • 添加类 element.classList.add('类名1','类名2');
    • 移除类 element.classList.remove('类名1','类名2');
    • 切换类 element.classList.toggle('类名'): 以元素存在该属性删除该属性，不存在该属性就添加该属性s
• 常用属性：
  • element.scr = '属性值'
  • element.disabled = true/false
  • element.checked = true/false

五、操作元素自定义属性

能够给元素添加自定义属性、能够获取自定义属性，完成数据传递

• H5 方法（不兼容 ie6、ie7、ie8）
  • 设置语法：<p date-自定义属性名='自定义属性值'></p>属性名想叫什么就叫什么，可以用多个-连接 <p data-名称-名称 = '自定义属性值'></p>
  • 获取语法：element.dataset.自定义属性名，如果属性名用多个 - 连接，获取时应将属性名以 - 为分隔符，驼峰方式获取
• 通用方法
  • 语法：<p 自定义属性名 = '自定义属性值'></p>，属性名想叫什么就叫什么，可以用多个 - 连接 `<p 名称-名称 = '自定义属性值'>

  • 获取/设置/删除语法：element.getAttribute('属性名'),返回类型是字符串 ,element.setAttribute('属性名','属性值')，element.removeAttribute('属性名')

高级事件（DOM 2级事件）

• DOM 0级事件（on）
  • 语法：element.on + 事件类型 = 函数名/匿名函数
  • 特点：同一个元素只能注册一次某个类型的事件，多次注册，只有最后一次添加的事件有效
• DOM 2级事件（addEventListener）
  • 语法：element.addEventListener('事件类型',函数名/匿名函数)
  • 参数
    • 第一个参数：字符串，事件类型 不加on
    • 第二个参数：匿名函数/函数名（事件执行程序）
  • 特点：同一个元素能注册多个某种类型的事件，多次注册，事件触发时，会按照注册的先后顺序依次执行。
• 解除事件
  • DOM 0级事件解除
    • 语法：element.on + 事件类型 = null
  • DOM 2级事件解除
    • 语法：element.removeListener('事件类型',函数名)
    • 注意：想要解除某个事件，前提是这个事件注册时添加的事件处理函数是有名函数

七、DOM 事件流

• 定义：事件发生时会在元素节点之间按照特定的顺序播放，这个传播过程即 DOM 事件流
• DOM 事件流的三个阶段
  • 一开始从文档的根节点流向目标对象（捕获阶段）
    • 特点：在这个阶段，触发某个子元素的事件，其所有父元素上绑定的相同类型的事件都会被触发，且先执行父级事件
  • 然后在目标对象上被触发（目标阶段）
  • 最后再回复到文档的根节点（冒泡阶段）
    • 特点：在这个阶段，触发某个子元素，其所有父元素上绑定的相同类型的时间都会被触发，先执行子元素事件，再执行父级元素事件。
• 捕获事件和冒泡事件：由于一个 DOM 事件触发时只能监听事件传播的一个阶段，要么是捕获，要么是冒泡阶段
  • 捕获事件
    • 利用 addEventListener('事件类型',函数名/匿名函数,boolean) 给元素绑定事件，当第三个参数为 true，则为捕获事件，反之(false 默认)为冒泡事件
• 冒泡事件的影响：

原因：由于事件冒泡阶段具有点击某个子元素，其父元素上绑定的点击事件也会出发的特点，有时候我们需要利用这个特性，有时候要避开这个特性

• 利用：事件委托来解决
  • 例如：同时给100个 li 元素添加点击事件：遍历添加事件消耗性能多
  • 给动态生成的元素添加事件：由于事件是先绑定的，如果动态添加事件：就需要每添加一个，就绑定一次事件，消耗性能多
  • 原理：为了给子元素添加事件，可以将事件委托给父级，就是把事件绑定在父级身上，只需要绑定一次，在触发子元素的时候，由于冒泡就会触发父级元素的时间
  • 获取触发元素：event.target
• 阻止事件冒泡
  • 造成影响：父继子级绑定相同事件，但是在点击子级的时候，不希望父级的事件触发，但是由于事件冒泡会触发的事件
  • 语法：event.stopPropagation();

八、事件对象

• 概念：event 对象代表事件的状态，比如键盘的状态、鼠标的位置、鼠标按钮的状态，只有在事件执行程序中存在 event 对象
• 使用方式：
  • 直接使用 event 关键字
  • 自定义名称：需要作为事件执行函数的形参通常使用 e 或 evt

  	eventTarget.onclick = function(event) {
  	// 这个 event 就是事件对象
  	}
  	eventTarget.addEventListener('click',function(evt) {
  	// 此时 evt 就是事件的对象
  	}
  

• 事件对象常用属性
  • event.target：触发事件的元素 和 this 的区别是 this 指向绑定事件的元素
  • event.stopPropagation()：阻止事件冒泡
  • event.preventDefault()：阻止默认行为
    • 例如不让 a 标签跳转
  • 光标坐标：

  	event.clientX：光标相对于视口的横坐标
  	event.clientY：光标相对于视口的纵坐标
  	event.pageX：光标相对于文档的横坐标（包含滚动条）
  	event.pageY：光标相对于文档的纵坐标（包含滚动条）
  	event.offsetX：光标相对于绑定事件元素的横坐标
  	event.offsetY：光标相对于绑定事件元素的纵坐标