JavaScript DOM的图片库的应用和优化

js和html分离很重要
属性： display：inline；可以实现列表横向显示
外部引用css
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen">
注意点： title是鼠标移到上面显示的内容   alt是图片加载不出来显示的内容
为了减少对网站的请求次数 应该将.js文件合并到一个文件中
事件处理函数 如 onclick（“show(this);xx();”）   里面包涵多个js语句的时候 用分号隔开 
1.对象有内建对象和宿主对象 内建对象包括Array数组 Math Date 这些都是预定义好的对象 可以直接拿来使用
宿主对象是由他的运行环境提供的，再Web应用中 这个环境就是浏览器 宿主对象包括 Form Image 和Element等等获取关于网页上表单，图像和各种表格元素的信息
还有一个比较重要的对象是doucumet  可以获取网页上任何元素的信息。
节点是网络中的一个连接点 一个网络就是由一些节点构成的集合 元素节点里面的属性就是属性节点 内容就是 文本节点
css中还有继承 比如定义了body的标签的css  则该css还将作用于镶嵌在body元素内部的所有元素

获取元素    文档中每一个元素都是一个对象。   元素类型由typeof显示出来的都是object
1.   document.getElementById("");   
2.   document.getElementsByTagName("") 返回的是一个对象数组   就算这个标签只有一个元素  也会返回一个数组  长度可以用属性length来访问
     可以用var items=document.getElementsByTagName("")  这样可以省点力气  以后  items[1]就是document.getElementByTagName("")[1]  
     举个例子：
     var shopping=document.getElementById("purchses");
     var items=shopping.getElementsByTagName("*");
3.   getElementsByClassName（“”）   是得到 含有相同类名的数组
     还可以找到那些带多个类名的元素   比如  getElementByClassName（“xx yy”）   表示这个数组找到的元素中 class同时带有 xx和yy的类名
     xx和yy的顺序无所谓  yy和xx也会被找到 而且  类名只要包涵xx和yy 还有其他类名的也会被找出来
      var shopping=document.getElementById("purchses");
     var items=shopping.getElementsByClassName("xx yy");
     这样就得到了  id=purchses中的 带有xx和yy类的元素
     这个 方法比较有用 但是只有较新的浏览器才支持他

     盘点知识点：   一份文档就是一颗节点树  节点包括元素节点 属性节点 文本节点
                    每一个节点都是一个对象
                    .getElementById返回一个对象 getElementsByClassName（“”）和getElementByTagName("")返回一个数组
                    元素节点的子节点是文本节点  元素节点的nodeValue是null值 而元素节点的子结点的第一个节点就是文本节点
                    元素节点.childNodes[0].nodeValue才是元素节点的文本节点


获取属性：
getAttribute（“”）参数是要查询属性的名字   可以配合 getElementById来使用  直接后面.getAttribute   如果没有该属性  会返回 null或者空白
取决于用哪种浏览器
通过 if（xx.getAttribute（“title”）） 来判断有无这个属性
setAttribut("xx","yy")   xx是标签名   yy是要修改的内容        如果事先不存在xx这个属性 则先创建xx这个属性 然后再赋值 如果存在就覆盖掉
需要注意的是 它源代码显示的还是修改前的属性值 这是“表里不一”  对页面内容进行刷新但是不需要在浏览器里刷新页面


    getElementById
    getElementsByClassName
    getElementsByTagName
    getAttribute    得到节点的属性
    setAttribute    修改节点的属性

举个例子：
var shopping=document.getElementById("xx");
var name=shopping.getAttribute("title");
shopping.setAttribute("title","wocaonima");


实现一个 在一个网页里 点击超链接 就可以在指定的图片位置更换图片：
function showPic(a)
{
    var source=a.getAttribute("href");
    var palceer=document.getElementById("xx");
    palceer.setAttribute("src",source);
}

 重点： 
再给元素添加事件处理函数后 一旦事件触发 js代码会返回一个布尔值 如果是true表示成功触发 false表示出发失败  
比如 onclick="showPic(this);"   表示 showPic函数被调用 默认行为也会被调用 意味着 用户还是被带到图片查看窗口 为了阻止这个默认行为被
调用 可以 这样修改
onclick="showPic(this);return false;"

window.onload是当文档加载完成后才会执行时间处理函数。

绑定一个匿名函数
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("big").style=...
    }
</script>
<script type="text/javascript">
    window.onload=function myalert()}
        alert("sdf");
    }
    }
</script>
childNodes是得到元素下的子节点  可是 文档中的每一个东西都是一个节点包括空格  
这时候需要nodeType属性来判别了  node.nodeType  
元素节点：nodeType属性值是1
属性节点：                2
文本节点：                3
这样就可以只针对特定节点进行操作
<script type="text/javascript">
    function xx(){
        var body_number=document.getElementsByTagName("body")[0];
        alert(body_number.childNodes.length);
    }
window.onload=xx;
</script>

nodeValue是文本节点的值
还有  firstChild和lastChild属性    
node.firstChild 等效于node.childNodes[0]
node.lastChild  等效于 node.childNodes[node.childNodes.length-1]

举例子：
function showPic(xx){
    var source=xx.getAttribute("href");
    var placer=document.getElementById("yy");
    palcer.setAttribut("src",source);
    var text=xx.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;
}


总结 ：
   childNodes  得到子节点
   nodeType    子节点类型
   nodeValue   节点的文本节点值
   firstChild  第一个子节点
   lastChild   最后一个子节点


 <script type="text/javascript">
    function popUp(winURL){
        window.open(winURL,"name","width=320,height=480");
    }
 </script>

  1.<a href="javascript:popUp('www.baidu.com');">xxx</a>
  "javascript:"是伪协议 
  2.内嵌：   <a href="#" onclick="popUp('www.baidu.com');return false;"> sdf</a>  href是为了创建一个空链接，实际工作全部由onclick属性负责完成
  return false 是取消这个连接的默认行为，不让这个链接把访问者带离当前窗口
  但是缺点是  不能平稳退化  意思就是说  用户如果禁用了浏览器的javascript功能 这样的链接将毫无用处

getElementById  为此  可以这样改进：
   <a href="www.baidu.com" onclick="popUp(this.href);return false;"> sdf</a> 
   但是这个也有缺点因为它没有打开一个新的窗口(js失效的话)

   css可以实现结构和样式的分离
   这样可以确保网页能平稳退化
   我们也可以分离js  将如下代码加入到外部js文件中去

成功将行为和结构分离的例子
   window.onload=pre;
   function pre(){
    var links=document.getElementByTagName("a");
    for(var i=0;i<links.length;i++) {
        if(links[i].getAttribute("class")=="popup") {
            links[i].onclick=function(){
                popUp(this.getAttribute("href"));
                return false;
            }
        }
    }
   }
   function popUp(winURL){
        window.open(winURL,"name","width=320,height=470");
   }


   对象检测
   添加if(!document.getElementById) return false;   对于不支持这个函数的浏览器 仍可以访问网页的内容
   注意：尽量减少访问DOM和尽量减少标记
   把 <script>放在文档的末尾 可以让网页变得更快
   压缩脚本可以使网页加载更快 可以使用工具 比如 变量 var dection 改成 var a    所以工作的时候 一般应该有两个版本 一个工作副本用来修改代码并添加注释 另一个是精简版本 用于放在站点  
   为了区分  最好在精简版本的文件名中加上min字样  比如： scriptName.min.js
   代码压缩工具：  谷歌的Closure Compiler

   平稳退化
   分离JS
   向后兼容
   性能考虑

   改进版：     之前图库中每个<a>中都需要class来挂钩把js和html中有关的标记关联起来  现在只需要定义一个挂钩  在列表   那 ul添加一个 id就可以了  
   注意：不应该让js代码对这个页面结构有任何依赖   如上面的例子  如果将图库删除 js就出错了
   所以可以这样子  
   if(!document.getElementById){
        return false;
   }   这是普遍做法  getElementById后面不能（）  加上后就是检测这个方法的返回值了

   if(!document.getElementById("xx")){
        return false;
   } 更加针对性

   重点：结构化程序设计 中有个一个原则： 函数应该只有一个入口和一个出口
   如果一个函数有多个出口  只要这些出口集中出现在函数的开头部分就可以接受  例子：
   function prepareGallery(){
        if(!document.getElementByTagName) return false;
        if(!document.getElementById) return false;
        if(!document.getElementById("imagegallery")) return false;


        接下来就是核心部分
   }
   重点： 如果如果一个变量很长  可以选择另起一个变量名字来代替它
   this代表links[i] 也就是对应的节点
   改进后：  这样就可以将onclick事件绑定到id等于 imagegallery的元素内的各个链接元素上
   funciton prepareGallery(){
        if(!document.getElementByTagName) return false;
        if(!document.getElementById) return false;
        if(!document.getElementById("imagegallery")) return false;
        var xx=document.getElementById("imagegallery");
        var yy=xx.getElementByTagName("a");
        for(var i;i<yy.length;i++){
            yy[i].onclick=function(){
                showPic(this);
                return  false;
            }
        }
   }

   重点：   还记得window的onload吗  这个是网页加载完毕后触发的事件    
   window.onload=firstFunction;
   window.onload=secondFunction;
   这样第二个会覆盖掉第一个 可以这样解决
   window.onload=function(){
        firstFunction();
        secondFunction();
   }         这是最简单的解决方案

  还有一个弹性最佳的方案   编写如下函数即可

  function addLoadEvent(func){
        var oldonload=window.onload;
        if(typeof window.onload!='function'){
            window.onload=func;
        } else {
            window.onload=function(){
                oldonload();
                func();
            }
        }
  }
  这样就相当于创建了个队列只需要写下面代码就行：
  addLoadEvent(firstFunction);
  addLoadEvent(secondFunction);

  插入一下  刚又思考了下 return false；的问题 又重新回顾一下
  <a href="1.html" onclick="popUp('2.html');"> sdf</a>   这个例子中  结果会是原网页显示 1.html  并且打开了一个新网页  2.html
   <a href="1.html" onclick="popUp('2.html');return false;"> sdf</a>   修改后  这样 只会打开一个新网页  因为return false取消了这个点击的默认情况 意思就是 href无效

   再插入一下 一个窗体的打开和关闭：
   打开用open
   window.onload=function(){
        var oTxt=document.getElementById('txt1');
        var obtn=document.getElementById('btr');
        obtn.onclick=function(){
            va oNewWin=window.open('about:blank','_blank');
            oNewWin.document.write(oTxt.value);
        }
   }
 about:blank表示  打开一个空白窗口
  接下来是close 但是再火狐浏览器下 是无法close一个用户打开的窗体 只有一个窗体是用open打开的时候才可以用close方法关闭

  window.nevigator.userAgent 获取当前浏览器的版本信息
  window.location 获取当前网页的地址

  尺寸和坐标 ：   可视区尺寸就是用户端能在屏幕上看到网页部分的尺寸  会随着窗体大小而变化  
  通过 document.documentElement.clientWidth和document.documentElement.clientHeight可以获取当前页面可视区的宽度和高度
  document.body.scrollTop  是滚动距离 是可视区到页面顶端的距离
  window.onresize 是页面大小改变时触发的事件
  几个常用的系统对话框  
  1.alert（） 警告框 没有返回值
  2.confirm("提问的内容")选择框 返回一个 boolean


  回到之前那个图片库的问题 进行修改
  前一件事是必须的   后一件事是锦上添花 
   function showPic(whichpic){
        if(!document.getElementById("placeholder")) return false;
        var xx=whichpic.getAttribute("href");
        var yy=document.getElementById("placeholder");
        placeholder.setAttribut("src",xx);
        if(document.getElementById("description")){
            var text=whichpic.getAttribute("title");
            var description=document.getElementById("description");
            description.firstChild.nodeValue=text;
        }
  }
  不要做太多假设 之前图库我们假设肯定存在placeholder图片和description元素 就会出现js错误
  所以也要修改
  function xx(){
    if(!document.getElementById) return false;
    if(!document.getElementByTagName) return false;
    if(!document.getElementById("imagegallery")) return false;
    var gallery=document.getElementById("imagegallery");
    var links=gallery.getElementByTagName("a");
    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            return !showPic(this);
        }
    }
  }


  代码优化：
    function xx(){
    if(!document.getElementById) return false;
    if(!document.getElementByTagName) return false;
    if(!document.getElementById("imagegallery")) return false;
    var gallery=document.getElementById("imagegallery");
    var links=gallery.getElementByTagName("a");
    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            return showPic(this)？false:true;
        }
    }
  }
   function showPic(whichpic){
        if(!document.getElementById("placeholder")) return false;
        var xx=whichpic.getAttribute("href");
        var yy=document.getElementById("placeholder");
        if(placeholder.nodeName!="IMG") return false;
        placeholder.setAttribut("src",xx);
        if(document.getElementById("description")){
            var text=whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
            var description=document.getElementById("description");
            if(description.firstChild.nodeType==3){
            description.firstChild.nodeValue=text;
            }
        }
        return true;
  }


  总结：
  尽量让js不再依赖假设 引入许多项的测试和检查 为了平稳退化   事件处理函分离到外部的js文件 这样使js不再依赖于html文档的内容和结构
  结构和行为要尽量分离
  还有  DOM Core 和HTML-DOM的区别也要注意一下