宿主对象即浏览器提供的对象，主要包括DOM对象和BOM对象。
一、DOM源起
1.SGML、XML和XHTML
SGML(标准通用标记语言)是定义使用标签来表示数据的标记语言的语法。
- 标签由一个小于号和一个大于号之间的文本组成，如<title>
- 标签分为起始标签和结束标签，分别表示一个特定区域的开始和这个特定区域的结束，如<title>标题</title>
- 特性是定义在起始标签内的值。如<img src="pircutre.jpg">，src就是其特性
HTML遵循SGML标记语言的语法,它是的SGML一种应用。或者说，SGML用来定义HTML的文档类型定义(DTD)。SGML还用来编写XML的DTD。
XML对SGML的语法做了更细致和严谨的扩展。
- SGML的奇怪语法:
- 某些标签不语序出现结束标签，如HTML中的<img>标签，否则会出现错误。
- 某些标签的结束标签可以不写，如HTML中的<p>标签。
- 标签可以以任何顺序嵌套，如<div><span></div></span>。
- 某些特性必须包含值，如<img src="picture.jpg">。
- 某些特性不要求一定有值，如<td nowrap>。
- 定义特性的两边有没有加双引号都是可以的，如<img src=picture.jpg>也是允许的。
- XML去掉了许多SGML中的随意语法，并且规定了新的语法:
- 任何的起始标签都必须有一个结束标签。
- 可以采用另一种简化语法，即一个标签同时表示起始标签和结束标签，即<tag />，如<br />,<hr />。
- 标签必须按合适的顺序嵌套。就近原则书写结束标签。
- 所有的特性都必须有值。
- 所有的特性都必须在值得周围加上双引号。
XML衍生出了MathML、SVG、RDF、RSS等等。同时，HTML被改进为XHML，即遵循XML语法的HTML。XHMTL被称为严格模式。
2.XML的API
XML定义了HTML的数据排版和解析方式。根据XML语言规范，需要制定API来实现对这些数据的操作和访问。
DOM模型就是最为流行的针对XML的基于树的API。它将XML解析为一颗有节点的树模型，并使用一系列互相关联的对象来表示XML的代码。从而能够指导开发增删改查等具体API的实现。
DOM是语言无关的API，它并不与其它语言绑定。但对于JavaScript而言，DOM被习惯理解成API集合。
HTML DOM （文档对象模型）
- 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
- HTML DOM 模型被构造为对象的树。通过 HTML DOM，可访问 HTML 文档的所有元素。
- <html>
<head>
<title>...</title>
...
</head>
<body>
<div>
...
</div>
...
</body>
</html>
- 通过可编程的文档对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。即Javascript可以操作四个内容:元素、属性、样式和事件。html元素、html属性、css样式、事件。html元素、元素属性、元素样式和事件。html元素、html属性、css样式、事件。
- HTML DOM 是浏览器对象BOM的一个属性。
3.DOM node接口和属性访问
DOM定义了树节点（node）的层次和其Node接口，以及这些节点的类型和其数字标号。这些常量会在选择节点之后以属性的方式查询。
接口名称
|
释义
|
属性访问方式
|
数字表示
|
Element
|
表示起始标签和结束标签之间的内容。这是唯一可以同时包含特性和子节点的节点类型。
|
Node.ELEMENT_NODE
|
1
|
Attr
|
代表一对特姓名和特性值。这个节点类型不能包含子节点。 |
Node.ATTRIBUTE_NODE
|
2
|
Text
|
代表XML文档中的在其实标签和结束标签之间的，或者CData Seciron内的普通文本。这个节点类型不能包含子节点。 |
Node.TEXT_NODE
|
3
|
CDataSection
|
<![CDATA[]]>的对象表现形式。这个几点类型仅能包含文本节点Text作为子节点。 |
Node.CDATA_SECTION_NODE
|
4
|
Entity
|
表示在DTD中的一个实体定义，例如<!ENTITY foo "foo">。这个节点类型不能包含子节点。 |
Node.ENTITY_NODE
|
5
|
EntityReference
|
代表一个实体引用，例如"。这个节点类型不能包含子节点。 |
Node.ENTITY_REFERENCE_NODE
|
6
|
ProcessingInstruction
|
代表一个PI。这个节点类型不能包含子节点。 |
Node.PROCESSING_INSTRUCTION_NODE
|
7
|
Comment
|
代表XML注释。这个节点类型不能包含子节点。 |
Node.COMMENT_NODE
|
8
|
Document
|
代表在DTD中定义的记号。这个很少用到。 |
Node.DOCUMENT_NODE
|
9
|
| DocumentType | 最顶层的节点，所有的其它节点都是附属于它的。 | Node.DOCUMENT_TYOE_NODE | 10 |
| DoucmentR=Frament | DTD引用(使用<!DOCTYPE>)，如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">。它不能包含子节点。 | Node.DOCUMENT_FRAMENT_NODE | 11 |
Notation
|
可以像Document一样来保存其它节点。 |
Node.NOTATION_NODE
|
12
|
4.节点特性和方法
Node接口定义了所有节点类型都包含的特性和方法。
| 特性/方法 | 类型/返回类型 | 说明 |
| nodeName | String | 节点的名字 |
| nodeValue | String | 节点的值 |
| nodeType | Number | 节点的类型常量值 |
| ownerDocument | Document | 节点的所属文档 |
| childNodes |
NodeList | 节点的所有子节点列表 |
| firstChild | Node | 子节点列表的第一个节点 |
| lastChild | Node | 子节点列表的最后一个节点 |
| hasChildNodes() | Boolean | 是否包含子节点 |
| appendChild(node) | Node | 将node添加到childNodes末尾 |
| removeChild(node) | Node | 从childNodes中删除node |
| replaceChild(newnode,oldnode) | Node | 将childNodes中的oldnode替换成newnode |
| insertBefore(newnode, refnode) | Node | 在childNodes中的refnode之前插入newnode |
| previousSibling | Node | 指向前一个兄弟节点，如果这个节点就是第一个兄弟节点，那么该值为null |
| nextSibling | Node | 指向后一个兄弟节点，如果这个节点就是最后一个兄弟节点，那么该值为null |
| attributes | NamedNodeMap | 包含了代表一个元素的特性的Attr对象，仅用于Element节点 |
5.HTML DOM
任何基于XML的语言，如XHTML和SVG，因为它们遵循XML语法，所以可以使用上述的Node接口操作。然而很多语言会继续定义它们自己的DOM来扩展XML以提供特定功能。
开发XML DOM的同时，W3C还一起开发了针对XHTML(以及HTML)的DOM。这个DOM定义了一个HTMLDocument一个HTMLElement作为实现基础。
每个HTML元素通过Ω它自己的HTMLElement类型表示，如HTMLDivElement代表了<div>元素。但有少数的除外。
二、DOM通用节点对象操作
1.DOM的通用属性
alinkColor
|
激活的链接的颜色，如<body alink="color">定义的。
|
bgColor
|
页面的背景颜色，如<body bgcolor="color">定义的。
|
fgColor
|
页面的文本颜色，如<body text="color">定义的。
|
lastModified
|
最后修改页面的日期，是字符串。
|
linkColor
|
链接的颜色，如<body link="color">定义的
|
referrer
|
浏览器当前页后退一个位置的url
|
title
|
<title>标签中显示的文本
|
URL
|
当前页面的url
|
vlinkColor
|
访问过的链接的颜色，如<body vlink="color">定义的
|
* 这些属性是引用了<body>标签中的旧HTML特性，应该用样式表代替它们。
|
|
2.DOM的通用集合
ahchors
|
页面中所有锚的集合(由<a name="ahchorname></a>标签表示)。
|
applets
|
页面中所有applet的集合。
|
embeds
|
页面中所有嵌入式对象的集合(由<embed>标签表示)
|
forms
|
页面中所有表单的集合。
|
images
|
页面中所有图像的集合。
|
links
|
页面中所有链接的集合(由<a href="somewhere.htm"><a>表示。
|
3.DOM通用节点操作
document对象是BOM的一部分，同时也是HTML DOM的HTMLDocument对象的表现形式，即它也是XML DOM Document对象。
1查找节点
| document[Element].getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
| document[Element].getElementsByName() | 返回带有指定名称的对象集合。 |
| document[Element].getElementsByTagName() | 返回带有指定标签名的对象集合。 |
| document[Element].getElementsByClassName() | 返回带有指定类名的对象集合。 |
2创建节点
document.createAttribute(name)
|
创建属性名为name的属性节点。
|
document.createElement()
|
创建标签名为tagName的元素。
|
document.createTextNode(text)
|
创建包含文本text的文本节点。
|
* 创建其它Node接口定义的节点没有太大用处。因为被更简便的操作替代。
|
|
3添加节点
Element.appendChild(Node)
|
添加Node子元素。
|
Element.insertBefore(newNode, oldNode)
|
在某个子节点对象前添加新节点。
|
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>节点选取</title> <style type="text/css"> .outer { width: 200px; background-color: yellow; } .inner{ float: left; height: 50px; width: 50px; } .inner:first-child{ background-color: red; } .inner:last-child{ background-color: blue; } .header, .bottom{ height: 50px; width: 200px; background-color: green; } .clearfix:before, .clearfix:after{ content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } </style> </head> <body> <div class="header"></div> <div class="outer clearfix"> </div> <div class="bottom"></div> <script> function newDiv() {} newDiv.create = newDiv.prototype.create = function (className) { var oDiv = document.createElement("div"); // 第一种方式 /* var oText = document.createTextNode("第一个子div"); oDiv.appendChild(oText); var oAttr = document.createAttribute("class"); oAttr.nodeValue = className; oDiv.setAttributeNode(oAttr); */ // 第二种方式 oDiv.innerHTML = "第二个子div"; oDiv.setAttribute("class", className); return oDiv; }; var oDiv = new newDiv(); var oDivFather = document.getElementsByClassName("outer")[0] oDivFather.appendChild(oDiv.create("inner")); oDivFather.appendChild(oDiv.create("inner")); </script> </body> </html>
4删除节点
Element.removeChild(Node) 删除Node子元素。
5替换节点
Element.replacChild(newNode, oldNode) 替换子元素。
6.节点属性和方法
节点属性和方法包含DOM NOde接口定义的所有属性和方法。HTML DOM 还包括其它的一些属性和方法。详细参见http://www.w3school.com.cn/jsref/dom_obj_all.asp。
Element.tagName
|
返回元素的标签名。
|
Element.cloneNode()
|
复制当前元素。
|
Element.normalize()
|
合并元素中相邻的文本节点，并移除空的文本节点。
|
Element.parentNode
|
返回元素的父节点。
|
Element.ownerDocument
|
返回元素的根元素（文档对象）。
|
nodelist.item()
|
返回 NodeList 中位于指定下标的节点。
|
nodelist.length
|
返回 NodeList 中的节点数。
|
Element.toString()
|
把元素转换为字符串。
|
4.DOM通用属性操作
1.查找属性
Element.hasAttribute()
|
如果元素拥有指定属性，则返回true，否则返回 false。
|
Element.hasAttributes()
|
如果元素拥有属性，则返回 true，否则返回 false。
|
2.获取属性
Element.getAttribute()
|
返回元素节点的指定属性值。
|
Element.getAttributeNode()
|
返回指定的属性节点。
|
3.设置属性
Element.setAttribute()
|
把指定属性设置或更改为指定值。
|
Element.setAttributeNode()
|
设置或更改指定属性节点。
|
4.删除属性
Element.removeAttribute()
|
从元素中移除指定属性。
|
Element.removeAttributeNode()
|
移除指定的属性节点，并返回被移除的节点。
|
5.getattr和setattr获取或设置属性
除了hasAttribute、getAttributes、setAttributes、removeAttribute操作属性，一些属性也可以通过节点.属性的方式获取/设置属性。
Element.id
|
设置或返回元素的 id。
|
Element.style
|
设置或返回元素的 style 属性。
|
Element.innerHTML
|
设置或返回元素的内容。
|
Element.className
|
设置或返回元素的 class 属性。
|
Element.title
|
设置或返回元素的 title 属性。
|
Element.textContent
|
设置或返回节点及其后代的文本内容。
|
Element.contentEditable
|
设置或返回元素的文本方向。
|
Element.dir
|
设置或返回元素的内容是否可编辑。
|
Element.accessKey
|
设置或返回元素的快捷键。
|
Element.lang
|
设置或返回元素的语言代码。
|
Element.namespaceURI
|
返回元素的 namespace URI。
|
Element.tabIndex
|
设置或返回元素的 tab 键控制次序。
|
特别提醒：可以通过Element.style.属性实现对头部或者外链的css样式进行修改。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body { margin: 0; padding: 0; } .outer{ width: 400px; margin: 0 auto; } .inner-first{ overflow: hidden; background-color: green; } .inner-first .child{ float: left; height: 100px; width: 100px; margin: 0 16px; line-height: 100px; text-align: center; } .clearfix:before, .clearfix:after{ content: ''; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } .inner-second{ height: 100px; background-color: yellow; } </style> </head> <body> <div class="outer"> <div class="inner-first clearfix"> <a class="child">第一个</a> <a class="child">第二个</a> <a class="child">第三个</a> </div> <div class="inner-second"></div> </div> <script> function Click() {} Click.create = Click.prototype.create = function (className) { var oA = document.getElementsByClassName(className); for(var i in oA){ oA[i].onclick = function () { console.log(this); this.style.backgroundColor = "red"; // 通过Element.style.属性来设置style内部样式 return false; } } }; var oClick = new Click(); oClick.create("child"); </script> </body> </html>
设置距离、偏移和可见宽高。
Element.clientHeight
|
返回元素的可见高度。
|
Element.clientWidth
|
返回元素的可见宽度。
|
Element.offsetWidth
|
返回元素的宽度。
|
Element.offsetLeft
|
返回元素的水平偏移位置。
|
Element.offsetParent
|
返回元素的偏移容器。
|
Element.offsetTop
|
返回元素的垂直偏移位置。
|
Element.scrollHeight
|
返回元素的整体高度。
|
Element.scrollLeft
|
返回元素左边缘与视图之间的距离。
|
Element.scrollTop
|
返回元素上边缘与视图之间的距离。
|
Element.scrollWidth
|
返回元素的整体宽度。
|
6.检查元素
Element.isContentEditable
|
设置或返回元素的内容。
|
Element.isDefaultNamespace()
|
如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。 |
Element.isEqualNode()
|
检查两个元素是否相等。 |
Element.isSameNode()
|
检查两个元素是否是相同的节点。 |
Element.compareDocumentPosition()
|
比较两个元素的文档位置。 |
Element.isSupported()
|
如果元素支持指定特性，则返回 true。 |
三、DOM节点的特殊属性和方法
本节内容摘自JavaScript使用手册。
1.form表单
1.使用方式
文件对象的子对象，Javascript的runtime engine自动为每一个表单建立一个表单对象。
格式：
- document.forms[索引].属性
- document.forms[索引].方法（参数）
- document.表单名称.属性
- document.表单名称.方法（参数）
2.form属性
| action | 表单动作 |
| elements | 以索引表示的所有表单元素 |
| encoding | MIME的类型 |
| length | 表单元素的个数 |
| method | 方法 |
| name | 表单名称 |
| target | 目标 |
3.form方法
| handleEvent(事件) | 使事件处理程序生效 |
| reset() | 重置 |
| submit() | 提交 |
4.form子元素共有的属性和方法
form子元素共有的属性：
| form | 该对象所在的表单 |
| name | 该对象的name属性 |
| type | 该对象的type属性 |
| value | 该对象的value属性 |
form子元素共有的方法：事件。
带有"checked"属性的子元素:单选按钮、复选框。
2.a对象
网页中的链接均会被自动看作链接对象，可以通过document.links访问。它是一个当前页面的所有a链接的集合。
1.a属性
| href | 完整的URL字串 |
| host | 主机域名或IP地址 |
| hostname | URL中的host+port |
| port | URL中端口部分 |
| hash | URL中的锚点名称 |
| protocol | URL中通讯协议部分 |
| pathname | URL中path部分 |
| search | URL中查询字串部分 |
| target | 代表目标的窗口 |
| text | 表示A标签中的文字 |
| x | 链接对象的左边界 |
| y | 链接对象的右边界 |
2.a方法:事件。
3.Cookie对象
是一种以文件（Cookie文件）的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息（Cookie数据）。Cookie文件由所访问的Web站点建立，以长久的保存客户端与Web站点间的会话数据，并且该Cookie数据只允许被所访问的Web站点进行读取。
1.写入Cookie
document.cookie = " 关键字 = 值 [ ; expires = 有效日期 ] [;...]"
备注：
- 有效日期格式：Wdy,DD-Mon-YY HH:MM:SS GMT；
- Wdy / Mon：英文星期 / 月份；
- 还包含path、domain、secure属性；
- 每个Web站点（domain）可建立20个Cookie数据；
- 每个浏览器可存储300个Cookie数据，4k字节；
- 客户有权禁止Cookie数据的写入。
<Script> var today = new Date(); var expireDay = new Date(); var msPerMonth = 24*60*60*1000*31; expireDay.setTime( today.getTime() + msPerMonth ); document.cookie = "name=Hubert;expires=" + expireDay.toGMTString(); document.write("已经将 Cookie 写入你的硬盘中了!<br>"); document.write("内容是：", document.cookie, "<br>"); document.write("这个 Cookie 的有效时间是："); document.write(expireDay.toGMTString()); </Script>
2.读取Cookie
document.cookie
3.删除Cookie
document.cookie = " 关键字 = ; expires = 当前日期"
3.总结
W3C在开发XML DOM的同时，还开发了针对XHTML的DOM。该DOM定义了两个基类：HTMLDocument和HTMLElement。
实际上，每一类型的元素(节点)都是HTMLElement的子类，如Div元素是由HTMLDivElement对象来定义的，每个具体的div元素标签是该类元素对象的实例化对象。
因而，我们可以通过对象.属性和对象.方法来操作每类元素。
这也是js中一切皆对象的核心所在。它对标记语言的对象建模显得比后端业务逻辑建模更加简单、直白、明了。