《JavaScript DOM编程艺术》学习整理

时间 2020-09-14

标签 javascript dom 编程艺术学习整理栏目 JavaScript 繁體版

原文原文链接

《JavaScript DOM编程艺术》真是入门js的神书，很是推荐想入门的去看这本书。本篇文章主要是记录本身学习的一些笔记和代码实例。css

1、前五章html

前五章主要经过DOM和html以及css建立了个能实现基本功能需求的图片库node

主要介绍了js的历史，js的基础语法和DOM的操做和一个简单的图片库的案例研究编程

1.HTML数组

1.1图片库案例的初版html代码，没有什么值得注意的地方。很简单。浏览器

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="william">
  <meta name="Keywords" content="dom code art">
  <meta name="Description" content="">
  <link rel="stylesheet" type="text/css" href="css/layout.css">
  <script src="js/showPic.js"></script>
  <title>图片库</title>
 </head>
 <body>
<h1>Photos<h1>
 <ul>
 <li><a href="images/1.jpg" title="菊花" onclick="showPic(this);return false;">第一张</a></li>
 <li><a href="images/2.jpg" title="沙漠" onclick="showPic(this);return false;">第二张</a></li>
 <li><a href="images/3.jpg" title="八仙花" onclick="showPic(this);return false;">第三张</a></li>
 <li><a href="images/4.jpg" title="灯塔" onclick="showPic(this);return false;">第四张</a></li>
 </ul>
 <img id="zhanweifu" src="images/zhanwei.jpg" alt="占位"/>
 <p id ="description">选择一张照片</p>
 </body>
</html>

2.CSSdom

2.1整篇图片库css代码，这里不对css学习作过多总结，css须要另行总结，只是放出代码函数

body{
font-family:"Helvetica","Arial",serif;
color:#333;
background-color:#ccc;
margin: 1em 10%;
}
h1{
color:#333;
background-color:transparent;
}

a:link{color:blue}
a:visited{color:black}
a:hover{color:red}
a:active{color:green}
/*css伪类的运用*/
/*link表示默认，visited表示访问事后，hover表示通过时，active表示点击时*/
a{
background-color:transparent;
font-weight:bold;
text-decoration:none;
}
ul{
padding:0;
}
li{
float:left;
padding:1em;
list-style:none;
}
img{
display:block;
clear:both
}

3.JS性能

3.1showPic函数学习

 1 function showPic(whichPic){             //whichPic是形参，看具体调用的地方
 2                                         //修改占位符图片
 3     var source = whichPic.getAttribute("href");
 4     var place = document.getElementById("zhanweifu");
 5     place.setAttribute("src",source);
 6     //修改照片下方描述性文字
 7     var text = whichPic.getAttribute("title")
 8     var txt = document.getElementById("description");
 9     //alert(txt.firstChild.nodeValue)//firstChild等价于childNodes[0]而且更加直观  于firstChild对应的还有个lastChild表示childNodes数组的最后一个元素
10     txt.firstChild.nodeValue = text ;    
11 }

a.这里接触到了getAttribute()和setAttribute()；前者获取元素属性，后者能够获取并修改元素属性值

b.childNodes nodeType和nodeValue三个属性

　　childNodes属性能够获取任何有一个元素的全部子元素，它是一个包含这个元素全部子元素的数组；如我想获取body元素的全部子元素

1 var body_element = document.getElementsByTagName("body")[0];//这里[0]是body的第一个元素整篇html也且只有一个用[0]是获取body元素，不用的话只是获取一个空的数组

2 body_element.childNodes

　　nodeType 获取元素节点语法结构：node.nodeTye如alert(body_element.nodeType )会显示1；

　　通常js中只有3种具备实用价值的nodeType属性：元素节点的属性值是1；属性节点的属性值是2；文本节点的属性值是3。

　　nodeValue 用来改变文本节点的值，它用来获得（或设置）一个节点的值，语法结构：node.nodeValue如p[0].nodeValue这里p是元素可是想要获取文本，那么包含在p元素里面的文本节点是另外一种节点，若是想要获得内容那么确定要求p的第一个子节点的nodeValue，★固然第一个也能够用firstChild也表示 p[0]和p.firstChild是等价的

那么以上这些能够实现一个简单的图片库效果，可是仍是存在不少不规范的地方，好比是否支持平稳退化、结构和样式是否分离、是否向后兼容？性能考虑，压缩脚本等均可以考虑进来更好的完善图片库。

==========================我是分割线=================================================================

学习第五章以后，有了图片库改进版。第五章主要强调平稳退化，结构样式分离，向后兼容，性能考虑等最佳实践

1.改进版HTML代码

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Author" content="william">
 6   <meta name="Keywords" content="dom code art">
 7   <meta name="Description" content="">
 8   <link rel="stylesheet" type="text/css" href="css/layout.css">
 9   <script src="js/showPic.js"></script>
10   <title>图片库</title>
11  </head>
12  <body>
13 <!--第二版V2.0 改进点：使得HTML标记和JavaScript代码进行分离-->
14 
15  <h1>Photos<h1>
16  <ul id="gallerypic"><!--挂钩，方便统一操做图片清单-->
17  <li><a href="images/1.jpg" title="菊花" >第一张</a></li>
18  <li><a href="images/2.jpg" title="沙漠" >第二张</a></li>
19  <li><a href="images/3.jpg" title="八仙花">第三张</a></li>
20  <li><a href="images/4.jpg" title="灯塔"  >第四张</a></li>
21  </ul>
22  <img id="zhanweifu" src="images/zhanwei.jpg" alt="占位"/>
23  <p id ="description">选择一张照片</p>
24  </body>
25 </html>

取消了行内onclick事件并赋予ul一个id以便统一操做ul下的连接，那么咱们须要添加事件处理函数

新建函数prepareGallery将有关操做关联到onclick上

函数须要检查浏览器是否理解getElementsByTagName。
函数须要检查浏览器是否理解getElementByID。
函数须要检查当前网页是否存在id为imagegallery的元素
遍历imagegallery元素中的全部连接
设置onclick事件，让他在有关连接被点击时完成一下操做：1，将连接做为参数传给showPic函数；2，取消连接的默认行为不让浏览器打开连接

改版后的js代码新增了prepareGallery函数以下所示：

 1 function showPic(whichPic){             //whichPic是形参，看具体调用的地方
 2                                         //修改占位符图片
 3     var source = whichPic.getAttribute("href");
 4     var place = document.getElementById("zhanweifu");
 5     place.setAttribute("src",source);
 6     //修改照片下方描述性文字
 7     var text = whichPic.getAttribute("title")
 8     var txt = document.getElementById("description");
 9     //alert(txt.firstChild.nodeValue)//firstChild等价于childNodes[0]而且更加直观  于firstChild对应的还有个lastChild表示childNodes数组的最后一个元素
10     txt.firstChild.nodeValue = text ;    
11 }
12 
13 
14 //第二版V2.0 分析：若是使得html和js分离 那么我须要把onclick事件与id进行一个绑定须要进行以下代码编写:
15 //1.检查浏览器是否支持getElementsByTagname、getElementByID;
16 //2.判断网页是否存在id="gallerpic"的这样一个元素；
17 //3.遍历gallery元素中的全部连接;
18 //4.设置onclick事件让他在相关连接被点击时，将此连接做为参数传递给showPic而且取消连接被点击时的默认行为不打开新的窗口.
19 function prepareGallery(){
20     if(!document.getElementsByTagName){return false;}
21     if(!document.getElementById){return false;}
22     if(!document.getElementById("gallerypic")){return false;}
23     var gallery=document.getElementById("gallerypic");
24     var links = gallery.getElementsByTagName("a");
25     for(var i = 0;i<links.length;i++){          //for语句条件之间是分号不是逗号  要注意 
26         links[i].onclick = function(){
27             showPic(this);return false;
28         }
29     }
30 }
31 //下面是执行这个prepareGallery函数，须要等到页面加载完onload以后，最简单的办法是定义一个匿名函数诸如
32 //window.onload = function(){
33 //    firstFunction();
34 //    secondFunction();
35 //}
36 //最佳的办法是调用addLoadEvent函数
37 function addLoadEvent(func){
38     var oldonload = window.onload;
39     if(typeof window.onload != 'function'){
40         window.onload = func;
41     }else{
42         window.omload = function(){
43             oldonload();
44             func();
45         }
46     }
47 }
48 addLoadEvent(prepareGallery)