JavaScript Dom编程艺术学习笔记1

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

• <a href="#c1">第三章 Dom</a>
• <a href="#c2">第四章 案例：JavaScript图片库</a>
• <a href="#c22">第五章 最佳实践</a>
• <a href="#c222">第六章 JS图片库改进版</a>

---

第一章 JavaScript简史

第二章 JavaScript语法

<a name="c1"></a>第三章 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<elems.length;i++) {
            if(elems[i].className.indexOf(classname)！=-1){
                results[results.length] = elems[i];
            }
        }
        return false;
    }
}

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

for(var i = 0; i<paras.length;i++) { 
     var title_text = paras[i].getAttribute("title");
     if (title_text) { 
        paras[i].setAttribute("title","brand new title text");     
        alert(paras[i].getAttribute("title")); 
     }

---

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

---

<a name = "c22"></a>第五章 最佳实践

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

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

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

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

<a href="javascript:popUp('http://www.example.com/');">Example</a>

内嵌事件处理函数：

<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>

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

<a href="http://www.example.com/" onclick="popUp(this.href ); return false;">Example</a>

2. 分离JavaScript

window.onload = prepareLinks;
function prepareLinks(){ 
//把事件添加到有着特定属性的一组元素上
    var links = document.getElementsByTagName("a"); //1.把文档里的所有链接全放入一个数组里
    for (var i=0; i<links.length; i++) {//2.遍历数组
        if (links[i].getAttribute("class") == "popup"){// 3.如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数
           popUp(this.getAttribute("href")); //1)把这个链接的href属性值传递给popUp()函数
           return false; //2)取消这个链接的默认行为
        } 
    }
}
function popUp(winURL){ 
    window.open(winURL,"popup","width=320,height=480");
}
//注释可作为编程思路

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

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

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

3. 向后兼容，对象检测

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

4. 性能考虑

• 尽量少访问DOM和减少标记
  在多个函数都会去的一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数形式传递给函数
• 合并和放置脚本
  包含脚本的最佳方式是使用外部脚本，因为外部文件与标记能清晰的分离开，把多个脚本合并到一个中，减少请求。减少请求数量通常是性能优化首先要考虑的。
  把所有<script>标签都放到文档末尾，</body>标签之前
• 压缩脚本
  把脚本中不必要的字节，如空格和注释，统统删除（查看网页源码时便能体验到）

常用的代码压缩工具：
JSMin
YUI Compressor
Closure Compiler

---

<a name="c222"></a> 第六章 JS图片库改进版

1.JavaScript与HTML标记分离

开始时onclick事件处理函数直接插入到HTML文档里:

<ul>
<li><a href = "#" onclick = "showPic(this); return false;" title = "..."></li>
...
</ul>

为<ul>设置id属性便可把JS移出文档：
<ul id = "imagegallery">...

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

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;//1.检查点
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");//2.变量
  for ( var i=0; i < links.length; i++) {//3.遍历
    links[i].onclick = function() {//4.改变行为
     // return !showPic(this);
        retrun showPic(this) ? false : true;//this在这里代表links[i]
  }
    //links[i].onkeypress = links[i].onclick;尽量不使用键盘触发事件
  }
}
---
links[i].onclick = function() 定义了一个匿名函数：一种在代码执行时创建函数的办法。这个匿名函数里的所有语句都将在link[i]元素被点击时执行。
return !showPic(this)：
1.如果showPic返回true，我们就返回false，浏览器不会打开那个链接； 
2.如果showPic返回false，我们认为图片没有更新，于是返回true以允许默认行为发生
3.this在这里代表links[i]

• 共享onload事件
  把创建的函数绑定到事件上：window.onload = prepareGallery；
  如果有多个函数想在页面加载完毕时立即执行，可以创建如下函数：

window.onload = function(){
        fisrtFunction();
        secondFunction();
        ...
}

更好的解决方案是利用函数addLoadEvent，它只有一个参数：打算在页面加载完毕时执行的函数的名字，如下：

//代码的注释部分即为addLoadEvent函数将要完成的操作
function addLoadEvent(func) {//只有一个参数，在页面加载完毕时执行的函数的名字
  var oldonload = window.onload;//把现有的window.onload事件处理函数的值存入变量oldonload
  if (typeof window.onload != 'function') {
    window.onload = func;//如果这个处理函数上还没有绑定任何函数，把新函数添加给它
  } else {
    window.onload = function() {
      oldonload();
      func();//如果这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾
    }
  }
}
addLoadEvent(prepareGallery);

2.DOM Core和HTML-DOM

getElementById,getElementsByTagName,setAttribute，getAttribute等方法都是DOM Core的组成部分，不专属于JavaScript，支持DOM的任何一种语言都可以使用。
关于HTML-DOM可以参考这里。