JavaScript Dom编程艺术学习笔记 1

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

第一章 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>
  1. 分离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都不完整，代码无法正常工作
  1. 向后兼容，对象检测
if (!getElementyById || !getElementsByTagName)   return false;
//一定要删掉方法后的圆括号，如果不删掉，测试的将是方法的结果，无论方法是否存在。
  1. 性能考虑
  • 尽量少访问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);

2.DOM Core和HTML-DOM

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

posted @ 2016-07-25 13:57  lusg  阅读(482)  评论(0)  编辑  收藏  举报