记录一些DOM与BOM的api,方便复习与查阅
DOM
DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
Document
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
属性
- body 提供对 <body> 元素的直接访问。对于定义了框架集的文档,该属性引用最外层的 <frameset>。
- cookie 设置或返回与当前文档有关的所有 cookie。
- domain 返回当前文档的域名。
- lastModified 返回文档被最后修改的日期和时间。
- referrer 返回载入当前文档的文档的 URL。
- title 返回当前文档的标题。
- URL 返回当前文档的 URL。
方法
- close() 关闭用 document.open() 方法打开的输出流,并显示选定的数据。
- getElementById() 返回对拥有指定 id 的第一个对象的引用。
- getElementsByName() 返回带有指定名称的对象集合。
- getElementsByTagName() 返回带有指定标签名的对象集合。
- open() 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
- write() 向文档写 HTML 表达式 或 JavaScript 代码。
- writeln() 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。
Element
在 HTML DOM 中,Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
属性/方法
- element.accessKey 设置或返回元素的快捷键。
- element.appendChild() 向元素添加新的子节点,作为最后一个子节点。
- element.attributes 返回元素属性的 NamedNodeMap。
- element.childNodes 返回元素子节点的 NodeList。
- element.className 设置或返回元素的 class 属性。
- element.clientHeight 返回元素的可见高度。
- element.clientWidth 返回元素的可见宽度。
- element.cloneNode() 克隆元素。
- element.compareDocumentPosition() 比较两个元素的文档位置。
- element.contentEditable 设置或返回元素的文本方向。
- element.dir 设置或返回元素的内容是否可编辑。
- element.firstChild 返回元素的首个子。
- element.getAttribute() 返回元素节点的指定属性值。
- element.getAttributeNode() 返回指定的属性节点。
- element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。
- element.getFeature() 返回实现了指定特性的 API 的某个对象。
- element.getUserData() 返回关联元素上键的对象。
- element.hasAttribute() 如果元素拥有指定属性,则返回true,否则返回 false。
- element.hasAttributes() 如果元素拥有属性,则返回 true,否则返回 false。
- element.hasChildNodes() 如果元素拥有子节点,则返回 true,否则 false。
- element.id 设置或返回元素的 id。
- element.innerHTML 设置或返回元素的内容。
- element.insertBefore() 在指定的已有的子节点之前插入新节点。
- element.isContentEditable 设置或返回元素的内容。
- element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。
- element.isEqualNode() 检查两个元素是否相等。
- element.isSameNode() 检查两个元素是否是相同的节点。
- element.isSupported() 如果元素支持指定特性,则返回 true。
- element.lang 设置或返回元素的语言代码。
- element.lastChild 返回元素的最后一个子元素。
- element.namespaceURI 返回元素的 namespace URI。
- element.nextSibling 返回位于相同节点树层级的下一个节点。
- element.nodeName 返回元素的名称。
- element.nodeType 返回元素的节点类型。
- element.nodeValue 设置或返回元素值。
- element.normalize() 合并元素中相邻的文本节点,并移除空的文本节点。
- element.offsetHeight 返回元素的高度。
- element.offsetWidth 返回元素的宽度。
- element.offsetLeft 返回元素的水平偏移位置。
- element.offsetParent 返回元素的偏移容器。
- element.offsetTop 返回元素的垂直偏移位置。
- element.ownerDocument 返回元素的根元素(文档对象)。
- element.parentNode 返回元素的父节点。
- element.previousSibling 返回位于相同节点树层级的前一个元素。
- element.removeAttribute() 从元素中移除指定属性。
- element.removeAttributeNode() 移除指定的属性节点,并返回被移除的节点。
- element.removeChild() 从元素中移除子节点。
- element.replaceChild() 替换元素中的子节点。
- element.scrollHeight 返回元素的整体高度。
- element.scrollLeft 返回元素左边缘与视图之间的距离。
- element.scrollTop 返回元素上边缘与视图之间的距离。
- element.scrollWidth 返回元素的整体宽度。
- element.setAttribute() 把指定属性设置或更改为指定值。
- element.setAttributeNode() 设置或更改指定属性节点。
- element.setIdAttribute()
- element.setIdAttributeNode()
- element.setUserData() 把对象关联到元素上的键。
- element.style 设置或返回元素的 style 属性。
- element.tabIndex 设置或返回元素的 tab 键控制次序。
- element.tagName 返回元素的标签名。
- element.textContent 设置或返回节点及其后代的文本内容。
- element.title 设置或返回元素的 title 属性。
- element.toString() 把元素转换为字符串。
- nodelist.item() 返回 NodeList 中位于指定下标的节点。
- nodelist.length 返回 NodeList 中的节点数。
Attribute
属性和方法
- attr.isId 如果属性是 id 类型,则返回 true,否则返回 false。
- attr.name 返回属性的名称。
- attr.value 设置或返回属性的值。
- attr.specified 如果已指定属性,则返回 true,否则返回 false。
- nodemap.getNamedItem() 从 NamedNodeMap 返回指定的属性节点。
- nodemap.item() 返回 NamedNodeMap 中位于指定下标的节点。
- nodemap.length 返回 NamedNodeMap 中的节点数。
- nodemap.removeNamedItem() 移除指定的属性节点。
- nodemap.setNamedItem() 设置指定的属性节点(通过名称)。
Event
事件句柄
- onabort 图像的加载被中断。
- onblur 元素失去焦点。
- onchange 域的内容被改变。
- onclick 当用户点击某个对象时调用的事件句柄。
- ondblclick 当用户双击某个对象时调用的事件句柄。
- onerror 在加载文档或图像时发生错误。
- onfocus 元素获得焦点。
- onkeydown 某个键盘按键被按下。
- onkeypress 某个键盘按键被按下并松开。
- onkeyup 某个键盘按键被松开。
- onload 一张页面或一幅图像完成加载。
- onmousedown 鼠标按钮被按下。
- onmousemove 鼠标被移动。
- onmouseout 鼠标从某元素移开。
- onmouseover 鼠标移到某元素之上。
- onmouseup 鼠标按键被松开。
- onreset 重置按钮被点击。
- onresize 窗口或框架被重新调整大小。
- onselect 文本被选中。
- onsubmit 确认按钮被点击。
- onunload 用户退出页面。
键盘/鼠标
- altKey 返回当事件被触发时,"ALT" 是否被按下。
- button 返回当事件被触发时,哪个鼠标按钮被点击。
- clientX 返回当事件被触发时,鼠标指针的水平坐标。
- clientY 返回当事件被触发时,鼠标指针的垂直坐标。
- ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。
- metaKey 返回当事件被触发时,"meta" 键是否被按下。
- relatedTarget 返回与事件的目标节点相关的节点。
- screenX 返回当某个事件被触发时,鼠标指针的水平坐标。
- screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。
- shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。
BOM
BOM(Browser Object Model)是指浏览器对象模型,可以对浏览器窗口进行访问和操作。使用 BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
Window
JavaScript 层级中的顶层对象。Window 对象表示浏览器窗口。每当或者标签出现,Window 对象就会被自动创建。
属性
- closed 返回窗口是否已被关闭。
- defaultStatus 设置或返回窗口状态栏中的默认文本。
- document 对 Document 对象的只读引用。请参阅 Document 对象。
- history 对 History 对象的只读引用。请参数 History 对象。
- innerheight 返回窗口的文档显示区的高度。
- innerwidth 返回窗口的文档显示区的宽度。
- length 设置或返回窗口中的框架数量。
- location 用于窗口或框架的 Location 对象。请参阅 Location 对象。
- name 设置或返回窗口的名称。
- Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
- opener 返回对创建此窗口的窗口的引用。
- outerheight 返回窗口的外部高度。
- outerwidth 返回窗口的外部宽度。
- pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
- pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
- parent 返回父窗口。
- Screen 对 Screen 对象的只读引用。请参数 Screen 对象。
- self 返回对当前窗口的引用。等价于 Window 属性。
- status 设置窗口状态栏的文本。
- top 返回最顶层的先辈窗口。
- window window 属性等价于 self 属性,它包含了对窗口自身的引用。
screenLeft screenTop screenX screenY
只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。
方法
- alert() 显示带有一段消息和一个确认按钮的警告框。
- blur() 把键盘焦点从顶层窗口移开。
- clearInterval() 取消由 setInterval() 设置的 timeout。
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
- close() 关闭浏览器窗口。
- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
- createPopup() 创建一个 pop-up 窗口。
- focus() 把键盘焦点给予一个窗口。
- moveBy() 可相对窗口的当前坐标把它移动指定的像素。
- moveTo() 把窗口的左上角移动到一个指定的坐标。
- open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
- print() 打印当前窗口的内容。
- prompt() 显示可提示用户输入的对话框。
- resizeBy() 按照指定的像素调整窗口的大小。
- resizeTo() 把窗口的大小调整到指定的宽度和高度。
- scrollBy() 按照指定的像素值来滚动内容。
- scrollTo() 把内容滚动到指定的坐标。
- setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
- setTimeout() 在指定的毫秒数后调用函数或计算表达式。
Navigator
Navigator 对象包含有关浏览器的信息。
属性
- appCodeName 返回浏览器的代码名。
- appMinorVersion 返回浏览器的次级版本。
- appName 返回浏览器的名称。
- appVersion 返回浏览器的平台和版本信息。
- browserLanguage 返回当前浏览器的语言。
- cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
- cpuClass 返回浏览器系统的 CPU 等级。
- onLine 返回指明系统是否处于脱机模式的布尔值。
- platform 返回运行浏览器的操作系统平台。
- systemLanguage 返回 OS 使用的默认语言。
- userAgent 返回由客户机发送服务器的 user-agent 头部的值。
- userLanguage 返回 OS 的自然语言设置。
方法
- javaEnabled() 规定浏览器是否启用 Java。
- taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。
Screen
Screen 对象包含有关客户端显示屏幕的信息。
属性
- availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
- availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
- bufferDepth 设置或返回调色板的比特深度。
- colorDepth 返回目标设备或缓冲器上的调色板的比特深度。
- deviceXDPI 返回显示屏幕的每英寸水平点数。
- deviceYDPI 返回显示屏幕的每英寸垂直点数。
- fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。
- height 返回显示屏幕的高度。
- logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。
- logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。
- pixelDepth 返回显示屏幕的颜色分辨率(比特每像素)。
- updateInterval 设置或返回屏幕的刷新率。
- width 返回显示器屏幕的宽度。
History
History 对象包含用户(在浏览器窗口中)访问过的 URL。
History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。
属性
- length 返回浏览器历史列表中的 URL 数量。
方法
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go() 加载 history 列表中的某个具体页面。
Location
Location 对象包含有关当前 URL 的信息。
Location 对象是 Window 对象的一个部分,可通过 window.location 属性来访问。
属性
- hash 设置或返回从井号 (#) 开始的 URL(锚)。
- host 设置或返回主机名和当前 URL 的端口号。
- hostname 设置或返回当前 URL 的主机名。
- href 设置或返回完整的 URL。
- pathname 设置或返回当前 URL 的路径部分。
- port 设置或返回当前 URL 的端口号。
- protocol 设置或返回当前 URL 的协议。
- search 设置或返回从问号 (?) 开始的 URL(查询部分)。
方法
- assign() 加载新的文档。
- reload() 重新加载当前文档。
- replace() 用新的文档替换当前文档。