案例研究: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. ios之无限 自动 图片轮播器的实现

    比较之前发布的手动无限图片轮播器进行了改进.实现了自动无限轮播的功能.比较适合团购标题分类下面的轮播器功能. 实现思路: * 开启一个定时器,把操作放入消息循环池.每隔一定时间,操作执行一次. * 注 ...

  2. subprocess使用

    1. Popen使用 test = subprocess.Popen('ls /tmpa', shell=True, stdout = subprocess.PIPE, stderr=subproce ...

  3. Mysql note

    from w3cschool.com 1,modify the segment of table alter table table_name add/drop var_name [var_type] ...

  4. Git_Commands

  5. 链表操作,空间复杂度要求为O(1)

    对于O(1)的空间复杂度要求,不能对链表进行复制等操作,双指针法对处理该类问题比较有效. 同时由于链表头结点的特殊性,可以考虑引入一个空的头结点来辅助操作.

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

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

  7. meta标签的理解

    一直习惯的使用meta标签,还真么认真理解过,至少英文意思都还没弄明白... 下面是摘自网络的解释: 互动百科: 元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新 ...

  8. 算法训练 Torry的困惑(基本型)

    http://lx.lanqiao.org/problem.page?gpid=T129 算法训练 Torry的困惑(基本型)   时间限制:1.0s   内存限制:512.0MB      问题描述 ...

  9. poj 2509 Peter's smokes

    http://poj.org/problem?id=2509 Peter's smokes Time Limit: 1000MS   Memory Limit: 65536K Total Submis ...

  10. 关于VOID *在cl与gcc的不同(无意中发现)

    在windows中,void *是不确定类型,CL编译器无法确定其步长 但在linux中,void *默认步长是1