《JavaScript DOM 编程艺术》知识点整理

本书重点：关于Javascript和DOM脚本编程工作的基本原则、良好习惯、正确思路

预留退路、循序渐进、以用户为中心

一、JavaScript简史

XHTML:可扩展超文本标记语言 

BOM:浏览器对象模型（Web浏览器窗口的高度、宽度和屏显位置等属性） 

DOM:文档对象模型（一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改）

Javascript:脚本语言（解释型，解释器），有Web浏览器进行解释和执行

二、Javascript语法

1.注释

（1）//:单行注释  （2）/*多行注释*/

2.变量

Javascript允许程序员直接对变量进行赋值而无需提前对它们做出声明。

变量名不能包含 空格或标点符号($除外)

var mood,age;

var mood="happy",age=33;

3.数据类型

Javascript:弱类型（不要求对数据进行类型声明，可以随便改变某个变量的数据类型）

（1）字符串

字符串必须放在单引号或双引号里。

字符转义（escaping）：反斜杠

（2）数值

（3）布尔值（不要加引号！）

（4）数组

声明数组：var beatles=Array(4);  /  var beatles=Array(); (在声明时可不给出数组元素个数)

声明同时填充数组：var beatles=Array("John","Paul","George","Ringo");  /  var beatles=["John","Paul","George","Ringo"]; 

数组里数据类型可不一样：var lennon=Array("John",1940,false);

关联数组(associative array)：数组下标为字符串

var lennon=Array();
lennon["name"]="John";
lennon["year"]=1940;
lennon["living"]=false;

4.操作operation

+:拼接（concatenation）

var message="I am feeling"+"happy";

字符串和数值拼接，结果为更长的字符串。

+=：加法和赋值/拼接和赋值

5.条件语句

if(condition){
    statements;
}

逻辑与：&&   逻辑或：||

6.循环语句

（1）while

while(condition){
    statements;
}

(2)do...while

do{
    statements;
}while(condition);

(3)for

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

7.函数

function multiply(num1,num2){
    var total=num1*num2;
    return total;
}

变量命名：下划线分隔各个单词    函数命名：Camel法

全局变量（global variable）:作用域为整个脚本

局部变量（local variable）:作用域仅限于函数内部

在函数中使用var关键字，变量即为局部变量，可避免二义性隐患。

8.对象object

对象是自我包含的数据集合，包含在对象里的数据可通过2种形式——属性和方法访问：

属性是隶属于某个特定对象的变量；object.property

方法是只有某个特定对象才能调用的函数。object.method()

实例（instance）:对象的具体表现；对象是统称，实例是个体。

创建实例：var jeremy=new Person;

内建对象（native object）：Javascript预先定义好的对象（数组Array对象，Math对象，Date对象...）

宿主对象（host object）：由Web浏览器提供的预定义对象（Window(BOM)、Form、Image、Element）

三、DOM

Document Object Model（文档对象模型）

• 一份文档就是一颗节点数
• 节点分为不同的类型：元素节点、属性节点和文本节点。
• getElementById()方法返回一个对象，该对象对应文档里的一个特定的元素节点。
• getElementsByTagName()方法返回一个对象数组，它们分别对应文档里的一个特定的元素节点。
• getAttribute()方法：查询元素节点属性的值    object.getAttribute(attribute)
• setAttribute()方法：修改属性节点的值    object.setAttribute(attribute,value)

DOM工作模式：先加载文档的静态内容，再以动态的方式对它们进行刷新。动态刷新不影响文档的静态内容。

• childNodes属性：返回一个数组，这个数组包含给定元素节点的全部子元素
• nodeTyoe属性：元素节点（1）、属性节点（2）、文本节点（3）
• nodeValue属性：文本节点的值
• firstChild属性：node.childNodes[0]    lastChild属性：node.childNodes[node.childNodes.length-1]

四、JavaScript编程原则和良好习惯

1.预留退路

确保网页在没有JavaScript的情况下也能正常工作。

window.open(url,name,features):创建新的浏览器窗口

<a href="http://www.example.com/" onclick="popUp(this.href); return false;">Example</a>

2.分离JavaScript

把网页的结构和内容与JavaScript脚本的动作行为分开。

window.onload=prepareLinks;
function prepareLinks(){
    var links=document.getElementsByTagName("a");
    for(var i=0;i<links.length;i++){
        if(links[i].getAttribute("class")=="popup"){
            links[i].onclick=function(){
            popUp(this.getAttribute("href"));
            return false;
            }
        }
    }
}

function popUp(winURL){
    window.open(winURL,"popup","width=320,height=480");
}

3.向后兼容性

确保老版本的浏览器不会因为JavaScript脚本而死机。

window.onload=function(){
    if(!document.getElementByTagName) return false;//保证兼容性
    var links=document.getElementsByTagName("a");
    for(var i=0;i<links.length;i++){
        if(links[i].getAttribute("class")=="popup"){
            links[i].onclick=function(){
            popUp(this.getAttribute("href"));
            return false;
            }
        }
    }
}

function popUp(winURL){
    window.open(winURL,"popup","width=320,height=480");
}

五、动态创建HTML内容、充实文档内容

（这2章暂时略过，以后再补）

六、CSS-DOM

网页分层：结构层（HTML）、表示层(CSS)、行为层(JavaScript、DOM)

style属性：文档的每个元素节点有一个属性style，style属性包含元素的样式信息，查询这个属性将返回一个对象。

DOM采用“Camel记号”来表示名字里有多个单词的CSS属性。（fontFamily、backgroundColor）

style对象的属性值必须放在引号里，单引号或双引号均可。

para.style.color='black';

（1）根据元素在节点树里的位置来设置样式信息（styleHeaderSiblings()函数）

//查找下一个元素节点
function getNextElement(node){
    if(node.nodeType==1){
        return node;
    }
    if(node.nextSibling){
        return getNextElement(node.nextSibling);
    }
    return null;
}

function styleHeaderSiblings(){
    if(!document.getElementsByTagName) return false;
    var headers=document.getElementsByTagName("h1");
    for(var i=0;i<headers.length;i++){
        var elem=getNextElement(headers[i].nextSibling);
        elem.style.fontWeight="bold";
        elem.style.fontSize="1.2em";
    }
}

(2)根据某种条件来设置样式信息（stripeTables()函数）

demo：为表格“画上斑马线”，每隔一行设置一次样式信息

function stripeTables(){
    if(!document.getElementsByTagName) return false;
    var tables=document.getElementsByTagName("table");
    for(var i=0;i<tables.length;i++){
        var odd=false;
        var rows=tables[i].getElementsByTagName("tr");
        for(var j=0;j<rows.length;j++){
            if(odd==true){
                rows[j].style.backgroundColor="#ffc";
                odd=false;
            }else{
                 odd=true;
            }
        }
    }
}

(3)对事件做出响应（highlightRows()函数）

demo：鼠标悬停在表格上方时，把该行文本显示为黑体字

function highlightRows(){
    if(!document.getElementsByTagName) return false;
    var rows=document.getElementsByTagName("tr");
    for(var i=0;i<rows.length;i++){
        rows[i].onmouseover=function(){
            this.style.fontWeight="bold";
        }
        rows[i].onmouseout=function(){
            this.style.fontWeight="normal";
        }
    }
}

  className属性：可读可写，所有元素节点都有这个属性。

element.className="intro";  //"intro"为value值

等价于：

element.setAttribute("class","intro");

以追加的方式设置class属性值：

function addClass(element,value){
    if(!element.className){
        element.className=value;
    }else{
        newClassName=element.ClassName;
        newClassName+=" ";
        newClassName+=value;
        element.className=newClassName;
    }
}

对函数进行抽象化！将具体的值转换为函数的参数，让它成为一个更通用的函数。

七、用JavaScript实现动画效果

CSS-DOM

setTimeout()函数：让某个函数在经过一段预定时间之后才开始执行。

//setTimeout函数第一个参数为字符串，是要执行的函数的名字；第二个参数为数值，是经过多长时间开始执行函数(单位：ms)
setTimeout("function",interval);
variable=setTimeout("function",interval);
clearTimeout(variable);//取消“等待执行”队列里某个尚未开始执行的函数

moveElement()函数 ：通用的可以沿任意方向移动多个页面元素的函数。

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(xpos<final_x){
        xpos++;
    }
    if(xpos>final_x){
        xpos--;
    }
    if(ypos<final_y){
        ypos++;
    }
    if(ypos<final_y){
        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);    
}