JavaScript DOM学习札记2——DOM的使用
日期：2014-05-16 浏览次数：20514 次
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著， 曹力 张欣 等译。
?
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
