写在前面
JavaScript=EMCAScript+DOM+BOM
题目起得有点长，想表达的逻辑如此：
- BOM-window-ducoment
- DOM-document/element/event
BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口；
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。
首先应该清楚的是两者皆为接口定义。
- DOM是W3C的标准（所有浏览器公共遵守的标准）
- BOM是各个浏览器厂商根据DOM在各自浏览器上的实现
注：window VS. document，BOM VS. DOM
window是BOM对象，而非JavaScript对象，Window 对象表示浏览器中打开的窗口，不过恰好为EMCAScript中所定义的Global对象。BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个global全局对象。
由于window包含了document属性，因此JavaScript可以直接通过使用window的document对象来访问、检索、修改文档内容与结构。因为document对象又是DOM的根节点，所以可以理解为BOM包含了DOM。即浏览器提供出来给予访问的是BOM对象，而BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
通俗来讲：
DOM 就是针对 HTML 和 XML 提供的一个API，就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如 <div></div> 这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。
DOM 是为了操作文档出现的 API，document 是其的一个对象；
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。
图示化说明（版权非我）*
归DOM管的：
E区（就是你说的document。由web开发人员呕心沥血写出来的一个文件夹，里面有index.html，CSS和JS什么鬼的，部署在服务器上，我们可以通过浏览器的地址栏输入URL然后回车将这个document加载到本地，浏览，右键查看源代码等）
归BOM管的：
A区（浏览器的标签页，地址栏，搜索栏，书签栏，窗口放大还原关闭按钮，菜单栏等）
B区（浏览器的右键菜单）
C区（document加载时的状态栏，显示http状态码等）
D区（滚动条scroll bar）
Window对象
window对象的属性
document 对 Document 对象的只读引用。请参阅 Document 对象。
history 对 History 对象的只读引用。请参数 History 对象。
location 用于窗口或框架的 Location 对象。请参阅 Location 对象。
Navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
Screen 对 Screen 对象的只读引用。请参数 Screen 对象。
self 返回对当前窗口的引用。等价于 Window 属性。
window 等价于 self 属性，它包含了对窗口自身的引用。
parent 返回父窗口。
top 返回最顶层的先辈窗口。
BOM（browser object model,API）是Window对象、Document对象、History对象、Location对象、Navigator对象、Screen对象等合起来组成的模型，至今没有各个浏览器统一的公开标准，但是一般各个浏览器都支持。
注：BOM wiki:
The Browser Object Model (BOM) is a browser-specific convention(特定浏览器的惯例) referring to all the objects exposed by the web browser. Unlike the Document Object Model, there is no standard for implementation and no strict definition(跟DOM约定W3C标准不同，BOM没有实践标准和严格定义), so browser vendors are free to implement the BOM in any way they wish.
That which we see as a window displaying a document, the browser program sees as a hierarchical collection of objects. When the browser parses a document, it creates a collection of objects that define the document and detail how it should be displayed. The object the browser creates is known as the Document object. It is part of a larger collection of objects that the browser makes use of. This collection of browser objects is collectively known as the Browser Object Model, or BOM.
The top level of the hierarchy is the window object, which contains the information about the window displaying the document. Some of the window object are objects themselves that describe the document and related information.
window对象的方法
alert() 显示带有一段消息和一个确认按钮的警告框。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
setInterval() “周期性定时器” 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 停止启动的定时器
setTimeout() “一次性定时器” 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 停止启动的定时器
Window 对象是全局对象，所有的表达式都在当前的环境中计算。
属性是全局变量，方法是全局函数，可以将窗口对象（window对象）对其属性和方法的引用方式省略‘window.’。比如，属性引用，由window.ducument直接document表示该窗口的文档对象（Document对象）；方法引用，由window.alert()直接alert()表示弹出警告框。
Window 对象的 window 属性和 self 属性引用的都是它自己。当你想明确地引用当前窗口，而不仅仅是隐式地引用它时，可以使用这两个属性。除了这两个属性之外，parent 属性、top 属性以及 frame[] 数组都引用了与当前 Window 对象相关的其他 Window 对象。
一般来说，Window 对象的方法都是对浏览器窗口或框架进行某种操作。而 alert() 方法、confirm() 方法和 prompt 方法则不同，它们通过简单的对话框与用户进行交互。
Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
document对象的属性
body 提供对 <body> 元素的直接访问。
title 返回当前文档的标题。
document对象的方法
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
文档用DOM表示成树状图，方便对图中各个节点（Node对象）通过DOM API的属性和方法访问，这些所有的Node对象(Document对象、Element对象等)对应的属性和方法的合集，加上DOM events就是DOM（document objecat model,API）。DOM表示和操作HTML和XML文档内容的基础API，不但包含常见的HTML DOM，也包含XML DOM，HTML DOM针对HTML的不同元素，对应有Element对象的属性和方法。
注：DOM wiki
The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein** each node is an object representing a part of the document**. The objects can be manipulated programmatically and any visible changes occurring as a result may then be reflected in the display of the document.
Principal standardization of DOM was handled by the W3C, which last developed a recommendation in 2004. WHATWG took over development of the standard, publishing it as a living document. The W3C now publishes stable snapshots of the WHATWG standard.
The W3C DOM Working Group published its final recommendation and subsequently disbanded in 2004. Development efforts migrated to the WHATWG which continues to maintain a living standard.[3] In 2009, the Web Applications group reorganized DOM activities at the W3C.[4] In 2013, due to a lack of progress and the impending release of HTML5, the DOM Level 4 specification was reassigned to the HTML Working Group to expedite its completion.[5] Meanwhile, in 2015 the Web Applications group was disbanded and DOM stewardship passed to the Web Platform group.[6] Beginning with the publication of DOM Level 4 in 2015, the W3C creates new recommendations based on snapshots of the WHATWG standard.
- DOM Level 1 provided a complete model for an entire HTML or XML document, including means to change any portion of the document.
- DOM Level 2 was published in late 2000. It introduced the getElementById function as well as an event model and support for XML namespaces and CSS.
- DOM Level 3, published in April 2004, added support for XPath and keyboard event handling, as well as an interface for serializing documents as XML.
- bDOM Level 4 was published in 2015. It is a snapshot of the WHATWG living standard.
Element对象
在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
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 中的节点数。
DOM Events
1. Mouse Events
Property Description DOM
onclick The event occurs when the user clicks on an element 2
ondblclick The event occurs when the user double-clicks on an element 2
onmousedown The event occurs when a user presses a mouse button over an element 2
onmouseenter The event occurs when the pointer is moved onto an element 2
onmouseleave The event occurs when the pointer a user moves the mouse pointer out of an element 2
onmousemove The event occurs when the pointer is moving while it is over an element 2
onmouseover The event occurs when the pointer is moved onto an element, or onto one of its children 2
onmouseout The event occurs when a user moves the mouse pointer out of an element, or out of one of its children 2
onmouseup The event occurs when a user releases a mouse button over an element 2
2. Keyboard Events
Attribute Description DOM
onkeydown The event occurs when the user is pressing a key 2
onkeypress The event occurs when the user presses a key 2
onkeyup The event occurs when the user releases a key 2
Frame/Object Events
Attribute Description DOM
onabort The event occurs when an image is stopped from loading before completely loaded (for <object>) 2
onerror The event occurs when an image does not load properly (for <object>, <body> and <frameset>)
onload The event occurs when a document, frameset, or <object> has been loaded 2
onresize The event occurs when a document view is resized 2
onscroll The event occurs when a document view is scrolled 2
onunload The event occurs once a page has unloaded (for <body> and <frameset>) 2
3. Form Events
Attribute Description DOM
onblur The event occurs when a form element loses focus 2
onchange The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>) 2
onfocus The event occurs when an element gets focus (for <label>, <input>, <select>, textarea>, and <button>) 2
onreset The event occurs when a form is reset 2
onselect The event occurs when a user selects some text (for <input> and <textarea>) 2
onsubmit The event occurs when a form is submitted 2
注：DOM events wiki
DOM (Document Object Model) events allow event-driven programming languages like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handlers/listeners on the element nodes inside a DOM tree, e.g. HTML, XHTML, XUL and SVG documents.
Historically, like DOM, the event models used by various web browsers had some significant differences. This caused compatibility problems. To combat this, the event model was standardized by the W3C in DOM Level 2.
Common/W3C events：There is a huge collection of events that can be generated by most element nodes:
- Mouse events
- Keyboard events
- HTML frame/object events
- HTML form events
- User interface events
- Mutation events (notification of any changes to the structure of a document)
- Progress events(used by XMLHttpRequest, File API, ...)
Note that the event classification above is not exactly the same as W3C's classification.
DOM CSS(DOM HTML)
Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。
document.getElementById("id").style.property="值"
Style 对象的属性：
背景
边框和边距
布局
列表
杂项
定位
打印
滚动条
表格
文本
规范
DHTML
注：Dynamic HTML wiki
Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies(涵盖性术语，以下几种技术的合集) used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model (DOM). The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.
网友评论