这是我参与「第四届青训营 」笔记创作活动的第3天

DOM API

• 名词解释：

  • 文档：整个页面的html
  • 元素：所有标签都称为元素（如p、a）
  • 节点：DOM树上的所有内容都可以称为节点（包括标签、属性、文本、注释等）

事件

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

• 事件源：通过获取并选择元素获取被触发的元素

• 事件类型：表示被触发的方式

  • 常用鼠标事件

事件	触发条件
click	鼠标左键点击
mouseover	鼠标经过（冒泡）
mouseenter	鼠标经过（不冒泡）
mouseout	鼠标离开（冒泡）
mouseleave	鼠标离开（不冒泡）
focus	得到焦点
blur	失去焦点
mousemove	鼠标移动
mouseup	鼠标弹起
mousedown	鼠标按下
selectstart	鼠标开始选择文字

• 常用键盘事件

事件	触发条件
keyup	某个键被弹起
keydown	某个键被按下（执行顺序在press之前）
keypress	按下触发，但不识别功能键功能键（ctrl, shift, 箭头等）

• 事件处理程序：注册事件并添加事件处理程序的方法

注册事件

• old fashioned

  btn.onclick = function() {
      alert('clicked');
  }
  

  • 特点：注册事件唯一，最后一个会覆盖前面的

• recommend

  btn.addEvenListener('click',function{
                      alert('clicked');
                      })
  

  • 特点：可以添加多个监听器，会轮流执行所有处理函数

• 可以添加第三个参数，其值默认为false，表示采取冒泡模式；也可传入true，表示采取捕获模式

删除事件

• 对应第一种注册方式

  btn.onclick = null;
  

• 对应第二种注册方式(要求不能使用匿名函数注册)

  function solve(){
      ...
  }
  btn.addEventListener('click',solve);//注册
  btn.removeEventListener('click',solve);//删除
  

事件流

• 捕获阶段：从document元素开始向下找事件源
• 冒泡阶段：从事件源向上到document
• 在冒泡或捕获过程中路径上被注册的相同事件都会执行
• 部分事件不会冒泡，如onblur,onfocus,onmouseenter,onmouseleave

事件对象

btn.addEventListener('click',function(event){})

• 事件对象：侦听函数形式上的形参event

• 注意：

  • 事件对象并非传入的参数，而是系统自动创建的一个对象
  • 事件对象event包含了事件相关的一系列数据

常用属性

属性名	说明
event.target	返回触发事件的对象(元素)
event.type	返回事件类型(如click,mouseover等)
event.preventDefault()	阻止默认行为
event.preventPropogation()	阻止冒泡

• 注意：

  • 区分event.target和this，前者返回触发事件的对象，后者返回绑定事件的对象

    • 例如：对点击事件，this总是返回绑定事件的对象，而event.target返回的是被点击的对象

鼠标事件对象

• 获取坐标：（坐标以左上角为零点）

  属性名	说明
  event.clientX/Y	鼠标相对于浏览器可视区域的XY坐标
  event.pageX/Y	鼠标相对于文档的XY坐标
  event.screenX/Y	鼠标相对于电脑屏幕的XY坐标

键盘事件对象

• 获取按下的键盘内容

  属性名	说明
  event.keycode	获取键盘输入的ASCII码值(keyup,keydown事件不去分大小写，keypress区分)

事件委托

• 原理：将一个父节点下子元素注册事件修改为直接给父元素注册事件，通过冒泡达到相同目的
• 优点：减少对DOM的操作，提高效率

DOM操作

获取并选择元素

• document.querySelector('arg'):

  • arg1为一个css形式的选择器
  • 会选择选择html文档中第一个满足该选择器的元素

• document.querySelectorAll('arg')

  • 会返回一个包含所有满足arg选择器的元素的数组

• 获取body对象：document.body

• 获取html对象：document.documentElement

• 节点获取（根据相对位置）：

  • node.parentNode父节点
  • node.childNodes所有的子节点（包括元素、文本、样式）
  • node.children所有的元素节点

修改内容

• 常用DOM对象成员（均可读写）：

  • element.innerText：表示element内的内容（不识别HTML标签，若更换的内容包含HTML标签，会直接显示标签）

  • element.innerHTML: 更改element内的内容，识别HTML标签

    • 读取时会去掉换行和空格

  • element.value: 表单内的文字内容（如输入框）

插入节点

• 创建节点：document.createElement('tagname')
• 添加节点(通过父节点)：node.appendChild(child)

删除

• 删除孩子：removeChild(child)

自定义属性操作

• setAttribute()
• getAttribute()
• removeAttribute()