《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);
}