DOM实战基础

DOM实战基础

DOM的概念

• Document object model

• Tree of nodes/elements created by the browser

• JavaScript can be used to read/write/manipulate to the DOM

• Object Oriented Representation

• 文档对象模型

• 由浏览器创建的节点或者元素的一颗树结构

• JavaScript可以对DOM进行读写操作

• 基于对象的表示

DOM常用的API和属性

DOM的基础属性

• document.title: 标题

• document.head: head节点

• document.body: body节点

• document.all: 所有节点的集合

• document.forms: 所有表单节点集合

• document.links: 所有链接节点集合

• document.images: 所有图片节点集合

• document.getElementById(): 通过id获取元素

• document.getElementsByClassName(): 通过类名获取元素集合

• document.getElementsByTagName(): 通过标签名获取元素集合

• document.querySelector(): 类似于jQuery的$选择器函数，可以支持id、类名、标签名等，仅支持选择第一个匹配的元素

• document.querySelectorAll(): 支持选择一个集合

DOM的遍历

• Element.parentNode: 父节点
• Element.parentElement: 父元素，这个属性与parentNode大多数情况是相同的，除了父元素为Document或者DocumentFragment的情况
• Element.childNodes: 子节点集合
• Element.firstChild: 第一个子节点
• Element.firstElementChild: 第一个元素子节点，这个与firstChild节点的区别在于会过滤空格、换行符等造成的节点
• Element.lastChild: 最后一个子节点
• Element.lastElementChild: 最后一个元素子节点，同样是过滤空格、换行符等造成的节点
• Element.nextSibling: 下一个兄弟节点
• Element.nextElementSibling: 下一个元素兄弟节点，同样是过滤空格、换行符等造成的节点
• Element.previousSibling: 上一个兄弟节点
• Element.previousElementSibling: 上一个元素兄弟节点，同样是过滤空格、换行符等造成的节点

DOM元素的创建

• document.createElement(): 创建元素
• Element.className: 设置类属性
• Element.id: 设置id属性
• Element.setAttribute(): 设置属性
• document.createTextNode(): 创建文本节点
• Element.appendChild(): 追加子节点
• Element.insertBefore(newNode, referenceNode): 在引用节点前添加新的节点

DOM事件

• Element.addEventListener(): 添加事件添加
• Event.target: 事件目标
• Event.target.id, Event.target.className, Event.target.classList: 事件目标的id, class, class列表
• Event.type: 事件类型
• Event.clientX: 点击位置距离视口的横坐标
• Event.clientY: 点击位置距离视口的纵坐标
• Event.offsetX: 点击位置距离元素的横坐标
• Event.offsetY: 点击位置距离元素的纵坐标
• Event.altKey: 触发事件时是否按下Alt键
• Event.ctrlKey: 触发事件时是否按下Ctrl键
• Event.shiftKey: 触发事件时是否按下Shift键

DOM事件类型

• click: 点击事件
• dbclick: 双击事件
• mousedown: 鼠标按下
• mouseup: 鼠标松开
• mouseenter: 鼠标进入目标区域，不会冒泡并且，在后代元素上移动到当前元素不会触发(MDN参考:Similar to mouseover, it differs in that it doesn’t bubble and that it isn’t sent when the pointer is moved from one of its descendants’ physical space to its own physical space.)
• mouseleave: 鼠标离开目标区域并包括所有子元素，不会冒泡(MDN参考: Similar to mouseout, it differs in that it doesn’t bubble and that it isn’t sent until the pointer has moved from its physical space and the one of all its descendants.)
• mouseover: 鼠标经过目标区域，会冒泡
• mouseout: 鼠标离开目标区域或其中的子元素
• mousemove: 鼠标移动
• keydown: 键盘按键按下
• keyup: 键盘按键抬起
• keypress: 键盘按键按下后触发
• focus: 获得焦点触发
• blur: 丢失焦点触发
• cut: 剪切时触发
• paste: 粘贴时触发
• input: 输入时触发
• change: 内容改变时触发