ADS3.2 DOM2核心和DOM2 HTML——DOM树形结构

前端技术 everyinch 3038℃ 0评论

为了测试和探索DOM,创建一个名为domTesting.js的脚本文件,并将它与ADS.js和myLogger.js一同包含到sample.html文件中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DOM Tree Sample Document</title>
    <!-- inclue some CSS style sheet to make everything look a little nicer -->
    <link rel="stylesheet" type="text/css" href="../../shared/source.css" />
    <link rel="stylesheet" type="text/css" href="../chapter.css" />

    <!-- Your ADS library with the common JavaScript objects -->
    <script type="text/javascript" src="../../ADS-final-verbose.js"></script>
    <!-- Log object from Chapter 2 -->
    <script type="text/javascript" src="../../chapter2/myLogger-final/myLogger.js"></script>
    <!-- Your testing file -->
    <script type="text/javascript" src="domTesting.js"></script>


</head>
<body>
    <h1>DOM Tree</h1>
    <div id="content">
        <p>Examining the DOM2 Core and DOM2 HTML Recommendations</p>
        <h2>Browsers</h2>
        <p>Typically, you'll be expecting the following browsers:</p>
        <!-- Other browsers could be added but we'll keep the list 
        short for the example. -->
        <ul id="browserList">
            <li id="firefoxListItem">
                <a href="http://www.getfirefox.com/"
                    title="Get Firefox" 
                    id="firefox">Mozilla Firefox</a>
            </li> 
            <li>
                <a href="http://www.microsoft.com/windows/ie/downloads/" 
                    title="Get Microsoft Internet Explorer" 
                    id="msie">Microsoft Internet Explorer</a>
            </li> 
            <li>
                <a href="http://www.apple.com/macosx/features/safari/" 
                    title="Check out Safari" 
                    id="safari">Apple Safari</a>
            </li>
            <li>
                <a href="http://www.opera.com/download/" 
                    title="Get Opera" 
                    id="opera">Opera</a>
            </li> 
        </ul>
    </div>
</body>
</html>

sample.html文档的结果如下图所示:
blog_domtree
sample.html文档结构的树形表示为:
blog_domtree1
当浏览器解析sample.html中的标记时,会把标记解析为对象。文档中的每个标签都可以用一个核心对象来表示。下图展示了按照W3C标准来解析sample.html文档:
blog_domtree2
注意到标签之间的空白都被转换成了Text节点,这是DOM规范中规定的对空白符和换行符的处理方式。之所以采取这种方式来处理,主要是希望DOM树能够反映文档中的所有信息。如果把标签之间的空白去掉如下所示那样:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>DOM Tree Sample Document</title><!-- include some CSS style sheet to make everything look a little nicer --><link rel="stylesheet" type="text/css" href="../../shared/source.css" /><link rel="stylesheet" type="text/css" href="../chapter.css" <!-- ADS Library (full version from source linked here) --><script type="text/javascript" src="../../ADS-final-verbose.js"></script><!-- Log object from Chapter 2 --><script type="text/javascript" src="../../chapter2/myLogger-final/myLogger.js"></script><!-- Your testing file --><script type="text/javascript" src="domTesting.js"></script></head><body><h1>AdvancED DOM Scripting</h1><div id="content"><p>Examining the DOM2 Core and DOM2 HTML Recommendations</p><h2>Browsers</h2><p>Typically, you'll be expecting the following browsers:</p><!-- Other browsers could be added but we'll keep the list short for the example. --><ul id="browserList"><li id="firefoxListItem"><a href="http://www.getfirefox.com/"title="Get Firefox" id="firefox">Firefox 2.0</a></li><li><a href="http://www.microsoft.com/windows/ie/downloads/" title="Get Microsoft Internet Explorer" id="msie">Microsoft Internet Explorer 7</a></li> <li><a href="http://www.apple.com/macosx/features/safari/" title="Check out Safari" id="safari">Safari</a></li><li><a href="http://www.opera.com/download/" title="Get Opera" id="opera" >Opera 9</a></li> </ul></div></body></html>

那么W3C DOM2核心就不会再出现额外的Text节点,如下图所示:
blog_domtree3
上面的树形图无法展示对象之间的继承关系。当浏览器解析完sample.html文档后,每个节点并非只是一个单纯的Element对象,而是继承了很多属性和方法。Element对象继承了Node对象的所有属性和方法。具体到<a>标签,该标签是一个DOM2 HTML规范中国的HTMLAnchorElement对象,继承关系如下图所示:
blog_inherit
继承是面向对象语言中的一个重要组成部分,通过继承可以在各种对象之间维护公有的功能。继承也解释了什么段落<p>和锚<a>元素都是Element对象,但在最终文档的DOM对象中,却存在由DOM2 HTML规范中的HTMLParagraphElement对象和HTMLAnchorElement对象规定的不同属性。



转载请注明:陈童的博客 » ADS3.2 DOM2核心和DOM2 HTML——DOM树形结构

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无觅相关文章插件,快速提升流量