必读之《JavaScript DOM编程艺术》重点记忆笔记-1

《JavaScript DOM编程艺术》阅读中，记录的一些笔记，方便回忆，方便快速浏览
Ch1～Ch6

Ch1

1.1 什么是DOM？ 简单来说DOM是一套对文档的内容进行抽象和概念化的方法
1.2 W3C 对DOM的定义：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地访问和修改文档的内容、结构和样式。
1.3 用JavaScript编写的代码必须通过HTML/XHTML文档才能执行

---

Ch2

2.1 程序设计语言分为解释型和编译型两大类。Java或C++等语言需要一个编译器，编译器是一种程序，能够把用Java等高级语言编写出来的源代码翻译成直接在计算机上执行的文件。 || 解释型程序设计语言不需要编译器----他们仅需要解释器。对于JavaScript语言，在互联网环境下，Web浏览器负责完成有关的解释和执行工作。浏览器中的JavaScript解释器直接读入源代码并执行。浏览器中如果没有解释器，JavaScript代码就无法执行。
2.2 编译型语言写的代码有错误在编译阶段就能够发现，而解释型语言代码中的错误只能等到解释器执行到有关代码时才能被发现
2.3 每条语句后面加入一个分号，是良好的编程习惯； 让每条语句独占一行的做法更容易跟踪JavaScript脚本的执行顺序。
2.4JavaScript允许程序员直接对变量赋值而无需事先声明。（赋值操作将自动声明该变量，但是提前声明变量是一种良好的编程习惯）
2.5 JavaScript变量名允许包含 字母、数字、美元符号、下划线（但是第一个字符不能是数字）
2.6 变量名中间适当加入下划线可以提高可阅读性，另一种命名方法是使用驼峰式，驼峰式是函数名、方法名和对象属性命名的首选格式
2.7 JavaScript对于不同类型的变量声明和赋值语法都是完全一样的。有些其他语言在声明变量的同时还必须同时声明变量的数据类型，这种做法称为类型声明（typing）
2.8 必须明确类型声明的语言称为强类型（strong typed）语言。JavaScript不需要进行类型声明，因此它是一种弱类型（weakly typed）语言。这意味着程序员可以在任何阶段改变变量的数据类型。
2.9 JavaScript中 单引号和双引号没有区别，但是最好还是根据字符串内容来选择引号，字符串中有单引号那就选择双引号，字符串中有双引号那就选择单引号。
2.10 如果想再双引号中使用双引号，或者在单引号中使用单引号，那就要用到转义，在字符前面加反斜杠 \ 就可以进行转义。
2.11 数组声明方式：

• var arr = Array[4]; arr[0] = 'QQ';arr[0] = 'TT';arr[0] = 'MM';arr[0] = 'RR';
• var arr = Array("QQ","TT","MM","RR");
• var arr = ["QQ","TT","MM","RR"];

2.12 数组的元素可以是不同类型，数组可以包含另外一个数组。
2.13 传统数组的下标是一个数组，每增加一个元素，这个数字就依次增加1。关联数组如下声明：

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

但这种用法本质上是在修改Array对象的属性，所以并不建议使用。
2.14 对象：对象的每个值都是对象的一个属性

2.15 加号操作（+）不仅可以用于数值，也可以用于字符串（字符串拼接）。甚至可以把字符串和数字拼接在一起，这个时候，数字自动转换成字符串。
2.16 += 可以一次性完成“加法和赋值”
2.17 ==：并不表示严格相等，比如：

	var a = false;
	var b = "";
	if(a == b) {
	alert("a equals b")
	};

求值结果是true。 因为相等操作认为空字符串与false的含义相同。
2.18 === 严格比较，不仅比较值，还会比较变量类型。上面的代码会返回false。即：false和空字符串虽然具有相同的含义，但是Boolean和String不是同一种类型。
2.19 if和while花括号内的部分都有可能不被执行，因为对循环条件的判断是在每次循环开始前。
2.20 如果希望循环内部的代码至少执行一次，这时，do...while循环是最佳选择，对循环条件的求值和判断是在执行完循环内容之后。
2.21 全局变量：在某个脚本里声明里一个全局变量，就可以从这个脚本的任何位置，包括函数内部，引用它。全局变量的作用域是整个脚本。
2.22 局部变量，只存在于声明它的那个函数内部，在函数外部无法引用。
2.23 如果在函数中使用了var，这个变量就是一个局部变量，它只存在于这个函数的内部。反之，如果没有使用var，那个变量就会变成一个全局变量，如果脚本中已经存在与之同名的全局变量，这个函数就会改变那个全局变量的值。所以函数应该像一个自给自足的脚本，一定要把它内部的变量全部声明为局部变量。
2.24 包含在对象里的数据可以通过两种形式访问：属性property和方法method，JS里属性和方法都使用“点”语法来访问。

---

Ch3 DOM

3.1 5个常用DOM方法：getElementById, getElementsByTagName, getElementsByClassName, getAttribute和setAttribute
3.2 DOM中的D：document
3.3 DOM中的O：object
3.4 DOM中的M：Moduel
3.5 DOM代表着加载到浏览器窗口的当前网页。浏览器提供了网页的地图（或者说模型），而我们可以通过JavaScript去读取这张地图。
3.6 DOM把一份文档表示一棵树，这是我们理解和运用这一模型的关键。更具体地说，DOM把文档表示为一棵家谱树。是根元素，html代表整个文档

3.7 DOM是由节点构成的集合。元素节点，如

之类；文本节点，如

中包含一句“Hello World”，它就是一个文本节点；属性节点，对于元素作出更具体的描述。
3.8 CSS 告诉浏览器如何显示一份文档的内容。具有“继承”特性。
3.9 有3种DOM方法可获取元素节点，分别是：通过元素ID，通过标签名字和通过类名字来获取。

• getElementById：document.getElementById("purchases")
• getElementByTagName：它与getElementById有许多相似之处，但是它返回的是一个数组。 document.getElementByTagName("li")。如果觉得反复输入很麻烦，可以 var items = document.getElementByTagName("li") 之后只使用items即可。
• getElementByClassName：返回一个数组，参数为类名，可以接受多个类名，空格隔开即可。(“important sale”)
  3.10 getAttribute 只有一个参数-----打算查询的属性名字。
  3.11 getAttribute不属于document对象，多亿不能用document对象调用，只能通过元素节点对象调用
  3.12 setAttribute 为元素节点设置属性
  var shopping = document.getElementById("purchases"); shopping.setAttribute("title","a list of goods");

---

Ch4

4.1 element.value = “the new value” 等价于 element.setAttribute(“value”,“the new value”)
4.2 事件处理函数 event handler，比如 onmouseover，onclick
4.3 阻止事件函数出发默认行为，要让事件函数返回false。
<a href="http://www.example.com" onclick = "showPic(this); return false"> Click me </a>
4.4 childNodes 属性，可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组。childNodes
会返回所有类型的节点。
4.5 nodeType属性，共有12种可取值，但仅有3种具有实际价值。

• 元素节点的nodeType属性值是1
• 属性节点的nodeType属性值是2
• 文本节点的nodeType属性值是3

这就意味着，可以让函数只对特定类型的节点进行处理。
4.6 nodeValue属性，可以得到一个节点的值。
<p id="dedcription">Choose an image</p>
直接用 description.nodeValue 返回的是null值，因为<p>元素本身的nodeValue是一个空值，真正需要的是<p>元素包含的文本的值。包含在<p>元素里的文本是另一种节点，它是<p>元素的第一个子节点。因此，你想要得到的其实是它的第一个子节点nodeValue属性值。所以如果想获得 <p> 里的文本内容需要这样：description.childNodes[0].nodeValue
4.7 firstChild和lastChild属性，node.firstChild 和 node.childNodes[0] 完全等价。node.lastChild和node.childNodes[node.childNodes.length-1]等价。

---

Ch5

5.1 平稳退化，在禁用JS和图像之后，网页依然能顺利访问。
5.2 结构和样式分离
5.3 渐进增强
5.4 分离JavaScript，不需要事件必须在HTML文档里处理，可以在外部JavaScript文件里把一个事件添加到HTML文档中的某个元素。getElementById(id).event = action
5.5 window.onload 是在HTML文档全部加载到浏览器之后才开始执行。
5.6 向后兼容

• 对象检测，检测浏览器是否支持某个方法 if(!document.getElementByTagName) return false;
• 浏览器嗅探技术

5.7 性能考虑

• 尽量少访问DOM和尽量减少标记
• 合并和放置脚本，尽可能把脚本合并。把脚本放在head区域，会导致浏览器无法并行加载其他文件，一般来说，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件，而在下载脚本期间，浏览器不会下载其他任何文件，所有其他资源都会等脚本加载完毕后才能下载。 把<script>标签放到文档末尾，可以让页面更快。
• 压缩脚本，指的是把脚本文件中不必要的字节，如空格和注释，统统删除，从而达到压缩文件的目的。

---

Ch6

6.1 为保证平稳退化，而给a标签设置真实的href属性 <a href="images/fireworks.jpg" onclick="showPic(this);return false" title="fireworks display">Fireworks</a>
6.2 JS和HTML分离，所以不应该在a标签里添加onclick，而是在JS里：

• 检查当前浏览器是否理解getElementByTagName
• 检查当前浏览器是否理解getElementById
• 检查当前网页是否存在一个id为imagegallery的元素
• 遍历imagegallery元素中的所有链接
• 设置onclick事件，让它在有关链接被点击时完成以下操作：
  • 把这个链接作为参数传递给showPic函数
  • 取消链接被点击时的默认行为，不让浏览器打开这个链接

function prepareGalley() {
	if (!document.getElementByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById("imagegallery")) return false;
	var gallery = document.getElementById("imagegallery");
	var links = gallery.getElementByTagName("a");
	for (var i=0; i<links.length; i++) {
		links[i].onclick = function() {
		showPic(this);
		return false;
		}
}
}

6.3 共享onload事件
在绑定函数不是很多的情况下，这应该是最简单的解决方案。

window.onloaf = function() {
	firstFunction();
	secondFunction();
}

另外一个弹性最佳的解决方案，不管在页面加载完毕时执行多少个函数，都可以应付自如。
addLoadEvent，它只有一个参数：打算在页面加载完毕时执行的函数的名字。
下面是addLoadEvent函数将完成的操作。

• 把现在有的window.onload事件处理函数的值存入变量oldonload
• 如果在这个函数上还没有绑定任何函数，就像平时那样把新函数添加给它
• 如果在这个处理函数上已经绑定里一些函数，就把新函数追加到现有指令的末尾

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

6.4 不要做太多的假设，检查用到的元素是否存在。
平稳退化，showPic应该返回两个可能的值，如果图片切换成功，返回true；如果图片切换不成功，返回false。
6.5 links[i].onkeypress = links[i].onclick; 可以把onclick的事件赋给onkeypress
6.6 小心onkeypress，用户按下每一个按键都会触发它。
6.7 在有些浏览器里，用Tab键移动到某个链接，然后按下回车键的动作会触发onclick事件。
6.8 完整的prepareGallery()和showPic()函数的代码清单：

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.getElementByTagName("a");
	for (var i=0; i< links.length;i++) {
	links[i].onclick = function(){
	return showPic(this)?false:true;
	}
	} 
}

function showPic(whichpic) {
	if(!document.getElementById("placeholder")) return false; //图片占位符不存在
	var source = whichpic.getAttribute("href");  //获取此目录项的href
	var placeholder = document.getElementById("placeholder"); 
	if(placeholder.nodeName != "IMG") return false;//如果占位元素不是图片，那么结束
	placeholder.setAttribute("src",source);
	if(document.getElementById("description")) {  //是否有图片的描述文字
		var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title"):"";
		var description = document.getElementById("description");
		if(description.firstChild.nodeType == 3) {
		 decription.firstChild.nodeValue = text;
		}
	}
	return true;
}

6.9 getElementById、getElementsByTagName、getAttribute、setAttribute 都属于DOM Core的组成部分，并不专属于JS，支持DOM的任何一种程序设计语言都可以使用它们。它们的用途也并非仅限于处理网页，它们可以用来处理任何一种标记语言（如XML）写出来的文档。
在使用JS和DOM为HTML文件编写脚本时，还有许多属性可供选用。比如onclick。
比如HTML-DOM提供forms对象，这个对象可以把下面这样的语句：

• document.getElementsByTagName("form") 简化为 document.forms

HTML-DOM还提供了许多描述各种HTML元素的属性，比如说，HTML-DOM为图片提供的src属性可以把下面这样的语句：

• element.getAttribute("src")简化为element.src

6.10 总结优秀的编写JS思想：

• 尽量让JS代码不再依赖于哪些没有保证的假设，引入许多项测试和检查，这些测试和检查使代码能够平稳退化
• 没有使用onkeypress事件处理函数，使JS代码的可访问性得到保证
• 最终要的是把事件处理函数从标记文档分离到一个外部的JS文件，使JS代码不再依赖于HTML的内容和结构