浏览器 DOM

55 阅读12分钟

Document

文档属性

#以一个元素对象返回一个文档的文档元素                         
document.documentElement   

#可返回当前文档的 URL                             
document.URL

#可返回文档的编码                                      
document.inputEncoding 

#返回与文档相关的文档类型声明(Document Type Declarationdocument.doctype                                        

文档方法

#方法返回文档中匹配指定 CSS 选择器的一个元素
document.querySelector(CSS selectors)

#返回文档中匹配的CSS选择器的所有元素节点列表
document.querySelectorAll()

#返回类名的元素集合
document.getElementsByClassName(classname) 

#返回对拥有指定 ID 的第一个对象的引用            
document.getElementById(elementID) 

#返回name属性值的集合                     
document.getElementsByName(name) 

#返回带有指定标签名的对象的集合                      
document.getElementsByTagName(tagname) 

#用于向文档添加事件句柄             
document.addEventListener(event, function, useCapture)

#通过指定名称创建一个元素
document.createElement(nodename)  

#创建文本节点                    
document.createTextNode(text) 

#向文档写 HTML 表达式 或 JavaScript 代码                                            
document.write() 

#用于创建一个指定名称的属性,并返回Attr 对象属性                                 
document.createAttribute(attributename)  

#可创建注释节点               
document.createComment(text) 

#创建了一虚拟的节点对象,节点对象包含所有属性和方法,操作dom的效率高
document.createDocumentFragment()

Element

元素属性

#返回元素的一个子节点的数组
element.childNodes

#设置或返回元素的class属性
element.className

#返回元素的宽度(不计算margin和border的值)
element.clientWidth

#返回元素的高度(不计算margin和border的值)
element.clientHeight

#返回元素的宽度,包括边框和填充,但不是边距
element.offsetWidth

#返回,任何一个元素的高度包括边框和填充,但不是边距
element.offsetHeight

#返回当前元素的相对水平偏移位置的偏移容器
element.offsetLeft

#返回当前元素的相对垂直偏移位置的偏移容器
element.offsetTop

#返回元素的偏移容器
element.offsetParent

#返回元素的整个宽度(包括带滚动条的隐蔽的地方)
element.scrollWidth

#返回整个元素的高度(包括带滚动条的隐蔽的地方)
element.scrollHeight

#返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollLeft

#返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollTop

#返回元素的第一个子节点
element.firstChild

#设置或者返回元素的 id
element.id

#设置或者返回元素的内容
element.innerHTML

#可返回文档的最后一个子节点
node.lastChild

#返回该元素紧跟的一个节点
element.nextSibling

#返回元素的标记名(大写)
element.nodeName

#返回元素的节点类型
element.nodeType

#返回元素的节点值
element.nodeValue

#可返回某节点的父节点
node.parentNode

#返回某个元素紧接之前元素
element.previousSibling

#设置或返回元素的样式属性
element.style

#设置或返回元素的title属性
element.title

元素方法

#事件监听器
element.addEventListener(event, fn, false)

#移除由 addEventListener() 方法添加的事件句柄
element.removeEventListener()

#为元素添加一个新的子元素
node.appendChild(node)

#添加指定的类值
Element.classList.add(str)

#删除指定的类值
Element.classList.remove(str)

#按集合中的索引返回类值
Element.classList.item(number)

#切换class的值
Element.classList.toggle(str)

#检查元素的类属性中是否存在指定的类值
Element.classList.contains(str)

#克隆某个元素
node.cloneNode(deep)

#获取元素焦点
HTMLElementObject.focus()

#失去元素焦点
HTMLElementObject.blur()

#通过名称获取属性的值
element.getAttribute(attributename)

#从当前元素中通过名称获取属性节点
element.getAttributeNode(attributename)

#返回带有指定标签名的对象的集合
element.getElementsByTagName(tagname)

#返回类名的集合
element. getElementsByClassName(classname)

#判断是否存在某个属性名,返回boolean
element.hasAttribute(attributename)

#判断是否存在属性,返回boolean
node.hasAttributes()

#判断是否有子节点,有返回true
node.hasChildNodes()

#判断文档或元素是否获取焦点,返回boolean
element.hasFocus()

#可在已有的子节点前插入一个新的子节点
node.insertBefore(newnode,existingnode)

#返回匹配指定 CSS 选择器元素的第一个子元素
element.querySelector()

#从元素中删除指定的属性
element.removeAttribute()

#删除指定属性节点并返回移除后的节点
element.removeAttributeNode()

element.removeChild() #删除一个子元素

element.replaceChild() #替换一个子元素

element.setAttribute() #设置或者改变指定属性并指定值

element.setAttributeNode() #设置或者改变指定属性节点

element.getBoundingClientRect() #方法返回元素的大小及其相对于视口的位置

Node

节点属性

node.baseURI #是只读属性,返回一个节点的绝对基址 URL

node.baseURIObject #返回一个代表当前节点(通常是文档节点或元素节点)的基URL的nsIURI对象.该属性类似与Node.baseURI,只是它返回的是一个包含更多信息的nsIURI对象,而不只是一个URL字符串.

node.childNodes #返回包含指定节点的子节点的集合,该集合为即时更新的集合(live collection)

node.firstChild #只读属性返回树中节点的第一个子节点,如果节点是无子节点,则返回 nullNode.isConnected

Node.lastChild

Node.nextSibling

Node.nodeName

Node.nodeType #属性可用来区分不同类型的节点, 1、元素节点就是标签,3、文本节点,8、注释节点

Node.nodeValue

Node.ownerDocument 

Node.parentNode 

Node.parentElement 

Node.previousSibling 

Node.textContent #属性设置或者返回指定节点的文本内容

node.attributes #返回指定节点属性的集合

节点方法

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

Node.cloneNode()

Node.compareDocumentPosition()

Node.contains()

Node.getRootNode()

Node.hasChildNodes()

Node.insertBefore()

Node.isDefaultNamespace()

Node.isEqualNode()

Node.isSameNode()

Node.lookupPrefix()

Node.lookupNamespaceURI()

Node.normalize()

Node.removeChild()

Node.replaceChild()

Attribute

#返回属性名称
attr.name

#设置或者返回属性值
attr.value

Event

event对象

#返回其事件监听器触发该事件的元素
currentTarget

#返回触发此事件的元素(事件的目标节点)
target

#阻止事件的默认行为(IE event.returnValue=false)
event.preventDefault()

#判断ie和其他浏览器的事件对象
e ? e : window.event

#目标元素(IE event.srcElement)
event.target

#阻止事件冒泡(IE event.cancelBubble=true)
event.stopPropagation()

#允许在目标事件中注册监听事件(IE8 = attachEvent())
target.addEventListener(type,callback,false)

#删除使用addEventListener() 方法添加的事件(IE8 = detachEvent())
target.removeEventListener()

#允许发送事件到监听器上 (IE8 = fireEvent())
dispatchEvent()

鼠标事件

#左键点击事件
onclick

#右键点击事件
oncontextmenu

#左键双击事件
ondblclick

#鼠标左键按下时触发事件
onmousedown

#鼠标按键被松开时触发事件
onmouseup

#当鼠标指针移动到元素上时触发事件。不支持冒泡
onmouseenter

#当鼠标指针移出元素时触发事件。不支持冒泡
onmouseleave

#鼠标被移动时触发事件
onmousemove

#鼠标移到某元素之上时触发事件,子元素也会触发
onmouseover

#鼠标从某元素移开时触发,子元素也会触发
onmouseout

键盘事件

#某个键盘按键被按下
onkeydown

#某个键盘按键被松开
onkeyup

#某个键盘按键被按下并松开
onkeypress

框架/对象(Frame/Object)事件

#该事件在即将离开页面(刷新或关闭)时触发
onbeforeunload

#在加载文档或图像时发生错误
onerror

#该事件在当前 URL 的锚部分发生修改时触发
onhashchange

#会在页面或图像加载完成后立即触发
onload

#该事件在用户访问页面时触发
onpageshow

#该事件在用户离开当前网页跳转到另外一个页面时触发
onpagehide

#窗口或框架被重新调整大小
onresize

#当文档被滚动时发生的事件
onscroll

表单事件

#元素失去焦点时触发
onblur

#该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
onchange

#元素获取焦点时触发
onfocus

#元素即将获取焦点时触发
onfocusin

#元素即将失去焦点时触发
onfocusout

#元素获取用户输入时触发
oninput

#表单重置时触发
onreset

#用户向搜索域输入文本时触发 ( <input="search">) IE、火狐不支持
onsearch

#用户选取文本时触发 ( <input> 和 <textarea>)
onselect

#表单提交时触发
onsubmit

剪贴板事件

#该事件在用户拷贝元素内容时触发
oncopy

#该事件在用户剪切元素内容时触发
oncut

#该事件在用户粘贴元素内容时触发
onpaste

打印事件

#该事件在页面已经开始打印,或者打印窗口已经关闭时触发
onafterprint

#该事件在页面即将开始打印时触发
onbeforeprint

拖动事件

#该事件在元素正在拖动时触发
ondrag

#该事件在用户完成元素的拖动时触发
ondragend

#该事件在拖动的元素进入放置目标时触发
ondragenter

#该事件在拖动元素离开放置目标时触发
ondragleave

#该事件在拖动元素在放置目标上时触发
ondragover

#该事件在用户开始拖动元素时触发
ondragstart

#该事件在拖动元素放置在目标区域时触发
ondrop

多媒体(Media)事件

#事件在视频/音频(audio/video)终止加载时触发
onabort

#事件在用户可以开始播放视频/音频(audio/video)时触发
oncanplay

#事件在视频/音频(audio/video)可以正常播放且无需停顿和缓冲时触发
oncanplaythrough

#事件在视频/音频(audio/video)的时长发生变化时触发
ondurationchange

#当期播放列表为空时触发
onemptied

#事件在视频/音频(audio/video)播放结束时触发
onended

#事件在视频/音频(audio/video)数据加载期间发生错误时触发
onerror

#事件在浏览器加载视频/音频(audio/video)当前帧时触发触发
onloadeddata

#事件在指定视频/音频(audio/video)的元数据加载后触发
onloadedmetadata

#事件在浏览器开始寻找指定视频/音频(audio/video)触发
onloadstart

#事件在视频/音频(audio/video)暂停时触发
onpause

#事件在视频/音频(audio/video)开始播放时触发
onplay

#事件在视频/音频(audio/video)暂停或者在缓冲后准备重新开始播放时触发
onplaying

#事件在浏览器下载指定的视频/音频(audio/video)时触发
onprogress

#事件在视频/音频(audio/video)的播放速度发送改变时触发
onratechange

#事件在用户重新定位视频/音频(audio/video)的播放位置后触发
onseeked

#事件在用户开始重新定位视频/音频(audio/video)时触发
onseeking

#事件在浏览器获取媒体数据,但媒体数据不可用时触发
onstalled

#事件在浏览器读取媒体数据中止时触发
onsuspend

#事件在当前的播放位置发送改变时触发
ontimeupdate

#事件在音量发生改变时触发
onvolumechange

#事件在视频由于要播放下一帧而需要缓冲时触发
onwaiting

动画事件

#该事件在 CSS 动画结束播放时触发
animationend

#该事件在 CSS 动画重复播放时触发
animationiteration

#该事件在 CSS 动画开始播放时触发
animationstart

#该事件在 CSS 完成过渡后触发
transitionend

鼠标、键盘事件对象

#返回当事件被触发时,"ALT" 是否被按下
altKey

#返回当事件被触发时,"CTRL" 键是否被按下
ctrlKey

#返回当事件被触发时,"SHIFT" 键是否被按下
shiftKey

#可返回一个整数,指示当事件被触发时哪个鼠标按键被点击
event.button=0|1|2

#返回当事件被触发时,鼠标指针的水平坐标
clientX

#返回当事件被触发时,鼠标指针的垂直坐标
clientY

#返回按键在设备上的位置
Location

#返回onkeypress事件触发键值的字母代码
charCode

#在按下按键时返回按键的标识符
key

#返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码
keyCode

#返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码
which

#返回当事件被触发时,"meta" 键是否被按下
metaKey

#返回与事件的目标节点相关的节点
relatedTarget

#返回事件发生时鼠标指针相对于屏幕的水平坐标
screenX

#返回事件发生时鼠标指针相对于屏幕的垂直坐标
screenY

设备事件

#确定用户何时将设备由横向查看模式切换为纵向查看模式。0为正,90为左横屏,-90为右横屏
orientationchange

#当设备的加速计检测到设备方向改变时,就会触发这个事件
MozOrientation

#在加速计检测到设备方向变化时在 window 对象上触发
deviceorientation

#这个事件是要告诉开发人员设备什么时候移动,而不仅仅是设备方向如何改变
devicemotion

触摸事件

#当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发
touchstart

#当手指在屏幕上滑动时连续地触发。在这个事件发生期间,调用 preventDefault()可以阻止滚动
touchmove

#当手指从屏幕上移开时触发
touchend

#当系统停止跟踪触摸时触发
touchcancel


//属性

#表示当前跟踪的触摸操作的 Touch 对象的数组
touches

#特定于事件目标的 Touch 对象的数组
targetTouchs

#表示自上次触摸以来发生了什么改变的 Touch 对象的数组
changeTouches

#触摸目标在视口中的 x 坐标
clientX

#触摸目标在视口中的 y 坐标
clientY

#触摸目标在页面中的 x 坐标
pageX

#触摸目标在页面中的 y 坐标
pageY

#触摸目标在屏幕中的 x 坐标
screenX

#触摸目标在屏幕中的 y 坐标
screenY

#触摸的 DOM 节点目标
target

#标识触摸的唯一 ID
identifier

手势事件

#当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发
gesturestart

#当触摸屏幕的任何一个手指的位置发生变化时触发
gesturechange

#当任何一个手指从屏幕上面移开时触发
gestureend

Console

#在第一个参数为 false 的情况下会在控制台输出信息。
console.assert(expression, message)

#清除控制台上的信息
console.clear()

#在调用时会将数字(调用次数)写入到控制台。
console.count(label)

#方法用于输出错误信息到控制台
console.error(message)

#用于设置分组信息的起始位置,该位置之后的所有信息将写入分组
console.group(label)

#用于设置折叠的分组信息,在这个代码以下执行输出的信息都会再折叠的分组里
console.groupCollapsed(label)

#用于结束分组标签
console.groupEnd()

#用于在控制台输出信息
console.info(message)

#用于在控制台输出信息
console.log(message)

#用于在控制台输出表格信息
console.table(tabledata, tablecolumns)

#是作为计算器的起始方法,该方法一般用于测试程序执行的时长
console.time(label)
#是作为计算器的结束方法,该方法一般用于测试程序执行的时长
console.timeEnd(label)

#用于显示当前执行的代码在堆栈中的调用路径
console.trace(label)

#用于在控制台输出警告信息
console.warn(message)

CSSStyleDeclaration

#用于设置或者返回元素声明的内联样式
element.style.cssText

#返回指定元素的样式声明数目
element.style.length

#返回指定的 CSS 属性是否设置了 "important!" 属性
getPropertyPriority()

#返回指定的 CSS 属性值
getPropertyValue()

#通过索引方式返回 CSS 声明中的 CSS 属性名
item()

#移除 CSS 声明中的 CSS 属性
removeProperty()

#在 CSS 声明块中新建或者修改 CSS 属性
setProperty()

HTMLCollection

#返回 HTMLCollection 中指定索引的元素
item()	

#返回 HTMLCollection 中元素的数量
length	

#返回 HTMLCollection 中指定 ID 或 name 属性的元素
namedItem()