Document
文档属性
#以一个元素对象返回一个文档的文档元素
document.documentElement
#可返回当前文档的 URL
document.URL
#可返回文档的编码
document.inputEncoding
#返回与文档相关的文档类型声明(Document Type Declaration)
document.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 #只读属性返回树中节点的第一个子节点,如果节点是无子节点,则返回 null。
Node.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()