JavaScript DOM 编程艺术（第2版）读书笔记（一）

第一章 JavaScript简史
这章看下来有印象的内容是 什么是DOM（文档对象模型）?
文章中有两种定义方式：
大众说法：DOM是一套对文档的内容进行抽象和概念化的方法；
W3C对DOM的定义： 一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和形式。
第二章 JavaScript 语法
本章主要是介绍了 JavaScript一些的常用的方法。
JS的代码文件最好放在html文档的元素节点之前，能使浏览器更快的加载页面；
1. 语句（statement） 每条语句的末尾都要加分号，养成一种良好的编程习惯；
2. 注释（comment） JS：单行注释（//….）、多行注释（/* ….*/）；html：（<！- - …. - - >）；
3. 变量（variable） 声明（declare）赋值（assignment） 字面量（literal）
如果对某个变量赋值之前未声明，赋值操作将自动声明该变量。
变量名允许包含字母、数字、美元符号和下划线（但是第一个字符不允许是数字）；不允许包含空格和标点符号($除外)；并且变量名都是区分字母大小写的。
变量常见写法：驼峰写法或者 比较长的变量名在适当位置插入下划线。
示例： var my_mood = “happy” 【‘happy’是JS语言中的一个字面量 】
4. 数据类型 JavaScript 是一种弱类型（weakly typed）语言，可以在任何阶段改变变量的数据类型；
字符串（String） 数值（Number） 布尔值（Boolean）;这三种是标量（scalar）,在任意时刻它只能有一个值。
5. 数组（Array）指的是用一个变量表示一个值得集合，集合中的每个值都是这个数组的一个元素（element）； 数组元素的个数就是这个数组的长度（length）；向数组中添加元素的操作称为填充（populationg）；数组的下标从0开始。
声明方法： var beatles = Array(number);
var beatles = new Array();
var beatles=[];
填充：array[index] = element;
数组中还可以包含其他的数组，数组中的任何一个元素都可以把一个数组作为它的值。
关联数组： 填充数组值给出元素的值，这个数组将是一个传统数组，各个元素的下标将自动创建和刷新，若在填充数组给新元素的下标，不是整数数字，而是字符串，这样的数组就叫做关联数组。这个本质上就是创建Array对象的属性。这种用法作者不推荐
示例：
var lennon = Array();
lennon[“name”] = “John”;
lennon[“year”] = 1940;
lennon[“living”] = false;
6. 对象（Object）对象也是使用一个名字表示一组值，对象的每个值都是对象的要给属性。对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问，属性（property）和方法（method）。
属性是隶属于某个特定对象的变量；方法是只有某个特定对象才能调用的函数；
在JS中，属性和方法都使用的是‘点’语法来访问。
实例（instance）是对象的具体个体；为给定对象创建一个新实例使用new关键字。
对象分类：
内建对象：JS中提供一系列预先定义好的对象； JS中的内部对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。
宿主对象： 宿主对象就是执行JS脚本的环境（具体到WEB应用，也就是浏览器）提供的对象；由浏览器提供的预定于对象。也就是所有的BOM
浏览器对象有很多，如Window和Document等等。
自定义对象：是开发人员自己定义的对象。JS允许使用自定义对象，使JS应用及功能得到扩充。
7. 操作
算术操作符：加减乘除这些算术操作中的每一种都必须借助于相应的操作符才能完成。操作符是JavaScript为完成各种操作而定义的一些符号。等号(=)、加号(+)、减号(-)、乘号(*)、除号(/)。
加1（++）；减1（–）。
加号(+)用于数值计算操作，还可以用于字符串拼接。
比较操作符：JavaScript还提供了许多几乎只能用在条件语句里的操作符，其中包括诸如大于(>)、小于(<)、大于或等于(>=)、小于或等于(<=)之类的比较操作符；
如若想比较两个值是否相等，可以使用“等于”比较操作符。这个操作符由两个等号构成（==）。单个等号（=）是用于完成赋值操作；
等号（==）不表示严格相等，只比较值；
等号（===）这个全等号操作符会执行严格的比较，不仅比较值还会比较变量的类型；
（!=）和（!==）不等操作符也是一样的，不严格和严格
逻辑操作符：逻辑与（&&），逻辑或（||），逻辑非（！）(如返回为true,逻辑非将把它取反为false )；逻辑操作符的操作对象是布尔值；
8. 条件语句：常常用来做判断，常见的条件语句是 if语句；
示例：if(condition){ statements };
if后的括号中条件值永远是一个布尔值，只有在条件为true的情况下才会执行花括号中的代码。
条件语句还有一个 switch语句
Switch(condition){
case 0:
statements;
break;
….
case n:
statements;
break;
default:
statements;
}
9. 循环语句：
 while循环 它跟if语句非常相似，满足条件的话，花括号中的代码就反复执行；而if语句只能执行一次
示例：var count = 1;
while(count<11){
console.log(count); //1,2,3,4,5,6,7,8,9,10
count++;
}
 do…while循环 在循环语句的花括号中的代码至少执行一次
示例：var count = 1;
do {
count++;
console.log(count); //2
} while(count<1)

 for循环 常见的用途之一就是对某个数组里的全体元素进行遍历
- 函数（function）就是一组允许在你的代码里随时调用的语句，每个函数实际上都是一个短小的脚本。
定义函数时，可以为它声明任意多个参数，只需用逗号分隔；
函数不仅能够以参数的形式接受数据，还能够返回数据，也就是 return 语句；
函数的真正价值体现在，我们可以将它们当做一种数据类型来使用，可以将一个函数的调用结果赋给一个变量。
变量的作用域：全局变量 和 局部变量
全局变量（global variable）：可以在脚本的任何位置使用，包括函数内部；
局部变量（local variable）：只存在于声明它的函数内部，在声明的函数外部无法引用；
在函数中如果使用var ，那个变量就是被视为一个局部变量，只存在于函数之中，如果没使用var 那个变量则视为全局变量；如若脚本中存在一个与之同名的全局变量，这个函数就会改变那个全局变量的值。
第三章 DOM
D代表document（文档），O代表object（对象），M代表model（模型），简单的说DOM把一份文档表示为一颗家谱树，而家谱树本身又是一种模型，其典型用法是表示一个人类家族的谱系，使用parent（父）child（子）siblings（兄弟）等记号来表明家族成员之间的关系。
节点（node）它表示一个网络的连接点。一个网络就是由一些节点构成的集合。文档也是由节点构成的集合。
DOM的节点类型：3种常用类型
- 元素节点（element node）构成DOM文档的基础，文档结构中，是根元素，代表整个文档，其他的还有,,

,等。元素节点之间可以相互包含(当然遵循一定的规则)；
- 文本节点（text node） 文本节点总是被包含在元素节点的内部。
- 属性节点（attribute node）属性节点总是被放在起始标签里，所有的属性都被元素包含。其作用就就是用来对元素做出更具体的描述，比如id title name alt之类的。

获取元素3种方法：
 document.getElementById（返回一个对象）
 document.getElementsByTagName（返回一个对象数值）
当整个文档中指定要查找的标签只有一个元素，它返回的也是一个数组，那个数组的长度是1；允许把一个通配符（星号字符 “*”）作为参数，这意味着文档中每个元素都讲在所返回的数组中。
 document.getElementsByClassName （返回的是数值；此方法低版本不兼容，可以用原有的方法实现，如下：）
function getElementsByClassName(node,classname){
if(node.getElementsByClassName){
//如果浏览器支持原生的方法，则直接用原生的方法
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTagName(“*”);
for(var i = 0; i < elems.length; i++){
if(elems[i].className.indexOf(classname)!=-1){
results[results.length]=elems[i];
}
}
return results;
}

获取和设置属性（两者只能作用于元素节点）
getAttribute(attribute) 当元素中没有你要获取的值，此方法会返回null值；
setAttribute(attribute) 设置或修改属性，
第四章 案例研究 JS图片库
element.setAttribute(‘value’,’the new value’)等同于 element.value = ‘the new value’ ；
案例中的启发：
为了减少对站点的请求次数（提高性能），应该把一些 .js文件合并到一个文件中。
事件处理函数的作用是，在特定事件发生时调用特定的javascript代码。
对于本案例中onclick事件处理函数，a标签的点击默认行为也会被调用，而要阻止这种默认行为，则需要使返回值为false ；使得事件处理函数认为‘这个链接没有被点击’。
childNodes属性
在一颗节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组。
由childNodes属性返回的数组包含所有类型的节点，而不仅仅是元素节点，文档里几乎每一样都是一个节点，连空格和换行符都会被解释为节点，不过每个节点都有nodeType属性，nodeType 属性共有12种可取值，如若只对特定类型的节点进行处理，则需判断，例如：if(childNode.nodeType != ‘3’) continue 。

节点3个基本属性 nodeType nodeName nodeValue
对于元素节点，nodeType=1；nodeName=标签名（返回的名称是大写的）；nodeValue=null（元素节点本身不直接包含文本，所以nodeValue不可用）
对于文本节点，nodeType=3；nodeName=#text ；nodeValue=文本值【空格都属于是文本节点】
对于属性节点，nodeType=2；nodeName=属性名（返回的名称是大写的）；nodeValue=属性值
firstChild 和lastChild 属性
子节点的第一个和最后一个元素
对应的是 childNodes[0] 和childNodes[childNodes.length-1]
第五章 最佳实践
本章主要介绍了一些与DOM脚本编程工作有关的概念和实践：平稳退化，分离JavaScript,向后兼容性，性能考虑
可多熟读下，对于工作中写代码，也要时常考虑这些问题。
第六章 案例研究 JS图片库改进版
从第五章内容中的几个要点：平稳退化，分离JavaScript,向后兼容性，性能考虑；对第四章的图片库JS的改进。
检查DOM方法是否被浏览器支持：
//类似以下的测试
if(!document.getElementById || !document.getElementsByTagName) return false;
if(!document.getElementById(“imagegallery”)) return false;

结构化程序设计 其中有这样一条规则：函数应该只有一个入口和一个出口，但在实际工作中，会造成代码难以阅读，作者的理念是 如若一个函数有多个出口，只要这些出口集中出现在函数的开头部分就是可以接受的。
JavaScript往往需要在网页加载完毕之后立刻执行，网页加载完毕时会触发一个onload事件，常规的方法：
window.onload = firstFunction;
window.onload = secondFunction;
【此时secondFunction将取代firstFunction ，表示每个事件处理函数只能绑定一条指令。】
window.onload = function {
firstFunction();
secondFunction;
}
【此方法利用匿名函数来容纳两个函数，确实也能很好的工作 】
addLoadEvent函数
本章节中作者提出一个弹性最佳解决方案：addLoadEvent函数，它只有一个参数
，表示的是打算在页面加载完毕时执行的函数名字；
设计思路：
1.把现有的window.onload事件处理函数存入变量oldonload。
2.如果在这个处理函数上还没有绑定任何函数，就向平时一样把函数添加给它。
3.如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有函数末尾。

function addLoadEvent(func) {
    var oldonload=window.onload;
    if(typeof window.onload != 'function'){
        window.onload=func;
    } else {
        window.onload= function (){
            oldonload();
            func();
        }
    }
}

addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
【如此两个函数都能正常执行啦】

三元操作符（ternary operator）
variable(变量) = condition(条件) ? if true : if else;
三元操作符是if/else语句的一种变体形式，它比较简短
nodeName属性
返回元素的标签名，总是返回大写字母；即使元素在html文档里都是小写字母；比如返回的是DIV ,IMG,P,A等元素标签。