window对象
https://developer.mozilla.org/zh-CN/docs/Web/API/Window
document //见下方 location //https://developer.mozilla.org/zh-CN/docs/Web/API/Location/href history //操作浏览器会话历史的接口https://developer.mozilla.org/zh-CN/docs/Web/API/History navigator//用户代理的状态和标识,浏览器信息等 screen screenX/screenY scrollX/scrollY innerWidth/innerHeight outerWidth/outerHeight
//方法
getComputedStyle(element, [pseudoElt])
getSelection()//光标选中的内容
moveTo()
moveBy()
resizeTo()
resizeBy()
scrollTo()
scrollBy()
requestAnimationFrame()/cancelAnimationFrame()
print() //弹出窗口,打印当前文档
Node对象
https://developer.mozilla.org/zh-CN/docs/Web/API/Node
各种类型的 DOM API 对象会从这个接口继承。
//主要属性: childNodes firstChild lastChild parentNode nextSibling previousSibling nodeName nodeTyle textContent //主要方法: appendChild(node) cloneNode(deep)//deep,是否深度克隆 insertBefore()//结合nextSibling可以实现insertAfter()相同的功能 removeChild(child) replaceChild(newChild,oldChild)
contains(otherNode)
hasChildNodes()
Document对象
https://developer.mozilla.org/zh-CN/docs/Web/API/Document
继承自Node和EventTarget
//主要属性: links scripts forms images head body children contentType URL 其他事件属性 ... defaultView//返回window对象 //主要方法:
createElement()
createTextNode()
createAttribute(name)
getElementById(id)
getElementsByName(name) //dom的name属性值
getElementsByTagName()
querySelector()
querySelectorAll()
write()
evaluate()//传入XPath表达式
Element对象
https://developer.mozilla.org/zh-CN/docs/Web/API/Element
Event是一个通用性非常强的基类,所有 Document
对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element
并且增加了一些额外功能的接口描述了具体的行为。例如, HTMLElement
接口是所有 HTML 元素的基本接口,而 SVGElement
接口是所有 SVG 元素的基础。继承自Node
//主要属性方法:
tagName
className
id
name
innerHTML
outerHTML
attributes
children
firstElementChild
lastElementChild
scrollWidth/scrollHeight
scrollLeft/scrollTop
clientWidth/clientHeight
closet()//最近的祖先元素
getAttribute() getAttributeNames() setAttribute()
toggleAtrribute()
hasAttribute(attrname)
scrollTo()
scrollBy()
HTMLElement对象
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement
HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口,其它的间接实现HTMLElement接口;继承自Element,Node
//主要属性: innerText //没有outerText offsetWidth/offsetHeight offsetLeft/offsetTop//只读,当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界/上边界 偏移的像素值。 offsetParent style title //无新的方法
Element.style 样式对象
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference (所有css属性)
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference (css属性在js中的写法列表)
//获取一个元素的所有样式:
var element = document.getElementById("myElement"); var out = ""; var elementStyle = element.style; var computedStyle = window.getComputedStyle(element, null); for (prop in elementStyle) { if (elementStyle.hasOwnProperty(prop)) { out += " " + prop + " = '" + elementStyle[prop] + "' > '" + computedStyle[prop] + "'\n"; } } console.log(out)
event 事件
https://developer.mozilla.org/zh-CN/docs/Web/API/Event
https://developer.mozilla.org/zh-CN/docs/Web/Events
//主要属性: bubbles //bool,只读,是否可以冒泡 cancelBubble //可读写,设置是否继续冒泡 defaultPrevented//只读 target //事件触发的元素 currentTarget//总是指向事件绑定的元素,将相同的事件处理程序附加到多个元素时 //主要方法: preventDefault()//阻止默认事件的侦听器 stopPropagation()//阻止捕获和冒泡阶段中当前事件的进一步传播