《JavaScript DOM 编程艺术》读书笔记

获取元素的方法

• getElementById:它是document对象特有的函数，这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。例如：document.getElementById(id)
• getElementsByTagName：此方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById，这个方法也是只有一个参数的函数，它的参数是标签的名字：element.getElementsByTagName(tag) 它与getElementById方法有许多相似之处，但它返回的是一个数组，你在编写脚本时千万注意不要把这俩个方法弄混了。
  例子：document.getElementsByTagName("li") 注意：即使在整个文档里这个标签只有一个元素，getElementByTagName也返回一个数组，此时，那个数组的长度是1。
• getElementSByClassName:此方法让我们能够通过class属性中的类名来访问元素，与getElementSByTagName方法类似，getElements.getElementsByClassName也只接受一个参数，就是类名:getElementByClassName(class),如果要查找那些带有多个类名的元素，只要在字符串参数中用空格分隔类名即可例如：document.getElementsByClassName("important sale")注意：即使在元素的class属性中，类名的顺序是sale important，而非参数中指定的”important sale”,也照样会匹配该元素。不仅类名的实际顺序不重要，就算元素还带有更多类名也没有关系。

如何阻止调用默认行为

如果想要实现点击标签不跳转到其他页面（也就是默认的行为），我们可以给链接添加了一个onclick事件处理函数后，并让这个处理函数所触发的JavaScript代码返回true或者false,返回false会阻止默认调用行为，更多详情在《JavaScript DOM 编程艺术》P51

改变文本值的方法

现在有个<p id="description">this is a text</p>,如果想获取p标签的文本的话,因为包含在

元素里的文本是另一种节点，它是

元素的第一个子节点，因此，你想得到的其实是它的第一个子节点的nodeValue属性值：

var description = document.getElementById("description");
description.firstChild.nodeValue; // 跟description.childNodes[0]等价

性能考虑

• 尽量少访问DOM和尽量减少标记：不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素。另一个需要注意的地方，就是要尽量减少文档中的标记数量。过多不必要的元素只会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间。
• 合并和放置脚本：最好是把多个js文件合并到一个脚本文件中。这样就可以减少加载页面时发送的请求数量。而减少请求数量通常都是在性能优化时需要考虑的。脚本在标记中的位置对页面的初次加载时间也有很大影响。传统上，我们都把脚本放在文档的区域，这种放置方法有一个问题。位于块中的脚本会导致浏览器无法并行加载其他文件（如图像或其他脚本）。一般来说，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载俩个文件。而在下载脚本期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有其他资源都要等脚本加载完毕后才能下载。所以把<script>标签放到别的地方并不是问题。把所有<script>标签都放到文档的末尾，</body> 标记之前,就可以让页面变得更快。即使这样，在加载脚本时，window对象的load事件依然可以执行对文档进行的各种操作。
• 压缩版本：在写完了脚本，做完了优化，而且也将它放到文档中的适当位置之后，还有一件事可以加快加载速度：压缩脚本文件。所以压缩脚本，指的是把脚本文件中不必要的字节，如空格和注释，统统删除，从而达到“压缩”文件的目的。

共享onload事件

当HTML文档加载完毕时会触发一个onload事件，这个事件与window对象相关联。如果想让函数在HTML文档完毕之后立刻执行，就需要将函数绑定到onload事件上:
window.onload = function;
但这样只能绑定一个函数，如果想让多个函数都在页面加载完后得到执行，你会怎么做呢？把它们逐一绑定到onload事件上的话，只有最后那个才会被实际执行

window.onload = function1;
window.onload = functin2;

最佳的解决方案是

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

addLoadEvent(function1);
addLoadEvent(function2);

addLoadEvent函数将要完成的操作：
1.把现有的window.onload事件处理函数的值存入变量oldonload
2.如果再这个处理函数上海没有绑定任何函数，就像平时那样把新函数添加给它。
3.如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾

---