DOM对象总结

查看文档信息

URL 地址

cookie 缓存

charset 编码 一般为 utf-8

 

write写入内容

document.write 页面加载过程中写入某某

 

查询页面节点

遗留DOM

document.body 返回文档中的body元素

document.documentElement 返回文档中的html元素

document.forms 返回文档中所有Form对象的引用

document.anchors

document.links

document.scripts

标准DOM

document.getElementById() 通过元素来查找元素

document.getElementsByName() 通过标签属性名来查找元素

document.getElementsByTagName() 通过标签名来查找元素

document.getElementsByClassName() 通过类名来查找元素

H5扩展

document.querySelector() 返回指定选择器的第一个元素

document.querySelectorAll() 返回指定选择器的所有元素对象集合（是一个伪数字）

 

创建各型节点

document.createElement() 用来生成HTML元素节点

document.createTextNode() 用来生成文本节点

document.createAttribute() 生成一个新的属性对象节点，并返回它

document.createDocumentFragment() 生成一个DocumentFragment对象

 

 

节点对象

节点属性

通用属性

node.nodeName 返回节点名称

node.nodeType 返回节点类型的常数值

node.nodeValue 返回Text或Comment节点的文本值

标准属性

属性操作

get.Attribute(‘属性’) 返回指定元素的属性值

get.setAttribute(‘属性，值’) 自定义属性标签

element.removAttribute(‘属性’) 移出元素属性

盒子属性

offsetLeft/offsetTop

clientWidth/clientHeight

offsetWidth/offsetHeight

scrollLeft/scrollTop

位置属性（只读）	描述
clientX	鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X轴坐标）
clientY	鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标）
pageX	鼠标指针位于文档的水平坐标（X轴坐标），IE6~8不兼容
pageY	鼠标指针位于文档的垂直坐标（Y轴坐标），IE6~8不兼容
screenX	鼠标指针位于屏幕的水平坐标（X轴坐标）
screenY	鼠标指针位于屏幕的垂直坐标（Y轴坐标）

 

节点内容

node.innerHTML 返回元素开始和结束标签之间的HTML

node.innerText 返回元素的文本内容，在返回的时候会去除HTML标签和多余空格、换行、在设置的时候会进行特殊字符转义

节点方法

属性操作

node.getAttribute() 读取指定属性

node.setAttribute() 设置指定属性

node.removeAttribute() 移除指定属性

node.hasAttribute() 返回一个布尔值，表示当前节点是否有指定的属性

查询接口

node.getElementsByTagName()

node.getElementsByClassName()

node.querySelector()

node.querySelectorAll

节点插入

node.appendChild() 将一个节点添加到指定父节点的子节点列表末尾

node.insertBefore() 将一个节点添加到父节点的指定子节点的前面

节点删除

node.removeChild() 从DOM中删除一个子节点，返回删除的节点

节点替换

node.replaceChild() 方法用新节点替换某个子节点。这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。

节点克隆

node.cloneNode(true); // 默认为false(克隆节点), true(克隆节点及其属性，以及后代)

节点检测

node.hasChildNodes() 返回布尔值，表示当前节点是否有子节点

节点边界

node.getBoundingClientRect()

关联查找

node.parentNode 当前节点的父节点

node.childNodes 获取子元素集合

node.children 返回指定节点的所有Element子节点

node.firstChild 获取父节点的父节点的第一个子节点

node.firstElementChild 返回当前节点的第一个Element子节点

node.lastChild 获取父节点的最后一个子节点

node.lastElementChild 返回当前节点的最后一个Element子节点

node.nextSibling 返回紧跟在当前节点后面的第一个兄弟节点

node.nextElementSibling 返回当前元素节点的下一个兄弟HTML元素节点

node.previousSibling 返回当前节点前面的、距离最近的一个兄弟节点

node.previousElementSibling 返回当前元素节点的前一个兄弟HTML节点

节点遍历

节点样式

style样式

node.style

node.cssText

css计算样式

window.getComputedStyle()

绑定类样式

node.className

node.classList

 

鼠标事件

 

事件名称	事件触发时机
onclick	鼠标单击左键时触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmouseover	鼠标经过时触发
onmouseout	鼠标离开时触发
onmousedown	当按下任意鼠标按键时触发
onmouseup	当释放任意鼠标按键时触发
onmousemove	在元素内当鼠标移动时持续触发

键盘事件

事件名称	事件触发时机
keypress	某个键盘按键被按下时，不识别功能键，如Ctrl、Shift、箭头等
keydown	某个键盘按键被按下时触发
keyup	某个键盘按键被松开时触发