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

浏览数：18 / 时间：2015年06月09日

由一个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;
    }
};