案例研究:JavaScript 图片库

改变图片的src属性的两种方式:

1,setAttribute方法是“第1级DOM”的组成部分,它可以设置元素节点的任意属性。

2,element.src = source;这是在“第1级DOM”出现之前的方法,现在也有效。

“第1级DOM”的优势是可移植性好,那些老方法只适用于Web文档,DOM则适用于任何一种标记语言。

事件处理函数

当点击某个链接时,我希望留在这个网页面而不是转到另一个窗口,代码如下:

<a href="http://www.example.com" onclick="showPic(this); return false ;">Click</a>

当点击这个链接时,因为onclick事件处理函数所触发的Javascript代码返回的值是false,所以这个链接的默认行为没有被触发.

childNodes属性

childNodes属性可以用来获取任何一个元素的所有子元素。由childNodes属性返回的数组包含所有类型的节点,而不仅仅是元素节点。事实上,文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释为节点,而它们全都包含在childNodes属性所返回的数组中。

但每个节点都有nodeType属性。nodeType属性总共有12种可取值,但其中仅有3种具有使用价值:元素节点的nodeType属性值是1,属性节点的nodeType属性值是2,文本节点的nodeType属性值是3.

如果想改变一个文本节点的值,那么就用DOM提供的nodeValue属性。

数组元素childNodes[0]有个更直观易读的同义词,可以把它写成firstChild;DOM还提供了一个与之对应的lastChild属性。

示例:

<p id="description">Choose an image</p>

首先创建一个变量来存放它:

var description = document.getElementById("description");

description.nodeValue的返回值是null。<p>元素本身的nodeValue属性是一个空值,而如果想要得到<p>元素包含的文本的值,要用description.childNodes[0].nodeValue或者description.firstChild.nodeValue

<!--

作者:纤锐
出处:http://www.cnblogs.com/beginner2014/p/4152647.html
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。谢谢合作。

-->

JavaScript DOM 编程艺术(第2版)读书笔记(4)的更多相关文章

  1. Javascript DOM 编程艺术(第二版)读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

  2. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 《JavaScript DOM编程艺术(第二版)》读书总结

    这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,Jav ...

  4. 【读书笔记】读《JavaScript DOM 编程艺术-第2版》

    1.DHTML DHTML曾被认为是HTML/XHTML.CSS和JavaScript相结合的产物,就像今天的HTML5那样,但把这些东西真正凝聚在一起的是DOM.如果真的需要来描述这一过程的话,“D ...

  5. Javascript DOM 编程艺术(第二版)读书笔记——DOM基础

    1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父)   child(子)   sibling(兄弟)   ...

  6. JavaScript -- JavaScript DOM 编程艺术(第2版)

    /* 渐进增强 平稳退化 网页 结构层(structural layer): HTML 表示层(presentation layer): CSS <link rel="styleshe ...

  7. 《JavaScript DOM 编程艺术 第 2 版》

    第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案 ...

  8. JavaScript DOM编程艺术读后感(1)—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  9. JavaScript DOM编程艺术(第2版)的简单总结

    介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介 ...

  10. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

随机推荐

  1. 通常Struts框架会自动地从action mapping中创建action对象

    开发者不必在Spring中去注册action,尽管可以这么去做,通常Struts框架会自动地从action mapping中创建action对象 struts2-spring-plugin-x-x-x ...

  2. Create your first isolated Python environment

    # Install virtualenv for Python 2.7 and create a sandbox called my27project: pip2. install virtualen ...

  3. Java Socket常见异常处理 和 网络编程需要注意的问题

    在java网络编程Socket通信中,通常会遇到以下异常情况: 第1个异常是 java.net.BindException:Address already in use: JVM_Bind. 该异常发 ...

  4. Leetcode: Implement Trie (Prefix Tree) && Summary: Trie

    Implement a trie with insert, search, and startsWith methods. Note: You may assume that all inputs a ...

  5. 面向对象 理解 C#复习

    面向对象: 是基于万物皆对象这个哲学观点. 所谓的面向对象就是将我们的程序模块化,对象化,把具体事物的特性属性和通过这些属性来实现一些动作的具体方法放到一个类里面 通俗点讲: 一切都是对象 举例: 将 ...

  6. Codeforce Round #218 Div2

    A:没个元素的个数少的变成多的和就是了 B:居然被systemtest搓掉了- -分东西,我改的代码,还是shit一样的过的...别人的直接两个操作数相减就可以了! C:二分题- -,没想到比赛时因为 ...

  7. codevs 1202 求和

    http://codevs.cn/problem/1202/ 1202 求和  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 青铜 Bronze 题解       题目描述 D ...

  8. Mysql索引介绍及常见索引(主键索引、唯一索引、普通索引、全文索引、组合索引)的区别

    Mysql索引概念:说说Mysql索引,看到一个很少比如:索引就好比一本书的目录,它会让你更快的找到内容,显然目录(索引)并不是越多越好,假如这本书1000页,有500也是目录,它当然效率低,目录是要 ...

  9. java经典小算法

    package com.shb.java; public class Demo4 { /**时间有限 先不写文字了 自己随便敲的 * @param args * @author shaobn */ p ...

  10. Verilog篇(二)系统函数

    显示任务:$display,$write, 前者总会输出一个换行符,后者不会.固定输出格式版:$displayb/$displayo/$displayh/$writeb/$writeo/$writeh ...