JavaScript(9) DOM

最新推荐文章于 2022-09-03 11:10:53 发布

vicanary

最新推荐文章于 2022-09-03 11:10:53 发布

阅读量828

点赞数

分类专栏： javaScript 文章标签： dom

本文链接：https://blog.csdn.net/longjuesi/article/details/40976113

版权

javaScript 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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

DOM将标记语言文档映射成有层次的树形node集，每个node都实现了DOM1^[1]定义的node接口，除了IE之外的浏览器都可以访问。Node有三个重要的属性，nodeType，nodeName，nodeValue.

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

查找元素，定位document中的指定元素，DOM有两个方法：document.getElementById() 和 document.getElementByTagName()，HTMLDocument额外定义了一个方法：document.getElementByName()。这三个方法都是闻名知意的，在此不再赘述。

【1】DOM1:：DOM level 1.