JavaScript DOM高级程序设计 3.-DOM2和HTML2--我要坚持到底！
由一个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;
}
};
优质内容筛选与推荐>>
1、【转】等比数列二分求和
2、日记
3、JMeter 测试 Java 请求
4、Microsoft Expression Studio 4 Ultimate 中文版发布
5、「LibreOJ β Round #4」子集