JavaScript DOM高级程序设计 3.-DOM2和HTML2--我要坚持到底！

2023-08-28 10:06:34

由一个HTML进行说明，我就不敲了，直接copy

<!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>AdvancED DOM Scripting 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>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>

<div id="where-from">

    From <a href="http://advanceddomscripting.com" title="AdvancED DOM Scripting">AdvancED DOM Scripting</a>

    | <a href="http://www.amazon.com/exec/obidos/ASIN/1590598563/jeffreysamb05-20" title="Buy it on Amazon">Paperback</a>

</div>

</body>

</html>

由于这部分内容似乎都是说明、介绍性的，我也仅仅截几张图吧

DOM核心

在DOM中继承的重要性：虽然我们知道文档中每个元素有多种特性和添加子节点的功能，但你可曾遇到过在一个元素上能够使用的属性和方法，到了另外一个元素上却无效的挫折么？通过理解对象的继承以及哪个基础对象提供那些功能，你就会避免这些挫折

核心Node对象

节点名称，值和类型

例如，下面的一段js代码：

ADS.addEvent(window,'load',function(){

    ADS.log.header('testNodeName');

    ADS.log.write('nodeName is :'+document.getElementById('firefox').nodeName);

});

日志窗口就会输出：nodeName is : A

对于基于文档中标签的其他对象来说,nodeName取决于引用对象的类型

也许你认为可以使用nodeValue,但是，nodeValue属性只适用于少数的DOM对象，尤其是attr，ProcessingTnstructions、Comments、Test和CDATASection。除此之外其他都返回null，例如，获取锚的nodeValue值的操作：

ADS.addEvent(window,'load',function(){

    ADS.log.header('The node value of the anchor');

    ADS.log.write('nodeValue is :'+document.getElementById('firefox').nodeValue);

});

结果会显示：nodeValue is : null

类似的，核心对象类型的nodeValue属性的返回值

ADS.addEvent(window,'load',function(){

    ADS.log.header('Testing nodeType');

    ADS.log.write('nodeType is :'+document.getElementById('firefox').nodeType);

});

如果添加以上的处理事件，则返回：nodeType is :1（锚标签是HTMLAnchorElement的实例，但后者又扩展自Element对象所以锚的nodeType的值显示为1）

如果能在检测nodeType中使用DOM常量就好了（并不是所有浏览器都支持DOM常量）例如：

if (node.nodeType==Node.COMMENT_NODE)

{

    //...

}

而不是

if (node.nodeType==8)

{

    //8代表什么意思来着

}

在ADS库中添加相应的代码

//DOM常量

window['ADS']['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

};

/*

我们就可以在跨浏览器版本中使用DOM常量了

if(node.nodeType==ADS.node.COMMENT_NODE)

{

    //在任何浏览器中使用

}

*/

父节点、子节点、同辈节点

childNodes属性是一个通过数组中以数字索引的元素来表示子节点的NodeList对象。该对象中第一个子元素的索引为0

var first = document.getElementById('browserList').childNodes[0];

//最后一个节点的索引为childNodes.length-1:

var list=document.getElementById('browserList');

var last=list.childNodes[list.childNodes.length-1];

列出所有节点：

ADS.addEvent(window,'load',function(){

    ADS.log.header('List child nodes of the document body');

    for (var i = 0;i<document.body.childNodes.length;i--)

    {

        ADS.log.write(document.body.childNodes.item(i).nodeName);
　　　　　//也可以   document.body.childNodes[i]
    }

});

当只有一个节点的时候，firstChild和lastChild引用的是同一个节点。同样的previousSibling和nextSibling属性应用当前节点前后紧邻的同辈节点

节点的属性

ADS.addEvent(window,'load',function(){

    ADS.log.header('Attributes');

    var firefoxAnchor=document.getElementById('firefox');

    for(var i=0;i<firefoxAnchor.attributes.length;i++)

    {

        ADS.log.write(

            firefoxAnchor.attributes.item(i).nodeName

            +'='

            +firefoxAnchor.attributes.item(i).nodeValue

        );

    }

});

节点的ownerDocument属性

类似于指向节点所属跟文档的引用。大多数邢矿下都可以通过它在作用域链中引用document.或者window.document

操纵节点树（ appendChild和insertBefore 等等）

核心Element对象

操纵Element对象的属性

getAttribute(name)方法给予一个字符串形式的属性名称取得相应的属性值，例如：

ADS.addEvent(window,'load',function(){

    ADS.log.header('Get Safari href attribute');

    var safariAnchor=document.getElementById('safari');

    var href=safariAbchor.getAttribute('href');

    ADS.log.write(href);

});

setAttribute(name,value)

ADS.setEvent(window,'load',function(){

    ADS.log.header('set Safari title attribute');

    var safariAnchor=document.getElementById('safari');

    safariAnchor.setAttribute('title','Safari is for Mac OS x');

});

removeAttribute(name)

ADS.removeEvent(window,'load',function(){

    ADS.log.header('Remove Firefox title attribute');

    var firefox=document.getElementById('firefoxbute');

    firefox.removeAttribute('title')

});

在Element对象中查找Element对象

ADS.addEvent(window,'load',function(){

    ADS.log.header('Get all browserList elements by tag name');

    var list=document.getElementById('browserList');

    var ancestors=list.getElementsByTagName('*');

    for (i=0;i<ancestors.length ;i++ )

    {

        ADS.log.write(ancestors.item(i).nodename)

    }

});

核心Document对象

如果浏览器比较古老，只支持document.all不支持document.getElementById()则用如下检测：

if (document.all&&!document.getElementById)

{

    document.getElementById=function(id)

    {

        return document.all(id);

    }

}

document.documentElement属性（访问HTML根元素的快捷访问方式，即<html>）
使用Document对象的方法创建节点

createAttribute(name)//创建节点类型为Node,ATTRIBUTE_NODE的Attr节点

createCDATASectoin(data)//创建节点类型为Node.CDATA_SECTION_NODE的CDATASection节点

createComment(data)

createElement(tagName)

createEntityReference(name)

createProcessingInstruction(target,data)

createTextNode(data)

使用Document对象的方法查找Element对象--document.getElementById('outer-wrapper');

遍历和迭代DOM树

//如果不关心节点在DOM树中的深度，那么可以使用document.getElementsByTagName('*')

//方法获取指定节点中所有Element节点，并循环遍历节点

function walkElementsLinear(func,node)

{

    var root = node||window.document;

    var nodes = root.getElementsByTagName('*');

    for (var i= 0;i<nodes.length ;i++ )

    {

        func.call(nodes[i]);

    }

};

//如果跟踪节点深度，或者构建一个路径，那么可以通过递归的方法遍历DOM树

function walkTheDOMRecuresive(func,node,depth,returedFromParent)

{

    var root=node||window.document;

    var returnedFromParent=function.call(root,depth++returnedFromParent);

    var node=root.firstChild;

    while (node)

    {

        walkTheDOMRecuresive(func,node,depth,returnedFromParent);

        node=node.nextSibling;

    }

};

码农公寓

相关文章