读JavaScript DOM编程艺术有感及笔记

        这是一本易懂且幽默的书，适合javascript初学者。


        一、第一章的javascript简史有简单的介绍了javascript、DOM，我认为这一章还是很有必要看的，了解JavaScript历史可以知道一些之前盛行的名词之类的。


        二、JavaScript是一种弱形式语言，但JavaScript的语法很像C语言（至少目前程序设计语言我也只学过这个），所以对于一个学过C语言的人来说，第二章的javascript语法很容易就理解了。不过不同于C语言，JavaScript引出了一个新概念——对象。
注释：多行/*，单行//。
把字符串复制给变量用引号，如：mood="happy"，如果是数字则不用。
变量名字无空格标点符号除$。


定义4个长度的数组：var beatles=Array(4);关联数组：                       
                        

var lennon=Array();     //定义数组lennon["name"]="John";  //赋值lennon["year"]=1940;    lennon["living"]=false;var aa=Array();        //再定义一个数组aa["vocalist"]=lennon;             //aa["vocalist"]指向数组，其中vocalist可以是其他值alert(aa["vocalist"]["name"]);alert(aa["vocalist"]["year"]);alert(aa["vocalist"]["living"]);

        对象是自我包含的数据集合，包含在对象里的数据可以通过  两种形式——属性和方法 访问：
属性是隶属于某个特定对象的变量。方法是只有某个特定对象才能调用的函数。
内建对象如数组，宿主对象如Form，Image，Element.document对象。

          三、DOM为第三章主要内容（D为Document，O为Object，M为Model），先加载静态内容，再以动态方式进行刷新。善于画DOM树分析。
节点：元素节点（p），属性节点（title），文本节点（Hello,world!）
介绍四个方法，在这里进行总结：
检索方法：
getElementById()方法：getElementById(“id名称”)，返回相对应对象
getElementByTagName()方法：getElementByTagName("tag")，返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
                                                      如getElementByTagName("li")，返回一个对象元素，每个对象分别对应着document对象中的一个列表项（li）元素。


用上面两种方法找到元素后，用下面两种方法对各种属性进行操作。
getAtrribute()方法： 对象.getAttribute("属性")
setAttribute()方法：对象.setAttribute（"属性"，"改变后的值"），当没有出现要改变的属性时，setAttribute()两个操作，创建，设置。
 typyof操作符告诉我们它的操作数是不是一个字符串，数值，函数，布尔值或对象。

<script type="text/javascript">alert(typeof document.getElementById("purchases"));alert(getElementsByTagName("li").length);for(var i=0;i<document.getElementsByTagName("li").length;i++){alert(typeof document.getElementByTagName("li")[i]);}var paras=document.getElementByTagName("p");                                 //返回一个数组for(var i=0;i<paras.length;i++){alert(paras[i].getAttribute("title"));                                      //如果没有title返回nullvar shopping=document.getElementById("purchases");shopping.setAttribute("title","hhhhhhh");</script>

         四、例子：JavaScript美术馆
对上一章的四个方法进行应用。重点一是利用DOM所提供的方法去编写图片库脚本，二是如何利用事件处理函数把JavaScript代码与网页集成在一起。
引用js外部文件<script src=".......js"></script>
事件处理函数：onmouseover事件处理函数，onclick事件处理函数，onload事件处理函数
window.onload=函数名;    让函数在页面加载时执行
onclick=“函数名（参数）”    点击链接时执行函数
element（如links[0]）.onmouseover=“函数名（参数）”   鼠标在其上时执行函数

node+........系列:
childNodes属性：node.childNodes 检索子元素   
nodeType属性：node.nodeType，元素节点，属性节点，文本节点的nodeType值分别为1,2,3
nodeValue属性：node.nodeValue 检索节点的值，设置某个节点的值，用赋值语句，node.nodeValue="hhhhhh"
firstChild属性：node.childNodes[0]=node.firstChild     
lastChild属性：node.childNodes[node.childNodes.length-1]=node.lastChild 


五、JavaScript编程原则和良好习惯：

1、预留退路：
JavaScript使用window对象的open方法来创建新的浏览器窗口   window.open(url,name,features),三个参数可选。window.open(winURL,"popUp","width=320,height=480");
第一个参数是想在新窗口打开的那份文档的url地址，省略时弹出空白浏览器窗口。
第二个参数新窗口名字。

第三个参数是以逗号分隔的字符串，内容是新窗口各种属性（尺寸等）

“javascript伪协议”：<a href="javascript:popUp('http://www.example.com/')">Example</a>

内嵌的事件处理函数：<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>

2、分离JavaScript：

3、向后兼容性。if(!document.getElementsByTagName) return false; ......

4、浏览器嗅探技术：通过提取由浏览器供应商提供的信息来解决向后兼容问题的办法。


六、JavaScript美术馆改进版（满足第五章内容）
1、检查当前浏览器是否理解getElementByTagName()方法
2、检查当前浏览器是否理解getElementById()方法
3、检查当前网页是否包含一个id属性值是“imagegallery”的元素
4、构造一个循环来对“imagegallery”元素中的链接进行遍历处理
5、对onclick事件处理函数进行设置，让它在有关链接被点击时完成以下操作：
把这个链接作为参数传递给ShowPic()函数；
取消链接被点击的默认行为，不让浏览器打开这个链接；
代码如下：

function prepareGallery(){    if(!document.getElementById) return false；      if(!document.getElementsByTagName) return false;    if(!document.getElementById("imagegallery")) return false;    var gallery=document.getElementById("imagegallery");    var links=gallery.getElementByTagName("a");                  //寻找id为imagegallery中的a元素，放到数组links    for(var i=0;i<links.length;i++){        links[i].onclick=function(){        showPic(this);        return false;                                       //取消默认行为    }  }}

多个JavaScript函数绑定到onload事件处理函数上：

1、

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

2、这个不理解难过

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);

       七、 动态创建HTML内容：
1、document.write()方法：
document.write("<p>This is inserted.</p>");
text=This is inserted;   var str="<p>";   str+=text;str+="<p>";   document.write(str);
3、innerHTML属性：

alert(element.innerHTML);将会弹出指定元素之间全部的HTML内容，如

<p>This is <em>my</em> content.</p>element.innerHTML="<p>I inserted <em>this</em> content.</p>"

element之前的内容被替代。

2、DOM：
createElement():创建元素节点，之后要赋值。var para=document.createElement("p");
appendChild():parent.appendChild(child)   创建后的节点只是孤儿，需要确定它在文档位置，父子元素关系，使其成为现有节点的子节点。testdiv.appendChild(para);
createTextNode():创建文本节点   var txt=document.createTextNode("Hello world");确定位置：para.appendChild(txt);
insertBefore():把一个新元素插入到一个现有元素的前面。parentElement.insertBefore(newElement,targetElement) ，其中newElement：想插入的新元素，targetElement：想把这个新元素插入到哪个现有元素的前面， parentElement：两个元素共同的父元素。

编写insertAfter():

function insertAfter(newElement,targetElement){    var parent=targetElement.parentNode;    if(parent.lastChild==targetElement){        parent.appendChild(newElement);    }else{        parent.insertBefore(newElement,targetElement.nextSibling);    }}

八、充实文档内容：

1、显示“缩略词语表”

2、显示“文献来源链接表”

3、显示“快速访问键清单”

九、CSS-DOM：
style也是字符串，element.style.property,如：alert("The color is"+p.style.color);得到p的字体颜色。等等。。。
可以设置样式信息：element.style.property="value";要加引号，否则认为value是一个变量，未定义。
用DOM设置样式信息情况，特殊位置特殊处理；
设置所有<h1>后面的第一个元素中的文本；表格的交替改变的背景颜色。
className属性：设置后class属性值将被替换而不是追加

检索某给定元素的class属性值：element.className;

设置某给定元素的class属性;       p.className."intro"       其中：.intro{font-weight:bold;}

function addClass(element,value){

   if(!element.className){      element.className=value;   }else{      newClassName=element.className;      newClassName=" ";      newClassName=value;      element.className=newClassName;   }}

十、动画实现：让网页上元素动起来，往一定方向一定速度。

1、setTimeout()函数：variablesetTimeout("function",interval)，让某个函数在经过一段预定时间之后才开始执行，function是要执行的函数的名字，interval是以毫秒为单位设定了经过多长时间才开始执行由第一个参数所给出的函数。

clearTimeout()函数：clearTimeout(variable)  取消某个正在排队等待执行的函数

2、时间递增量：
moveElement函数抽象化：
（1）获得元素的当前位置；
（2）如果元素已经到达它的目的地，退出函数
（3）如果未达到，则把它向目的地等近一步
（4）经过一段时间间隔之后从步骤1开始重复上述步骤。

function moveElement(elementID,final_x,final_y,interval){     //elementID:id名称，final_x:目的地横坐标，final_y:目的地纵坐标，interval:多长时间才执行if(!document.getElementById) return false;if(!document.getElementById(elementID)) return false;var elem=document.getElementById(elementID);var xpos=parseInt(elem.style.left);var ypos=parseInt(elem.style.top);if(xpos==final_x&&ypos==final_y){return true;}if(xpos<final_x){xpos++;}if(xpos>final_x){xpos--;}if(ypos<final_y){ypos++;}if(ypos>final_y){ypos--;}elem.style.left=xpos+"px";elem.style.top=ypos+"px";var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";movement=setTimeout(repeat,interval);}