DOM

DOM 是一项 W3C (World Wide Web Consortium) 标准，HTML DOM 是 HTML 的标准对象模型和编程接口。

HTML DOM

• 作为对象的 HTML 元素
• 所有 HTML 元素的属性
• 访问所有 HTML 元素的方法
• 所有 HTML 元素的事件

DOM 导航节点树

• DOM 根节点

  • document.body - 文档的 body
  • document.documentElement - html

• 节点导航

  属性	描述	属性	描述
  parentNode	父节点	childNodes[nodenumber]	子节点
  firstChild	第一个子节点	lastChild	最后一个子节点
  nextSibling	下一个兄弟节点	previousSibling	前一个兄弟节点

• nodeName

  规定节点的名称

  • 元素节点的 nodeName 等同于标签名
  • 属性节点的 nodeName 是属性名称
  • 文本节点的 nodeName 总是 #text
  • 文档节点的 nodeName 总是 #document

• nodeValue

  节点的值

  • 元素节点的 nodeValue 是 undefined
  • 文本节点的 nodeValue 是文本文本
  • 属性节点的 nodeValue 是属性值

• nodeType

  节点的类型

  类型	节点	类型	节点	类型	节点	类型	节点	类型	节点
  元素	1	属性	2	文本	3	注释	8	文档	9

获取元素节点

方法	描述
document.getElementById(id)	通过 id 来查找
document.getElementsByClassName(class)	通过类名来查找
document.getElementsByName(name)	通过 name 属性来查找
document.getElementsByTagName(tagName)	通过标签名来查找
document.querySelector()	查找符合规则的第一个元素
document.querySelectorAll()	查找符合规则的所有元素

查找元素与节点

• 查父元素
  • 当前元素.parentElement 父节点
  • 当前元素.parentNode 父元素 符合 W3C 标准
• 查子元素
  • 当前元素.children 子元素
  • 当前元素.childNodes 子节点 符合 W3C 标准
• 同级元素
  • 上一个元素
    • 当前元素.previousElementSibling 元素
    • 当前元素.previousSibling 节点
  • 下一个元素
    • 当前元素.nextElementSibling 元素
    • 当前元素.nextSibling 节点

元素和节点的区别

元素是节点的一种类型，它表示 DOM 树中的单个节点。而节点不仅可以是元素，还可以是注释、文档、文本节点等。

新增元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.createTextNode(文本)	创建文本节点
element.appendChild(新元素)	后添加
element.insertBefore(新元素，子元素)	前添加
document.write(text)	写入 HTML 输出流

删除元素

方法	描述
document.removeChild(element)	删除 document 下的元素
element.remove()	删除该元素自身旧浏览器中不起作用

替换元素

方法	描述
document.replaceChild(element)	替换元素

克隆元素

方法	描述	参数
element.cloneNode()	克隆元素	true 会克隆标签间一切内容 false 时只会克隆标签及标签上的属性，标签内容不会克隆

元素属性

• 标准属性
  • 元素.属性名
• 自定义属性
  • getAttribute(property) 获取
  • setAttribute(property,value) 设置
  • removeAttribute(property) 移出
  • element.dataset 自定义属性值

事件

事件	描述	事件	描述
click	点击	dblclick	双击
blur	失去焦点	focus	获取焦点
mouseover	鼠标移入	mousemove	鼠标移动
mouseout	鼠标移出	mousedown	鼠标按下
mouseup	鼠标松开	keydown	键盘按下
keypress	键盘按下或按住	keyup	键盘松开
change	改变域的内容	load	页面和图像被完成加载
error	加载文档或图像时发生错误	abort	图像视频加载中被中断
unload	退出页面	resize	窗口变化
select	文本被选定	reset	重置按钮被点击
submit	提交按钮被点击	...	...

事件绑定

• 赋值语句绑定

  element.onEvent = function(){}
  // 传递参数
  <button onclick="clickValue(2)">点击</button>
  function clickValue(value){}
  

• 事件监听函数

  // useCapture 指定使用事件冒泡还是事件捕获
  // 默认值是 false，将使用冒泡传播。 true，则事件使用捕获传播。
  element.addEventListener(event,function,useCapture)
  

  • 冒泡

    最内侧元素的事件会首先被处理，然后是更外侧的

  • 捕获

    最外侧元素的事件会首先被处理，然后是更内侧的

• 调用附加事件

  // 主流浏览器都不支持
  element.attachEvent(onEvent, function () {});
  

事件解绑

• 赋值方式解绑

  element.onEvent = null;
  

• 事件监听函数

  element.removeEventListener(onEvent,function)
  

• 附加事件解绑

  element.detachEvent(onEvent,function)
  

事件冒泡

当子元素接收到事件的时候，会把事件传递给自己的父组件，一直到 window

• 阻止事件冒泡
  • ev.stopPropagation()
  • ev.cancelBubble = true

定时事件

JavaScript 可以在时间间隔内执行。称为定时事件（ Timing Events）

// 等待指定的毫秒数后执行函数
setTimeout(function, milliseconds)
// 在指定的毫秒间隔中持续重复执行该函数
setInterval(function, milliseconds)
// 清除定时器
clearTimeout(timeoutVariable)
clearInterval(timerVariable)