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

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

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

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

注意:

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

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

注意:

  1. getElementsByTagName允许把一个通配符作为它的参数,用于统计元素节点的个数。
  2. 可与getElementById结合使用,如统计id为“purchases”的元素中包含的元素节点个数。
	 var shopping = document.getElementById("purchases");
	 var items = shopping.getElementsByTagName("*");
	 alert(items.length)

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

注意:

  1. 这是HTML5 DOM新增的方法。
  2. 可查找带有多个类名的元素。要指定多个类名,只要在字符串参数中用空格分隔类名即可。
  3. 匹配多个类名时,类名的实际顺序不重要,就算元素带有更多的类名也没关系。
  4. 可与getElementById结合使用,如统计id为“purchases”的元素中类名为“sale”的元素节点个数。
 	let shopping = document.getElementById("purchases");
 	let items = shopping.getElementsByClassName("sale");
 	alert(items.length)
  1. 适应于新老浏览器的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 盘点知识点
  1. 一份文档就是一棵节点树。
  2. 节点分为不同的类型:元素节点、属性节点、文本节点等。
  3. getElementById将返回一个对象,该对象对应着文档里的一个特定的元素节点。
  4. getElementsByTagName和getElementsByClassName将返回一个对象数组,它们分别对应着文档里的一组特定的元素节点。
  5. 每个节点都是一个对象。

3.5 获取和设置属性

3.5.1 getAttribute

语法:object.getAttribute(attribute)
注意

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

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

  1. setAttribute只能用于元素节点。
  2. 如果属性原先并不存在,则setAttribute会先创建这个属性,然后设置它的值。
  3. 如果setAttribute用在一个本身就有这个属性的元素节点上,这个属性的值就会被覆盖掉。
  4. 通过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="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代码与网页集成在一起
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值