DOM:Document Object Model,文档对象模型。
DOM是将HTML和XML映射成层次结点结构的API,它提供了一套方法去访问和控制HTML和XML,虽然在javascript中必然要说到DOM(像HTML一样,Javascript中肯定也要说到。实际上,html+css+js,它们总是互相纠缠,如果对其它两个不了解,学习其中一种总有云里雾里的感觉),但它并不是javascript中的内容(但本文下面讨论的是javascrip t对 dom 的实现)。DOM是一种通用的模块,可以被任意支持的第三方调用,它是平台无关,语言无关的。
这个网址是dom的维护内容公布网站:http://www.w3.org/DOM/Activity
1.Node
Properties
nodeType有以下12种,可以用数字来表示,也可以用字符串(IE9及更早只能用数字)。
NodeType | Named Constant |
---|---|
1 | ELEMENT_NODE |
2 | ATTRIBUTE_NODE |
3 | TEXT_NODE |
4 | CDATA_SECTION_NODE |
5 | ENTITY_REFERENCE_NODE |
6 | ENTITY_NODE |
7 | PROCESSING_INSTRUCTION_NODE |
8 | COMMENT_NODE |
9 | DOCUMENT_NODE |
10 | DOCUMENT_TYPE_NODE |
11 | DOCUMENT_FRAGMENT_NODE |
12 | NOTATION_NODE |
Node的另外两个属性,nodeName 和 nodeValue 与nodeType息息相关(意即,在实际的编程中需要确认nodeType,才会访问这两个值)。请看例子,有如下html页面:
<!doctype html>
<html lang="en">
<head>
<title id = "tl">Document</title>
<script type="text/javascript" defer="defer" src="./jsTest.js"></script>
</head>
<body>
<h1 id = "h1">About DOM nodetype</h1>
<ol id="orderList">
<li id="list1">nodeType</li>
<li id="list2">nodeName</li>
<li id="list3">nodeValue</li>
</ol>
</body>
</html>
jsTest.js有如下代码:
var node1 = document.getElementById("h1");
alert("nodeType:"+node1.nodeType+"\nnodeName:"+node1.nodeName)//nodeType:1 nodeName:H1
var doc = window.document
alert("nodeType:"+doc.nodeType+"\nnodeName:"+doc.nodeName)//nodeType:9 nodeName:#document
Node Relationships
DOM映射成的节点树,节点之间的关系毫无疑问是重点。parentNode,childNodes,previousSibling,nextSibling,etc。
根据这些关系可以根据已获得节点搜索目标节点,或者分析文档(HTML文档的根节点就是HTML元素)。
下面的代码依旧使用前面的html文档(用chrome 打开):
var list2 = document.getElementById("list2");
var ol = list2.parentNode;
alert("nodeType:"+ol.nodeType+"\nnodeName:"+ol.nodeName)//nodeType:1 nodeName:OL
var list1= list2.previousSibling;
alert(list1.innerHTML);//undefined
为什么会返回undefined呢?实际上前一行,list1得到的是一个text元素,很多浏览器会在documentElement之间插入text元素表示空白,你可以查看 ol 的 childNotes 来验证,参见
https://developer.mozilla.org/en-US/docs/Web/API/Node.nextSibling
所以为使上述代码可以执行在获取当前元素的前置兄弟元素应使用 previousElementSibling 属性。
Manipulating Node
- someNode.appendChild(node):将node节点添加到 someNode.lastChild 之后。如果node存在于 someNode 中,则删除 someNode 中的node,再将 node 添加到其最后。
- someNode.insertBefore(node,someNode.someChildnode):在 someNode 的子结点 someChildnode 之前插入node结点,如果 someChildnode 不存在,则将node 插入到s omeNode.lastChild 之后。
- someNode.replaceChild(node,someNode.someChildnode):用 node 置换 someNode 的子节点 someChildnode。
- someNode.removeChild(someNode.someChildnode):移除 someNode 的子节点s omeChildnode。
- someNode.cloneNode(boolean):克隆 someNode,当参数为 true 表示同时克隆 someNode 及其子树(子结点),如果为 false,仅仅克隆 someNode。
- someNode.normalize():遍历 someNode 的所有子孙节点,通过删除空的 Text 节点,合并所有相邻的 Text 节点来规范化文档。
2.Document
Javascript 用document 对象来表示 document 节点。document 在表示根节点的同时,也包含了所有子孙的信息。同时 document 是 window 对象的一个属性,所以全局可访问。
document子节点
window.document表示浏览器的一个页面,请不要将它与<html>元素相混淆,document包含document.documentElement(就是<html>节点),如下页面:
<!doctype html>
<!--comment node1 -->
<!--comment node2 -->
<html lang="en">
<head>
<title id = "tl">Document</title>
<script type="text/javascript" defer="defer" src="./jsTest.js"></script>
</head>
<body>
<h1 id = "h1">About DOM nodetype</h1>
<ol id="orderList">
<li id="list1">nodeType</li>
<li id="list2">nodeName</li>
<li id="list3">nodeValue</li>
</ol>
</body>
</html>
jsTest.js中包含如下代码:
alert(document.documentElement);
执行脚本时中断,查看 document 的 childNodes 显示如下:
可以看到它有四个子节点,<!DOCTYPE>,comment,comment,html
最后一个html才是html节点。
document 属性
- document.title:显示在浏览器顶部tab页上的名称,虽然它是定义在html元素下的head元素中的<title>元素中,但是只能通过document来访问,用document.documentElemet.title无法访问。title是只读的。
- document.URL:显示在地址栏中的url。URL是只读的。
- document.domain:文档的域。域是范围的意思,有权限的隐含意义。javascript 跨域无法互相访问对方window中的资源,当一个页面中包含多个frame或iframe,可以将它们的domai设成一样以使它们可以互相访问。
- document.referer:引用者。如果当前页面是通过超链接打开,那么引用者就是包含那个链接的页面URL。
locating element
【1】DOM1::DOM level 1.