细谈JavaScript dom编程----我的笔记-白红宇

细谈JavaScript dom编程----我的笔记

阅读量：5894 次

发布时间：2019-06-19

本文共 5134 字，大约阅读时间需要 17 分钟。

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

内容介绍：

前面几章介绍JavaScript的历史

后面才是实例，

如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="菊花"οnclick="showPic(this);return false;">第一张</a></li> 
             <li><ahref="images/2.jpg"title="沙漠"οnclick="showPic(this);return false;">第二张</a></li> 
             <li><ahref="images/3.jpg"title="八仙花"οnclick="showPic(this);return false;">第三张</a></li> 
             <li><ahref="images/4.jpg"title="灯塔"οnclick="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需要另行总结，只是放出代码

            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代码

10 图片库

15 Photos

17 第一张

18 第二张

19 第三张

20 第四张

选择一张照片

24 25

取消了行内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
```

```
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的库。

转载于:https://my.oschina.net/bigfool007139/blog/552251

你可能感兴趣的文章

C++ Tip: How To Get Array Length | Dev102.com

查看>>

Python Socket学习 - garfieldtom - 博客园

android DDMS 连接真机（己ROOT)，用file explore看不到data/data文件夹的解决办法

Thread类源码解读(1)——如何创建和启动线程

查看>>

vue 实现数字滚动增加效果

查看>>

[LeetCode] Convert Sorted List to Binary Search Tree

查看>>

Bootstrap清除浮动的实现原理

查看>>

全球首届APMCon，带你给“应用性能”把把脉

查看>>

用户超5亿，三年投10亿，开发者如何抢滩支付宝小程序蓝海？

查看>>

初学vue2.0-组件-文档理解笔记v1.0

查看>>

AVL树 & 重平衡概念

查看>>

NG-ZORRO-MOBILE 0.11.9 发布，基于 Angular 7 的 UI 组件

Windows Server 笔记（六）：Active Directory域服务：域控制器安装

查看>>