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

最新推荐文章于 2024-09-08 21:17:37 发布

wawlian

最新推荐文章于 2024-09-08 21:17:37 发布

阅读量313

点赞数

分类专栏： JavaScript 文章标签： javascript html processing reference xhtml ie

本文链接：https://blog.csdn.net/wawlian/article/details/6973171

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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著，曹力张欣等译。

wawlian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM学习笔记2——DOM的基本使用

1.HTML中的DOM W3C再开发XML DOM的同时，还针对XHTML以及HTML开发了DOM。这个DOM定义了一个HTMLDocument和HTMLElement作为这种实现的基础。每个HTML元素由对应的HTMLElement类型来表示。例如HTMLDivElement代表标签。2.访问相关节点 document对象既是BOM的一部分，也
复制链接

扫一扫

专栏目录