首页手记 JavaScript Dom编程艺术学习笔记1

JavaScript Dom编程艺术学习笔记1

标签：

JavaScript

前两章的基础内容自己之前的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<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")); 
 }

第四章 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事件处理函数则认为这个链接未被点击。
第五章最佳实践
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

第六章 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);