JavaScript DOM 编程艺术（第二版）学习之3-4章

第三章 DOM
- 3.1 文档：DOM中的"D"
- 3.2 对象：DOM中的"O"
- 3.3 模型：DOM中的"M"
- 3.4 节点
- - 3.4.1 元素节点
  - 3.4.2 文本节点
  - 3.4.3 属性节点
  - 3.4.4 CSS
  - 3.4.5 获取元素
  - 3.4.6 盘点知识点
- 3.5 获取和设置属性
- - 3.5.1 getAttribute
  - 3.5.2 setAttribute
- 3.6 小结
第四章案例研究：JavaScript图片库
- 4.1 标记
- 4.2 JavaScript
- 4.3 应用这个JavaScript函数
- 4.4 对这个函数进行扩展
- - 4.4.1 childNodes属性
  - 4.4.2 nodeType属性
  - 4.4.3 在标记里增加一段描述
  - 4.4.4 用JavaScript改变这段描述
  - 4.4.5 nodevalue属性
  - 4.4.6 firstChild和lastChild属性
  - 4.4.7 利用nodeValue属性刷新这段描述
- 4.5 小结

第三章 DOM

3.1 文档：DOM中的"D"

如果没有document （文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写的网页文档转换为一个文档对象。

3.2 对象：DOM中的"O"

对象是一种自足的数据集合。
JavaScript语言里的对象分为三种类型：

用户定义对象（user-defined object）:由程序员自行创建的对象。
内建对象（native object）:内建在JavaScript语言里的对象，如Array,Math和Date等。
宿主对象（host object）:由浏览器提供的对象。
宿主对象中最基础的是window对象，window对象对应着浏览器窗口本身，这个对象的属性和方法称为BOM(浏览器对象模型)，称为Window Object Model(窗口对象模型)更为贴切。

3.3 模型：DOM中的"M"

DOM中的"M"代表着“Model”（模型），或者“Map”(地图)。DOM代表着加载到浏览器窗口的当前网页。浏览器提供了网页的地图（或者说模型），可通过JavaScript去读取这张地图。
DOM把文档表示为一棵家谱树。家谱树本身又是一种模型。家谱树适合表示一份用(X)HTML语言编写出来的文档。
根元素是html标签，html标签代表整个文档。

3.4 节点

节点（node）是个网络术语，表示网络中的一个连接点。一个网络就是由一些结点构成的集合。
文档是由节点构成的集合，只不过此时的结点是文档树上的树枝和树叶而已。DOM节点包含着其他类型的节点。主要是元素节点、文本节点和属性节点。

3.4.1 元素节点

DOM的原子是元素节点（element node）。标签的名字就是元素的名字。文本段落元素的名字是“p”。
元素可包含其他元素。没有被包含在其他元素里的唯一元素是html元素，它是节点树的根元素。

3.4.2 文本节点

在XHTML文档里，文本节点（text node）总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。
例如：ul元素没有直接包含任何文本节点，包含着其他的元素节点（li元素），后者包含着文本节点。

3.4.3 属性节点

属性节点用来对元素做出更具体的描述。因为属性总被放在起始标签里，所以属性节点总是被包含在元素节点中。并非所有的元素都包含着属性，但所有的属性都能被元素包含。

3.4.4 CSS

CSS(层叠样式表)告诉浏览器应该如何显示一份文档的内容。
对样式的声明既可以嵌在文档的head部分，也可以放在另外一个样式表文件里。
继承（inheritance）是CSS技术中的一项强大功能。类似于DOM,CSS也把文档的内容视为一棵节点树。节点树上的各个元素将继承其父元素的样式属性。
为了把某一个或某几个元素与其他元素区别开来，需要使用class属性或id属性。

class属性
可以为class属性值相同的所有元素定义同一种样式：.classA{…}
也可以利用class属性为一种特定类型的元素定义一种特定的样式：a.classA{…}
id属性
id属性的用途是给网页里的某个元素加上一个独一无二的标识符。
尽管id属性本身只能使用一次，样式表还是可以利用id属性为包含在该特定元素里的其他元素定义样式。如#space li{…}
id属性就像是一个挂钩，一头连着文档里的某个元素，另一头连着CSS样式表里的某个样式。DOM也可以使用这种挂钩。

3.4.5 获取元素

有三种DOM方法可获取元素节点，分别是通过元素ID,通过标签名字和通过类名字来获取。

document.getElementById(id) 通过元素 id 来查找元素，返回一个对象

注意：

id值必须放在单引号或者双引号里。
JavaScript语言区分大小写。
typeof操作符来验证操作数是一个字符串、数值、函数、布尔值还是对象。
文档中的每一个元素都是一个对象。利用DOM提供的方法能得到任何一个对象。

document.getElementsByTagName(name) 通过标签名来查找元素，返回一个对象数组

注意：

getElementsByTagName允许把一个通配符作为它的参数，用于统计元素节点的个数。
可与getElementById结合使用，如统计id为“purchases”的元素中包含的元素节点个数。

  var shopping = document.getElementById("purchases");var items = shopping.getElementsByTagName("*");alert(items.length)

document.getElementsByClassName(name) 通过类名来查找元素，返回一个对象数组

注意：

这是HTML5 DOM新增的方法。
可查找带有多个类名的元素。要指定多个类名，只要在字符串参数中用空格分隔类名即可。
匹配多个类名时，类名的实际顺序不重要，就算元素带有更多的类名也没关系。
可与getElementById结合使用，如统计id为“purchases”的元素中类名为“sale”的元素节点个数。

     let shopping = document.getElementById("purchases");let items = shopping.getElementsByClassName("sale");alert(items.length)

适应于新老浏览器的getElementsByClassName()，但不适用于多个类名。

function getElementsByClassName(node,classname){if (node.getElementsByClassName){//使用现有方法return node.getElementsByClassName(classname);}else{var results = new Array();var elems = node.getElementsByTagName("*");for(var i = 0;i<elems.length;i++){if(elems[i].classname.indexOf(classname)!= -1) {results[results.length] = elems[i];}}return results;}}

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
indexOf() 方法对大小写敏感！
如果要检索的字符串值没有出现，则该方法返回 -1。

3.4.6 盘点知识点

一份文档就是一棵节点树。
节点分为不同的类型：元素节点、属性节点、文本节点等。
getElementById将返回一个对象，该对象对应着文档里的一个特定的元素节点。
getElementsByTagName和getElementsByClassName将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点。
每个节点都是一个对象。

3.5 获取和设置属性

3.5.1 getAttribute

语法：object.getAttribute(attribute)
注意：

getAttribute方法不属于document对象，不能通过document对象调用。只能通过元素节点对象调用。
如果没有相关属性，getAttribute方法会返回空值null。在JavaScript里null的含义是“没有值”。
if (sth) 与 if (sth != null)完全等价，前者更为简明。

3.5.2 setAttribute

语法：object.setAttribute(attribute,value)
注意：

setAttribute只能用于元素节点。
如果属性原先并不存在，则setAttribute会先创建这个属性，然后设置它的值。
如果setAttribute用在一个本身就有这个属性的元素节点上，这个属性的值就会被覆盖掉。
通过setAttribute对文档做出修改后，通过浏览器的view source(查看源代码)选项去查看文档的源代码时，看到的仍将是改变前的属性值。也就是说setAttribute做出的修改不会反应在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。

   let shopping = document.getElementById("ya");alert(shopping.getAttribute("title"));shopping.setAttribute("title","你好啊，懒羊羊！");alert(shopping.getAttribute("title"));

3.6 小结

本章介绍了DOM提供的五个方法：

getElementById
getElementsByTagName
getElementsByClassName
getAttribute
setAttribute
这五个方法是将要编写的许多DOM脚本的基石。

第四章案例研究：JavaScript图片库

4.1 标记

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>美术馆</title>
</head>
<body><h1>世界名画鉴赏</h1><ul><li><a href="images/001.jpg"  title="海伦娜.弗尔曼肖像 鲁本斯 1620-1625年 79×54厘米 现存伦敦国立美术馆">《海伦娜.弗尔曼肖像》</a></li><li><a href="images/002.jpg"  title="　无名女郎 1883年 I.N.克拉姆斯柯依 俄国 75.5cm×99cm 布 油彩 莫斯科 特列恰科夫美术馆藏 ">《无名女郎》</a></li><li><a href="images/003.jpg"  title ="吹笛少年 马奈 油画 1866年 160×98厘米">《吹笛少年》</a></li><li><a href="images/004.jpg"  title="女占卜师 卡拉瓦乔 油画 1590年 99×131厘米 藏巴黎卢浮宫">《女占卜师》</a></li></ul></body>
</html>
</html>

改进的地方：
1.当点击某个链接时，希望能留在这个网页而不是转到另一个窗口。
2.当点击某个链接时，希望能在这个网页上同时看到那张图片以及原有的图片清单。

实现步骤：
1.增加一个“占位符图片”，在这个主页上为图片预留一个浏览区域。
插入代码到图片清单的末尾：

<img id = "placeholder" src="data:images/22.jpg" alt="我的美术馆"/>

2.点击某个链接时，拦截这个网页的默认行为。
3.点击某个链接时，把“占位符”图片替换为与那个链接相对应的图片。

4.2 JavaScript

编写showPic函数，改变“占位符”图片的src属性，将其替换为参数图片。

 function showPic(whichpic) {var source = whichpic.getAttribute("href");var placeholder = document.getElementById("placeholder");placeholder.setAttribute("src",source);}

placeholder.src = source ;等价于placeholder.setAttribute("src",source);
setAttribute属于“第一级DOM”（DOM Level 1）的组成部分，它可以设置任意元素节点的任意属性。并且可移植性好。老方法只适用于Web文档，DOM则适用于任何一种标记语言。

4.3 应用这个JavaScript函数

将这个函数保存在扩展名为.js的文本文件showPic.js中。
若一个站点用到多个JavaScript文件，为了减少对站点的请求次数（提高性能），应该把这些.js文件合并到一个文件中。
引用JavaScript脚本文件，把下面这行代码插入到HTML文档的标签之前。

 <script type = "text/javascript" src = "scripts/showPic.js"></script>

事件处理函数

作用：在特定事件发生时，调用特定的JavaScript代码。当用户点击某个链接时触发一个动作，需要使用onclick()处理函数。
语法：event = “JavaScript statement(s)”
注意：可把任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可。
问题：用户点击这个链接时，不仅showPic函数被调用，链接被点击的默认行为也会被调用。这意味着用户还是会被带到图片查看窗口，这是不希望发生的，需要阻止这个默认行为被调用。
工作机制：
在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值将被传递给那个事件处理函数。

例如，可以给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或者是false。这样一来，当这个链接被点击时，如果那段JavaScript代码返回的值是true,onclick事件处理函数就认为“这个链接被点击了”；反之，如果返回的值是false,onclick事件处理函数就认为是“这个链接没有被点击”。

使用this关键字把链接本身用作showPic函数的参数。
onclick = "showPic(this);”

    <li><a href="images/001.jpg"  onclick = "showPic(this);return false;"title="海伦娜.弗尔曼肖像 鲁本斯 1620-1625年 79×54厘米 现存伦敦国立美术馆">《海伦娜.弗尔曼肖像》</a></li><li><a href="images/002.jpg"  onclick = "showPic(this);return false;"title="　无名女郎 1883年 I.N.克拉姆斯柯依 俄国 75.5cm×99cm 布 油彩 莫斯科 特列恰科夫美术馆藏 ">《无名女郎》</a></li><li><a href="images/003.jpg"  onclick = "showPic(this);return false;"title ="吹笛少年 马奈 油画 1866年 160×98厘米">《吹笛少年》</a></li><li><a href="images/004.jpg"  onclick = "showPic(this);return false;" title="女占卜师 卡拉瓦乔 油画 1590年 99×131厘米 藏巴黎卢浮宫">《女占卜师》</a></li>

4.4 对这个函数进行扩展

4.4.1 childNodes属性

语法：element.childNodes
childNodes属性可以用来获取任何一个元素的所有子元素，它是一个包含这个元素全部子元素的数组。

4.4.2 nodeType属性

语法：node.nodeType
nodeType属性总共有12种可取值，但其中仅有3种有实用价值。
元素节点的nodeType属性值是1。
属性节点的nodeType属性值是2。
文本节点的nodeType属性值是3。

4.4.3 在标记里增加一段描述

维护一个文本节点，在显示图片时，把这个文本节点的值替换成目标链接的title值。
在img标签之后，增加一个新的文本段，为它设置一个独一无二的id值。

4.4.4 用JavaScript改变这段描述

为了能动态地用图片的title替换掉图片说明，需要对showPic函数做一些修改。
增加语句：

function showPic(whichpic) {var source = whichpic.getAttribute("href");var placeholder = document.getElementById("placeholder");placeholder.setAttribute("src",source);var text = whichpic.getAttribute("title");var description = document.getElementById("description");
}

4.4.5 nodevalue属性

语法：node.nodeValue
如果想改变一个文本节点的值，使用DOM提供的nodeValue属性，得到/设置一个节点的值。
使用nodeValue属性获取description对象的值时，得到的并不是包含在这个段落里的文本。

var description = document.getElementById(“description”);
alert(description.nodeValue)

这个调用将返回一个null值，<p>元素本身的nodeValue属性是一个空值，而真正需要的是<p>元素所包含的文本值。即它的第一个子节点的nodeValue属性值的内容。

alert(description.childNodes[0].nodeValue);

4.4.6 firstChild和lastChild属性

node.firstChild 与 node.childNodes[0] 写法完全等价。
node.lastChild 与 node.childNodes[node.childNodes.length-1] 写法完全等价。

4.4.7 利用nodeValue属性刷新这段描述

添加代码：
description.firstchild.nodeValue = text;
最终代码清单：

function showPic(whichpic) {var source = whichpic.getAttribute("href");var placeholder = document.getElementById("placeholder");placeholder.setAttribute("src",source);var text = whichpic.getAttribute("title");var description = document.getElementById("description");description.firstChild.nodeValue = text;
}

增加样式表：

  <style type="text/css" >body{font-family: "微软雅黑",Serif;color:white;background-color:#993366;margin: 1em 10%;}h1{color:snow;background-color: transparent;}a{color:floralwhite;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;}</style>

图片库显示效果：

4.5 小结

DOM提供的新属性：
childNodes、nodeType、nodeValue、firstChild、lastChild
学习重点：

如何利用DOM提供的方法编写图片库脚本
利用事件处理函数把JavaScript代码与网页集成在一起