JavaScript DOM学习札记2——DOM的使用

JavaScript DOM学习笔记2——DOM的使用

1.HTML中的DOM

W3C再开发XML DOM的同时，还针对XHTML以及HTML开发了DOM。这个DOM定义了一个HTMLDocument和HTMLElement作为这种实现的基础。每个HTML元素由对应的HTMLElement类型来表示。例如HTMLDivElement代表<div>标签。

2.访问相关节点

document对象既是BOM的一部分，也是DOM的一部分。因此DOM的处理过程大多数都是以document对象开始的。直接看代码吧。有点特别的东西都在注释里进行了说明。

<html>
	<head>
		<title>DOM Example</title>
		<script type="text/javascript">
			function domTest() {
				var oHtml = document.documentElement;//返回HTML的<html>标签对应的元素
				var oHead = oHtml.firstChild;
				var oBody = oHtml.lastChild;
				//var oHead = oHtml.childNodes[0];
				//var oHead = oHtml.childNodes.item(0);
				//var oBody = oHtml.childNodes[1];
				//var oBody = oHtml.childNodes.item(1);
				//HTML DOM 预定义了body属性直接指向<body>标签
				//var oBody = document.body;
				alert(oHtml.childNodes.length);
				
				alert(oHead.parentNode == oHtml);
				alert(oBody.parentNode == oHtml);
				alert(oBody.previousSibling == oHead);
				alert(oHead.nextSibling == oBody);
				alert(oHead.ownerDocument == document);//ownerDocument属性指向该文档对象

			}
		</script>
	</head>
	<body onload="domTest()">
		<p>Hello,World!</p>
		<p>Isn't thhis exciting?</p>
		<p>You are learing to use DOM!</p>
	</body>
</html>

3.检测DOM节点类型

可以通过nodeType属性来检测节点的类型。上一篇博客中已经提到了12中节点类型，并且举例说明了。这里不再赘述。

检测方法一：返回的是Node接口中定义的节点类型常量代表的数字。

alert(document.nodeType);//输出9
alert(document.documentElement.nodeType);//输出1

检测方法二：使用Node中的常量匹配来检测节点类型。

alert(document.nodeType == Node.DOCUMENT_NODE); //输出true
alert(document.documentElement.nodeType == Node.ELEMENT_NODE);//输出true

但是上面的第二种方法在IE以外的浏览器上基本上都没问题，IE则不行。我测试了一下，既是用IE8也还会报错。那么可以自定义匹配节点类型的常量来解决这个问题。见代码：

if(typeof Node == "undefined") {
	var Node = {
		ELEMENT_NODE:1,
		ATTRIBUTE_NODE:2,
		TEXT_NODE:3,
		CDATA_SECTION_NODE:4,
		ENTITY_REFERENCE_NODE:5,
		ENTITY_NODE:6,
		PROCESSING_INSTRUCTION_NODE:7,
		COMMENT_NODE:8,
		DOCUMENT_NODE:9,
		DOCUMENT_TYPE_NODE:10,
		DOCUMENT_FRAGMENT_NODE:11,
		NOTATION_NODE:12
	};
}

参考书目：

《JavaScript高级编程》Nicolas C. Zakas著，曹力张欣等译。

JavaScript DOM学习札记2——DOM的使用

相关推荐