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

JavaScript DOM高级程序设计 3.-DOM2和HTML2--我要坚持到底!的更多相关文章

  1. JavaScript DOM高级程序设计 4.2 事件类型--我要坚持到底!

    对象事件 load和unload(载入页面的时候调用load,关闭页面的时候调用unload) abort和error 对于载入图像时出现错误的情况,可以使用error事件侦听器来进行说明: ADS. ...

  2. JavaScript DOM高级程序设计1.3-常见陷阱--我要坚持到底!

    区分大小写 单引号双引号 大多数开发人员选择用单引号,因为XTHML要求所有XHTML的属性都必须使用双引号 var html='<h2 class="a">A lis ...

  3. JavaScript DOM高级程序设计 7.向应用程序加入Ajax--我要坚持到底!

    有时候,或许是因为理解能力,也或许是因为浮躁,看东西总是不入心,而且还老是想跳过本节,或者赶紧看完本节,这样的恶性循环,让我在即没有真正的学习到知识,又打击我的学习信心,还浪费了我很多事件,我想,当遇 ...

  4. JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底!

    一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...

  5. JavaScript DOM 高级程序设计读书笔记二

    响应用户操作和事件 事件就是操作检测与脚本执行的组合,或者基于检测到的操作类型在某个对象上调用事件侦听器(事件处理程序). 事件的类型 事件可以分为几种类型:对象事件,鼠标事件,键盘事件(只适用于do ...

  6. JavaScript DOM 高级程序设计读书笔记一

    创建可重用的对象 简而言之,对象就是包含一组变量(称为属性)和函数(称为方法)的集合的实例.对象通常由类派生而来,而类中定义了对象拥有的属性和方法.如果你的脚本中都是对象之间的交互操作,那么就可以称之 ...

  7. JavaScript DOM高级程序设计 5动态修改样式和层叠样式表2--我要坚持到底!

    把样式置于DOM脚本之外 style属性 我们可以这样设置前景色之类的属性: element.style.color='red'; 也可以使用下面的代码设置背景颜色: element.style.ba ...

  8. JavaScript DOM高级程序设计 5动态修改样式和层叠样式表1(源代码)--我要坚持到底!

    W3C DOM2样式规范 现在这边贴出本章要的源代码,注意要结合前面用到的ADS库http://vdisk.weibo.com/s/Dq8NU CSSStyleSheet对象属性: type :始终是 ...

  9. JavaScript DOM高级程序设计 3.6 实例 将HTML代码转换成DOM代码(附源码)--我要坚持到底!

    作为一名Web开发者,最讨厌的事情就是重复性任务,摆脱乏味的日常重复性事物的一种方法,是借助可重用的对象或者说与你现在建立的ADS库类似的库,另外一种让事情变得有意思,且能够加速开发进程的方式是编写能 ...

随机推荐

  1. Tcl Tk Introduction

    Tcl Tk Introduction eryar@163.com 摘要Abstract:Tcl/Tck脚本可以很容易实现用户自定义的命令,方便的创建图形化的用户界面GUI,所以Tcl和Tk的应用领域 ...

  2. MinGW平台 openjpeg-2.1.0 静态编译后未定义引用的解决方法

    undefined reference to __imp_opj_xxx keyword: ffmpeg,openjpeg,OPJ_EXPORTS,OPJ_STATIC,opj_version,__i ...

  3. php的时间输出格式

    php中时间一般分为两种格式,一种是标准时间格式timestamp,即Y-m-d G:i:s.另一种就是时间戳. 例如: 一.标准时间与时间戳转换: //获得服务端系统时间 date_default_ ...

  4. Java动态代理的两种实现方式:

    方式一:传统的代理 package cn.hc.domain; import java.lang.reflect.InvocationHandler; import java.lang.reflect ...

  5. Apache+PHP+Mysql 集成环境 几个软件pk

    WampServer 2.5 64位 - 工具软件 - 源码之家 2014年8月25日 - WampServer是Apache+PHP+Mysql 集成环境,拥有简单的图形和菜单安装和配置环境.支持2 ...

  6. jquery hasClass、removeClass、addClass方法

    hasClass(class) 检查当前的元素是否含有某个特定的类,如果有,则返回true. 参数: class:用于匹配的类名. ---------------------------------- ...

  7. HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. Web service是什么?(转)

    我认为,下一代互联网软件将建立在Web service(也就是"云")的基础上. 我把学习笔记和学习心得,放到网志上,欢迎指正. 今天先写一个最基本的问题,Web service到 ...

  9. android应用程序ANR定义

    在Android上,如果你的应用程序有一段时间响应不够灵敏,系统会向用户显示一个对话框,这个对话框称作应用程序无响应(ANR:Application Not Responding)对话框.用户可以选择 ...

  10. jstack jstat 简易使用教程

    jstack – 用来查看堆栈信息 jstat – 用来查看JVM相关信息 jstack用法 找到CPU使用最高的进程:top命令,然后按P,CPU使用率排序,就可以看到对应的pid 先说一种暴力的方 ...