细谈JavaScript dom编程----个人笔记

时间 2019-11-06

标签细谈 javascript dom 编程个人笔记栏目 JavaScript 繁體版

原文原文链接

第一次进书店买书，就被《JavaScript DOM编程艺术》一书所吸引，这是一本介绍JavaScript入门的神书， css

内容介绍： html

前面几章介绍JavaScript的历史 node

后面才是实例，编程

如HTML代码：数组

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

2.CSS 浏览器

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

         body{ 
       
         font-family:"Helvetica","Arial",serif; 
       
         color:#333; 
       
         background-color:#ccc; 
       
         margin:1em10%; 
       
         } 
       
         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代码进行分离-->

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)
```
其实jQuery就是JavaScript的库。