JavaScript+DOM编程艺术 ——学习笔记(上)

注：大写数字代表书中的章节

二、语法

• 数 组

var beat=Array(4);
beat[0]="John";
beat[1]="Paul";
beat[2]="Lucy";
beat[3]="LiHua";

var beat=Array("John","Paul","Lucy","LiHua");

var beat=Array(123,456,789,false);

var beat=["John","Paul","Lucy","LiHua"];

• 关联数组

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

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

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

注：当我们用new关键字去创建一个数组时，其实是在创建一个Array对象的新实例。对象可以调用方法和

 

三、DOM :Document Object Model

//例子1
alert（typeof document.getElementById("purchases")）;
//typeof 操作符可以告诉我们他的操作数是不是一个字符串、数值、函数、布尔值或对象。

//例子2
var items=document.getElementsByTagName("li");
for(var i=0;i<items.length;i++){
   alert(typeof items[i]);
}

//例子3
Var paras=document.getElementsByTagName(“p”);
For (var i=0;i<paras.length;i++){
　　Var title_text = paras[i].getAttribute(“title”);
　　If(title_text)
　　Alert(title_text);
}

//例子4
Var paras=document.getElementsByTagName(“p”);
For (var i=0;i<paras.length;i++){
　　Var title_text = paras[i].getAttribute(“title”);
　　If(title_text){
　　paras[i].setAttribute(“title”,”brand new title text”);
　　Alert(paras[i].getAttribute(“title”));
　　}
}

小结：

1 一份文档就是一棵节点树

2 节点分为不同的类型：元素节点、属性节点、文本节点等

3 getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点

4 getElementsByTagName()方法将返回一个对象数组，他们分别对应着文档里的一个特定的元素节点

5 这些节点中的每个都是一个对象

 

四、案例研究

• childNodes属性：返回一个数组，包含给定元素接点的全体子元素

• nodeType属性：共12种可取值，仅3种具有实用价值：1元素接点 2属性节点 3文本节点

• nodeValue属性：改变某个文本节点的值

• firstChild和lastChild属性：分别代表childNodes[]数组的第一个元素和最后一个元素