通过对《JavaScript DOM编程艺术》这本书的学习，总共学习到三大部分的内容：JavaScript1,JavaScript DOM和CSS样式表。CSS和JavaScript 都是通过控制页面标签的方式，来完善页面，使页面更美观，内容更丰富。

一、JavaScript部分

1．关于JavaScript js脚本语言

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 2．JS变量

2.1 JS的变量为易变量，没有类型的限制可以等于所有的类型。 2.2 JS变量的命名规则和java相同，且区分大小写。

JS的数据类型有7种：Number 数字类型、String 字符串类型、Boolean 布尔类型、Array 数组类型、Object 对象、Null 空对象、Undefined 未定义。

2.3 变量的声明，直接用var关键字声明即可：var a=90。也可以一次性声明多个变量：var b=1,c=2,d=3。如果一个变量没有声明就使

用，或是声明了没有设置值都是undefined。 3．数据类型的定义 数值类型: var age=33;

字符串类型: var mood=”happy” 布尔值类型: var add=true; 数组类型: var list= Array(2) list[0]=”jhon”; list[1]=33; 或者: var list=Array(“jhon”,33)

(注:数组内可定义任意类型的数据,且数组下标从 0 开始) NULL类型: var name=null ;或 name=””; Undefined类型: var person; 对象类型: var jer= new person;

对象类型是一种非常重要的数据类型.对象是自我包含的数据集合,包含在对象里的数据可以通过两种方式--属性(property)和方法(method) 访问 例如: person.age Math.round() 4．JS操作符

算数操作符 : 加法(+),减法(-),乘法(*),除法(/) 如: var num=1+1; var num=num-1;

var num=num*num; var num=num/2;

赋值操作符 : = 如: var age=33 比较操作符 : >,>=,<,<=,==,===,!=(不等于) 逻辑运算符: &&(逻辑与), ||(逻辑或)

其中JS的运算符号和java的基本类似，有区别的地方在于JS有==和===，==只比较数据的值不比较类型，===叫全等于既比较值也比较数据类型

5．条件语句(或判断语句) if(condition) {

statements; }

(注:条件必须放在if后边括号中,条件的求值结果永远是布尔值,true或false) 6．循环语句 6.1 while(condition){ statements;

} //只要给定条件求值为true,花括号内代码反复执行 6.2 do{

statements; } while(condition)

// 控制条件的求值发生在每次循环后,即使循环控制条件首次求值结果为false,花括号内语句也至少会被执行一次

6.3 for(initial condition;test condition;alter condition ){ statements; }

// 与循环有关的内容都放在for后边的圆括号内 如: for(var i=0;i<10;i++){ alert(i); } 7．JS函数

function 函数的名称(【参数的名称】){ 函数体

【return返回值】 }

【】中的为可选项。

8．变量范围

8.1变量的作用范围：使用了var关键字的变量如果不在函数里则为全局变量，在函数中带有var关键字的变量为局部变量，只能在此函数中使用。没有使用var关键字的变量即使在函数中，在此函数被调用后该变量也为全局变量。

8.2全局变量:可以在脚本任何位置引用,作用域是整个脚本. 8.3局部变量:只存在于对它做出声明的那个函数,作用域为某个特定函数

二、DOM 部分

1．关于DOM

文档对象模型（Document Object Model，简称DOM），是W3C

组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

2．DOM的运用

DOM把一份表示为一棵树，更具体表示为“家谱树”，；来

互相表示各个成员之间的关系。 如

：

这个网页中所有html元素关系可表示为如下

3．节点

节点这个名词来自网络，代表网络中的一个连接点。网络是由

节点构成的集合。

元素节点:如在上图中，

等元素节点,

文本节点:

元素中包含文本”Do not forget to buy

this stuff.”

属性节点:title=\"a gentle reminder\属性节点包含

于元素节点当中。

关系图：

4．相关代码（以下以此段代码为示例）

4.1 getElementById（）方法

这个方法是与document对象相关联的函数。函数名后带有圆括号，内含函数参数，id值必须放在单引号或双引号里

document.getElementById（id）

例子：document.getElementById(\"purchases\") getElementById（）方法将返回一个对象（object），该对象对应着文档里一个特定的元素节点。测试语句，用typeof操作符来查看返回的值

4.2 getElementByTagName（）方法 element.getElementByTagName（tag）

（Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。）

例子：document.getElementsByTagName(\"li\") getElementByTagName（）方法将返回一个对象数组，他们分别对应着文档里的一个特定的元素节点。测试语句

4.3 getAttribute（）方法

该方法是一个函数，参数为：你要查询的属性的名字，不能通过document调用，只能通过一个元素节点对它调用 object.getAttribute（attribute） 例子：查询每个

元素的属性

检测所有

元素的title属性. 4.4 setAttribute（）方法

也只能通过元素节点调用,该方法需要传递两个参数,一个是

元素的属性,另一个是要设置的值 object.setAttribute（attribute,value） 例子:

检测带有title的

元素,并修改title的属性值. 5．childNodes属性

childNodes属性可以将任何一个元素的所有子元素检索出来。该属性将返回一个数组，数组中包含给定的元素节点的所有子元素。

element.childNodes

例子：

document.getElementsByTagName(\"body\")[0].childNodes；

或者 document.body.childNodes；

6．nodeType属性

调用语法： node.nodeType

例子:

常用类型:

7．nodeValue属性

用于检索（和设置）节点的值。 调用语法：node.nodeValue

例子：检索节点值（如：检索一个id为des的节点第一个子元素的属性）

设置节点值：

8．firstChild和lastChild

访问childNodes[]数组的第一个元素和最后一个元素 调用语法： node.firstChild node.lastChild 9．innerHTML属性

可以用来读、写某给定元素里的HTML内容 例子：

注：有时,内容被替换,没有时,会插入一个按钮 名字为 111;

10．createElement（）方法 创建一个新的元素

调用方法：document.createElement（nodeName） 例子：

创建一个新元素

并给它设置id属性值为description 11．appendChild()方法

把新建节点插入节点树，使新建节点成为某个节点的子

节点。

调用方法：parent.appendChild（child） 例子：

12．insertBefore（）方法

这个方法把一个新元素插入到一个现有元素的前面。 注意事项：

1.想插入的新元素（newElement）

2.把它插入哪个现有元素（targetElement）前面 3.两个元素的共同父元素（parentElement）

调用方法：parentElement.insertBefore（newElement，targetElement）

例子：

注：parentNode 属性以 Node 对象的形式返回指定节点的父节点。

如果指定节点没有父节点，则返回 null。

（后文中有insertAfter（）方法，把一个新元素插入到一个现有元素的后面，是自己定义的方法，多被采用）

三、CSS部分

1.关于CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现

HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

2.属性值 ①整数和实数

这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。 ②长度量

一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。

相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800*600的设置下，一个像素的长度就等于屏幕的宽度除以800。

另一一点值得注意的是，子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。

③百分数量（percentages）

百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。

3.CSS选择器

4.语法示例

界面：

（需要相关js文件配合）

四、常用语法

1.把执行函数加载到window.onload事件处理函数

(1)把现有window.onload事件处理函数存入变量oldonload (2)如果处理函数上没绑定任何函数,把新函数添加给它 (3)如果已经绑定了一些函数,把新函数追加到现有指令的末尾

注:()内参数为要执行的函数名，不带有括号、参数等

2.给某一新元素追加新的class值

（1）className属性值是否为null（2）如果是，把新的class设置值赋值给className属性（3）如果不是，把一个空格和新的class设置值追加到className属性上去

函数参数：将获得新class设置值的元素（element）和新的class

设置值（value）

3.把一个新元素插入到一个现有元素的后面

nextSibling属性：返回指定节点之后紧跟的节点，在相同的树层级

中。

被返回的节点以 Node 对象返回。

注释：如果没有 nextSibling 节点，则返回值为 null。

4.图片实现动画效果

5.给当前页面超链提供一个class属性,取值为here

6.选择的显示和隐藏div元素,让他们某一时刻只有一个在浏览器窗口可见(此处以div的class=”section”为例)

7.点击一个图片链接,在当前页面打开,且显示title属性值 (调用时 shouPic(this) this做参数 代表当前)

8.给表格的奇数行(或偶数行)设置class属性,以便于改变样式 (找出所有table,遍历其中所有行,设置变量odd初始为false

如果odd值为true,设置样式(或不设置)并把变量改为false)

五、总结

1.首先要考虑通过JavaScript去改变这个网页是否是必要的，写代码并不是越多越好。

2.一定要“预留退路”，并不是每个浏览器都支持JavaScript。 我们要保证，当JavaScript不被执行时，网页能完成基本操作 3.实现页面与JavaScript分离。网页大体分为三个部分：结构层（由HTML标签组成的），表示层（CSS样式）和行为层（JavaScript语言和DOM领域）。我们要保证表示层和行为层要为结构层服务，但是也要独立存在。内嵌的JavaScript语句一旦网页不支持，整个网页将无法执行

4.进行必要的检查。如:if(!document.getElementById)

return false;如果浏览器不理解这个函数立即离开.

5.创建必要的变量。如：

var intro=document.getElementById(\"intro\"); 避免每次都要写后边那一段。

6.正确的理解JavaScript中的对象、函数、数组、变量等 7.每一种语言都有它存在的意义

六、测试代码

1.global.js

{

1. function addLoadEvent(func)

var oldonload=window.onload;

if(typeof window.onload!='function') { window.onload=func;

}else { window.onload=function() { oldonload(); func(); } } }

2. function insertAfter(newElement,targetElement) { var parent=targetElement.parentNode; if(parent.lastChild==targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } }

3. function addClass(elements,value) { if(!elements.className) { elements.className=value; }else { newClassName=elements.className; newClassName+=\" \"; newClassName+=value; elements.className=newClassName; } }

4. function highlightPage() { if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementById(\"navigation\")) return false; var nav=document.getElementById(\"navigation\"); var links=nav.getElementsByTagName(\"a\"); for(var i=0;ivar currenturl=window.location.href; if(currenturl.indexOf(linkurl)!=-1) { links[i].className=\"here\"; var linktext=links[i].lastChild.nodeValue.toLowerCase(); document.body.setAttribute(\"id\ } } }

addLoadEvent(highlightPage);

2.Home.js

function moveElement(elementID,final_x,final_y,interval) {

if(!document.getElementById) return false;

if(!document.getElementById(elementID)) return false; var elem=document.getElementById(elementID); if(elem.movement) {

clearTimeout(elem.movement); }

if(!elem.style.left) {

elem.style.left=\"0px\"; }

if(!elem.style.top) {

elem.style.top=\"0px\"; }

var xpos=parseInt(elem.style.left); var ypos=parseInt(elem.style.top); if(xpos==final_x && ypos==final_y) {

return true; }

if(xposvar dist=Math.ceil((final_x-xpos)/10); xpos=xpos+dist; /*xpos++;*/ }

if(xpos>final_x) {

var dist=Math.ceil((xpos-final_x)/10);

xpos=xpos-dist; /*xpos--;*/ }

if(yposvar dist=Math.ceil((final_y-ypos)/10); ypos=ypos+dist; /* ypos++;*/ }

if(ypos>final_y) {

var dist=Math.ceil((ypos-final_y)/10); ypos=ypos-dist; /*ypos--;*/ }

elem.style.left=xpos+\"px\"; elem.style.top=ypos+\"px\"; var repeat=

\"moveElement('\"+elementID+\"',\"+final_x+\+final_y+\+interval+\")\"; elem.movement=setTimeout(repeat,interval); }

function prepareSlideshow() {

if(!document.getElementsByTagName) return false; if(!document.getElementById) return false;

if(!document.getElementById(\"intro\")) return false; var intro=document.getElementById(\"intro\"); var slideshow=document.createElement(\"div\"); slideshow.setAttribute(\"id\",\"slideshow\"); var preview=document.createElement(\"img\");

preview.setAttribute(\"src\",\"images/slideshow.gif\");

preview.setAttribute(\"alt\",\"a glimpse of what awaits you\"); preview.setAttribute(\"id\",\"preview\"); slideshow.appendChild(preview); insertAfter(slideshow,intro);

var links=document.getElementsByTagName(\"a\"); for(var i=0;ilinks[i].onmouseover=function() {

var destination=this.getAttribute(\"href\"); if(destination.indexOf(\"index.jsp\")!=-1) {

moveElement(\"preview\",0,0,5); }

if(destination.indexOf(\"about.jsp\")!=-1) {

moveElement(\"preview\",-150,0,5); }

if(destination.indexOf(\"photos.jsp\")!=-1) {

moveElement(\"preview\",-300,0,5); }

if(destination.indexOf(\"live.jsp\")!=-1) {

moveElement(\"preview\",-450,0,5); }

if(destination.indexOf(\"contact.jsp\")!=-1) {

moveElement(\"preview\",-600,0,5); } } } }

addLoadEvent(prepareSlideshow);

3.About.js

function showSection(id) {

var divs=document.getElementsByTagName(\"div\"); for(var i=0;iif(divs[i].className.indexOf(\"section\")==-1)continue; if(divs[i].getAttribute(\"id\")!=id) {

divs[i].style.display=\"none\"; } else {

divs[i].style.display=\"block\"; } } }

function prepareInternalnav() {

if(!document.getElementsByTagName) return false;

if(!document.getElementById) return false;

if(!document.getElementById(\"internalnav\")) return false; var nav=document.getElementById(\"internalnav\"); var links=nav.getElementsByTagName(\"a\"); for(var i=0;ivar sectionId=links[i].getAttribute(\"href\").split(\"#\")[1]; if(!document.getElementById(sectionId)) continue;

document.getElementById(sectionId).style.display=\"none\"; links[i].destination=sectionId; links[i].onclick=function() {

showSection(this.destination); return false; } } }

addLoadEvent(prepareInternalnav);

4.Photos.js

function showPic(whichpic) {

if(!document.getElementById(\"placeholder\")) return true; var source=whichpic.getAttribute(\"href\");

var placeholder=document.getElementById(\"placeholder\"); placeholder.setAttribute(\"src\",source);

if(!document.getElementById(\"description\")) return false; var text=whichpic.getAttribute(\"title\")? whichpic.getAttribute(\"title\"):\"\";

var description=document.getElementById(\"description\"); if(description.firstChild.nodeType==3){ description.firstChild.nodeValue=text; }

return false; }

function preparePlaceholder(){

if(!document.createElement) return false; if(!document.createTextNode) return false; if(!document.getElementById) return false;

if(!document.getElementById(\"imagegallery\")) return false; var placeholder=document.createElement(\"img\"); placeholder.setAttribute(\"id\", \"placeholder\");

placeholder.setAttribute(\"src\", \"images/placeholder.gif\"); placeholder.setAttribute(\"alt\", \"my image gallery\");

var description=document.createElement(\"p\"); description.setAttribute(\"id\", \"description\");

var destext=document.createTextNode(\"Choose an image\"); description.appendChild(destext);

var gallery=document.getElementById(\"imagegallery\"); insertAfter(description,gallery);

insertAfter(placeholder,description); }

function prepareGallery() {

if(!document.getElementsByTagName)return false; if(!document.getElementById)return false;

if(!document.getElementById(\"imagegallery\"))return false; var gallery=document.getElementById(\"imagegallery\"); var links=gallery.getElementsByTagName(\"a\"); for(var i=0;ilinks[i].onclick=function(){ showPic(this); return false; } } }

addLoadEvent(preparePlaceholder); addLoadEvent(prepareGallery);

5.Live.js

function stripeTables() {

if(!document.getElementsByTagName) return false; var tables=document.getElementsByTagName(\"table\"); for(var i=0;ivar odd=false;

var rows=tables[i].getElementsByTagName(\"tr\"); for(var j=0;jif(odd==true) {

addClass(rows[j],\"odd\"); odd=false; } else {

odd=true;

} } } }

function highlightRows() {

if(!document.getElementsByTagName) return false; var rows=document.getElementsByTagName(\"tr\"); for(var i=0;irows[i].oldClassName=rows[i].className; rows[i].onmouseover=function() {

addClass(this,\"highlight\"); }

rows[i].onmouseout=function() {

this.className=this.oldClassName; } } }

function displayAbbreviations() {

if(!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;

var abbreviations=document.getElementsByTagName(\"abbr\"); if(abbreviations.length<1) return false; var defs=new Array();

for(var i=0;ivar current_abbr=abbreviations[i];

if(current_abbr.childNodes.length<1) continue;

var definition=current_abbr.getAttribute(\"title\"); var key=current_abbr.lastChild.nodeValue; defs[key]=definition; }

var dlist=document.createElement(\"dl\"); for(key in defs) {

var definition=defs[key];

var dtitle=document.createElement(\"dt\");

var dtitle_text=document.createTextNode(key); dtitle.appendChild(dtitle_text);

var ddesc=document.createElement(\"dd\");

var ddesc_text=document.createTextNode(definition); ddesc.appendChild(ddesc_text); dlist.appendChild(dtitle); dlist.appendChild(ddesc); }

if(dlist.childNodes.length<1) return false; var header=document.createElement(\"h3\");

var header_text=document.createTextNode(\"Abbreviations\"); header.appendChild(header_text);

var container=document.getElementById(\"content\"); container.appendChild(header); container.appendChild(dlist); }

addLoadEvent(stripeTables); addLoadEvent(highlightRows);

addLoadEvent(displayAbbreviations);

6.contact.js

function focusLabels() {

if(!document.getElementsByTagName) return false; var labels=document.getElementsByTagName(\"label\"); for(var i=0;iif(!labels[i].getAttribute(\"for\")) continue; labels[i].onclick=function() {

var id=this.getAttribute(\"for\");

if(!document.getElementById(id)) return false; var element=document.getElementById(id); element.focus(); } } }

addLoadEvent(focusLabels);

function resetFields(whichform) {

for(var i=0;ivar element=whichform.elements[i]; if(element.type==\"submit\") continue; if(!element.defaultValue) continue; element.onfocus=function() {

if(this.value==this.defaultValue) {

this.value=\"\"; } }

element.onblur=function() {

if(this.value==\"\") {

this.value=this.defaultValue; } } } }

function prepareForms() {

for(var i=0;ivar thisform=document.forms[i]; resetFields(thisform);

thisform.onsubmit=function() {

return validateForm(this); } } }

addLoadEvent(prepareForms); function isFilled(field) {

if(field.value.length<1 || field.value==field.defaultValue) {

return false; } else {

return true; } }

function isEmail(field) {

if(field.value.indexOf(\"@\")==-1 || field.value.indexOf(\".\")==-1) {

return false; }

else {

return true; } }

function validateForm(whichform) {

for(var i=0;ivar element=whichform.elements[i];

if(element.className.indexOf(\"required\")!=-1) {

if(!isFilled(element)) {

alert(\"Please fill in the\"+element.name+\" field.\"); return false; } }

if(element.className.indexOf(\"email\")!=-1) {

if(!isEmail(element)) {

alert(\"The \"+element.name+\" field must be a valid email address.\");

return false; } } }

return true; }

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文