DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口)。他描绘了一个层次化的节点树,容许开发人员添加、移除和修改页面的某一部分。javascript
DOM将任何HTML和XML文档描绘成一个由多层节点构成的结构。html
文档节点(Document)是每一个文档的根节点。文档节点只有一个子节点(HTML文档中实终是<html>),咱们称之为文档元素(每一个文档只能有一个文档元素)。文档元素是文档的最外层元素,其余全部元素都包含在文档元素中。java
每一段标记都能经过树中一个节点来表示,包括特性、文档类型、注释等,共有12种节点类型。这些类型都继承自一个基类型。node
JavaScript中的全部节点类型都继承自Node类型,全部的节点类型都共享相同的基本属性和方法。跨域
nodeType属性:代表节点的类型(12种)数组
eg:Node.ELEMENT_NODE(1); //元素节点浏览器
经过该属性能够肯定一个节点的类型,能够经过类型字面量判等,也能够经过数字值比较。app
if (someNode.nodeType == Node.ELEMENT_NODE){ //在IE中无效 alert("Node is element."); } if (someNode.nodeType == 1){ //适用于任何浏览器 alert("Node is element."); }
能够了解节点的具体信息。dom
对于元素节点,nodeName保存的始终是标签名,nodeValue的值始终是null。工具
1 | childNodes属性 | 保存NodeList对象(类数组,但不是数组),这个对象也有length属性。能够经过方括号,也能够经过item()方法访问节点。能够经过Array.prototype.slice()方法将其转换为数组。 |
2 | parentNode属性 | 指向父节点。 |
3 | previousSibling / nextSibling属性 | 访问同一列表中的其余属性。即前一个和后一个同胞节点。 |
4 | firstChild / lastChild属性 | 指向childNodes列表的第一个和最后一个节点。 |
1 | hasChildNodes() | 检验是否存在子节点。存在时返回true。 |
2 | ownerDocument() | 指向整个文档的文档节点。方便直接到达顶端。 |
1 | appendChild() | 向childNodes列表的末尾添加一个节点。返回新的节点。因为任何一个节点不能同时出如今多个位置上,因此当传入的节点是父节点的子节点时,这个节点会变成最后一个子节点。 |
2 | insertBefore() | 将节点插入到childNodes列表中一个特定的位置。接收两个参数:要插入的节点和做为参照的节点。 插入节点后,被插入节点会成为参照节点的前一个同胞节点,同时被方法返回。省略参照节点时与appendChild()执行相同的操做。 |
3 | replaceChild() | 替换节点(复制全部的关系指针)。接收两个参数:要插入的节点和要替换的节点。被替换的节点将从文档树中移除,但仍然在文档中,只是没有了本身的位置(指针)。 |
4 | removeChild() | 移除节点。返回被移除的节点。一样被移除的节点仍然在文档中。 |
PS1:使用这几个方法必须取得父节点(使用parentNode属性)。
PS2:不是全部类型的节点都有子节点。在不支持子节点的节点上调用这些方法,会抛出错误。
1 | cloneNode() | 建立调用这个方法的节点的一个彻底相同的副本。接受一个布尔值参数,表示是否执行深复制(true则执行深复制)。
复制后返回的节点归文档全部,没有为他指定父节点。要经过其余的方法把他加入到文档中。 IE>9及其余浏览器会计入空白节点。 |
2 | normalize() | 处理文档树中的文本节点。
|
Document类型表示文档。
Document节点的特征:
1 | DocumentType(最多一个) | <!DOCTYPE>标签,能够经过document.doctype属性来访问他的信息。 |
2 | Element(最多一个) | 文档元素<html>。 经过documentElement属性或childNodes列表(在无处理指令的状况下是firstChild)访问可快速找到html元素。 document.body属性能够指向<body>元素(由于该元素使用频率高,为了便于开发增添该属性)。 |
3 | ProcessingInstruction | 表示处理指令。 |
4 | Comment | 注释。 |
做为HTMLDocument的实例,document对象还有一些特殊的属性。
1 | title | <title>元素中的文本,是当前页面的标题。 |
2 | URL | 完整的URL。 |
3 | domain | 页面的域名。仅domain能够设置。但有必定的限制:
做用:将每一个页面的document.domain设置为相同的值,就能够互相访问对方包含的JavaScript对象了。(解决跨域问题) |
4 | referrer | 连接到当前页面的那个页面的URL。在没有来源页面的状况下是空字符串。 |
1 | getElementById() | 参数为要取得元素的ID。找到返回该元素,没有找到返回null。若是有多个id值相同,则只会返回第一个。 |
2 | getElementByTagName() | 参数为要取得元素的标签名。返回元素的NodeList。在HTML文档中,返回的是HTMLCollection对象。能够经过方括号或者item()方法来访问。 |
3 | nameItem() | HTMLCollection对象的方法。经过元素的name属性取得集合中的项(第一项)。同时HTMLCollection对象还支持按名称访问项。 |
4 | getElementByName() | 返回带有给定name属性的全部元素(一个HTMLCollection)。 |
ducument.implementation属性:提供关于实现了DOM 哪些部分的信息的对象。
他有一个方法,hasFeature()。接收两个参数:要检测的DOM功能的名称和版本号。若是支持给定名称和版本的功能,则返回true。
检验结果true不意味着现实与规范一致,最好除了检测hasFeature()以外,同时使用能力检测。
write() / writeln():接受一个字符串,即写入输出流中的文本。write()会原样写入,writeln()会在字符串末尾添加一个换行符(\n)。这两个方法能够向页面中动态的加入内容。
//在页面加载过程当中输出当前的日期和时间 document.write("<strong>" + (new Date()).toString() + "</strong>");
同时还能够用来动态的包含外部资源,例如JavaScript文件等。
document.write("<script type=\"text/javascript\" src=\"file.js\"> + "<\/script>");
PS:因为不能直接包含字符串"</script>"(这样会致使该字符串被解释为脚本的结束,后面的代码没法运行),因此要将这个字符串分开写。
在页面被呈现的过程当中,会直接输出内容。若是在文档加载结束后(window.onload)再调用write(),那么输出的内容会重写整个页面。
方法open()和close()分别用于打开和关闭网页的输出流。
Element类型提供了对元素标签名、子节点及特性的访问。Element节点具备如下特征:
tagName属性:返回访问元素的标签名(与nodeName相同)。 => 在HTML中标签名始终以所有大写表示,须要检验标签类型时最好调用toLowerCase()方法。
全部HTML元素都由HTMLElement类型表示。HTMLElement类型直接继承自Element并添加了一些属性。