JavaScript Dom编程艺术学习笔记1

前两章的基础内容自己之前的JavaScript笔记已记录过，就不再赘述，直接从第三章Dom开始，Dom内容之前也有写笔记，这里算是补充。

• 第三章 Dom
• 第四章 案例：JavaScript图片库
• 第五章 最佳实践
• 第六章 JS图片库改进版

---

第一章 JavaScript简史

第二章 JavaScript语法

第三章 Dom

• Document Object Model,文本对象模型
• 一篇文档就是一颗节点树
• 常用的三种节点：文本节点、元素节点、属性节点
• Dom中三种方式获得元素节点：
  • getElementById 返回一个与有特定ID值的元素节点对应的对象
  • getElementByTagName 返回一个对象数组（更准确地说，是一个节点列表），可把通配符(*)作为其参数
  • getElemetnByClassName 返回一个对象数组（更准确地说，是一个节点列表），需要考虑解决兼容性：

function getElementsByClassName(node,classname) {
     if(node.getElementsByClassName) {//使用现有方法
        return node.getElementByClassName(classname);
    }else{
        var results = new Array();
        var eles = node.getElementsByTagName("*");
        for(var i = 0;i

• 获取和设置属性
  getAttribute，setAttribute，只能用于元素节点
  object.setAttribute(attribute, value);，创建属性，并赋值，这个很常用。

for(var i = 0; i

---

第四章 JS图片库

function showPic(whichpic){
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    var text = whichpic.getAttribute("title");//某个图片链接被点击时，该链接的title属性值将被提取并保存到变量text中
    var description = document.getElementById("description");
    placeholder.setAttribute("src", source);//source是属性src的值
    description.firstChild.nodeValue = text;//把description对象的第一个子节点的nodeValue属性值设置为变量text的值
}
//上边的注释可作为编程的思路

• function showPic(whichpic)
  whichpic代表一个元素节点，是一个指向某个图片的元素需要分解出图片的文件路径，可通过在whichpic元素上调用getAttribute得到。
• onclick = "showPic(this); return false";
  把onclick事件处理函数嵌入到一个链接中时，需要把这个链接本身用作该函数的参数，this表示“这个对象”/“这个元素节点”。
  点击链接时，showPic函数会被调用，但是链接点击的默认行为也会被调用，阻止默认行为：onclick = "return false;"
  当为return false时，onclick事件处理函数则认为这个链接未被点击。

---

第五章 最佳实践

1. 平稳退化(graceful degradation)：网页在没有JavaScript的情况下也能正常工作。

• JS中用window.open(url,name,features)打开新的浏览器窗口:

function popUp(winURL) { 
      window.open(winURL,"popup","width=320,height=480");
}

• 调用函数时"javascript: "伪协议和内嵌事件处理函数都不能实现平稳退化
  "javascript: "伪协议：

Example

内嵌事件处理函数：

Example

• 解决办法：
  在链接里给href属性设置真实存在的URL（依然存在不足之处：每次打开新窗口，都需要把JS代码嵌入到标记文档中）

Example

2. 分离JavaScript

window.onload = prepareLinks;
function prepareLinks(){ 
//把事件添加到有着特定属性的一组元素上
    var links = document.getElementsByTagName("a"); //1.把文档里的所有链接全放入一个数组里
    for (var i=0; i

• 把事件添加到有着特定属性的一组元素上，步骤：
  • 把文档里的所有链接全放入一个数组里；
  • 遍历数组；
  • 如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数:

1. 把这个链接的href属性值传递给popUp()函数
2. 取消这个链接的默认行为

• window.onload = function{...}
  把代码打包到函数prepareLinks里，并添加到window对象触发的onload事件上。必须的步骤，不然加载脚本时文档可能不完整，导致模型、DOM都不完整，代码无法正常工作

3. 向后兼容，对象检测

if (!getElementyById || !getElementsByTagName)   return false;
//一定要删掉方法后的圆括号，如果不删掉，测试的将是方法的结果，无论方法是否存在。

4. 性能考虑

• 尽量少访问DOM和减少标记
  在多个函数都会去的一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数形式传递给函数
• 合并和放置脚本
  包含脚本的最佳方式是使用外部脚本，因为外部文件与标记能清晰的分离开，把多个脚本合并到一个中，减少请求。减少请求数量通常是性能优化首先要考虑的。
  把所有