《JavaScript DOM 编程艺术》读书笔记之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

赞 (0)

相关推荐

  • 薪资那么高的Web前端必看书单

    薪资那么高的Web前端必看书单

    JavaScript 要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先通过在线教程学习一些基本语法和定义. 最重要的是你必须要看书,然后实践. 以下内容都是结合我自己的学习路线与经验,再整理汇总了网络各路大神的资料,希望能帮助源源不断入坑的新人更好的学习. 第1本: <JavaScript权威指南(第6版)> (点击 下载链接) <JavaScript权威指南(第6版)>主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的Jav

  • 荐书|您有一份JavaScript书单待签收

    荐书|您有一份JavaScript书单待签收

    前言 凡是能够用JavaScript来写的应用,最终都必将用JavaScript来写,Jeff Atwood如是说,此定律大概意味着未来将会成为JavaScript的天下? 不管JavaScript最终能否征服世界,我们都不可忽视它在前端开发中的重要作用,因此下面小编给大家准备了一份JavaScript书单~ 一.<你不知道的JavaScript> 推荐指数:五颗星 推荐理由:这是相当好的一本书,对于初学者入门,可以更好地搞清楚作用域.原型等知识点,对于有相关经验的同学,也会对JS的语法有更深

  • javascript框架设计读书笔记之模块加载系统

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: 复制代码 代码如下: function loadJs(url , callback){ var node = document.createElement("script");       node[window.addEventListener ? "onload":"onre

  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史

    JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出IE3的时候发布了自己的VBScript语言,同时以JScript为名发布了JavaScript 的一个版本,很快赶上了 Netscape 的步伐.面对微软公司的竞争,Netscape 和 Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript 语言进行了标准化,于是出现了ECMAScript语言,这是同一种语言

  • JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    JavaScript DOM 编程艺术（第2版）读书笔记(JavaScript的最佳实践)

    1.防止滥用JavaScript"不管你想通过JavaScript改变哪个网页的行为,都必须三思而后行.首先要确认:为这个网页增加这种额外的行为是否确有必要?" 个人认为,作者的这句话放在当前几乎无处不用JavaScript来增强Web页面交互体验的时代,可以理解为应该适当的使用JavaScript,而不要因为使用了实现酷炫效果的脚本导致网页加载缓慢或者兼容性极差而舍本求末,导致用户无法浏览和使用网站. 2.平稳退化平稳退化是指当用户禁用浏览器JavaScript或浏览器不支持Java

  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库

    改变图片的src属性的两种方式: 1,setAttribute方法是"第1级DOM"的组成部分,它可以设置元素节点的任意属性. 2,element.src = source;这是在"第1级DOM"出现之前的方法,现在也有效. "第1级DOM"的优势是可移植性好,那些老方法只适用于Web文档,DOM则适用于任何一种标记语言. 事件处理函数 当点击某个链接时,我希望留在这个网页面而不是转到另一个窗口,代码如下: 复制代码 代码如下: <a hr

  • 《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法

    注释         单行注释:// 多行注释:/* */ "<!--"可以用作单行注释,由于和HTML的"<!--  -->"多行注释类似,容易混淆,所以不建议这种注释方法 变量        在JavaScript 语言里,变量和其他语法元素的名字都是区分字母大小写的.名字mood的变量与名字是Mood.MOOD或mOOd的变量没有任何关系,它们不是同一个变量. JavaScript 语法不允许变量名中包含空格或标点符号("$&quo

  • 《JavaScript DOM 编程艺术》读书笔记之DOM基础

    DOM              DOM:文档对象模型: 节点 元素节点:DOM的原子是元素节点.<body>.<p>.<ul>之类的元素.元素可以包含其他的元素.没有被包含在其他元素里的唯一元素是<html>元素 文本节点:在XHTML文档里,文本节点总是被包含在元素节点的内部. 属性节点:属性节点用来对元素做出更具体的描述.例如,几乎每个元素都有一个title属性,而我们可以利用这个属性对包含在元素里的东西作出准确的描述: <p title=&qu

  • 读JavaScript DOM编程艺术笔记

    1.获得当前元素的下一个元素 复制代码 代码如下: function getNextElement(node){ if(node.nodeType==1){ return node; } if(node.nextSibling){ return getNextElement(node.nextSibling); } return null; }; 2.外部引入的js,添加页面加载方法 复制代码 代码如下: function addLoadEvent(func){ var oldonload=wi

  • 高性能JavaScript DOM编程（1）

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是

  • 《JavaScript高级编程》学习笔记之object和array引用类型

    本文给大家分享我的javascript高级编程学习笔记之object和array引用类型,涉及到javascript引用类型相关知识,大家一起看看把. 1. Object类型 大多数引用类型值都是Object类型的实例:而且Object也是ECMAScript中使用最多的一个类型. 创建Object实例有如下两种方式: new操作符后跟Object构造函数: var person=new Object( ); person.name="webb"; person.age=25; 对象字

  • 对javascript的一点点认识总结《javascript高级程序设计》读书笔记

    l ECMAScript,有ECMA-262定义,明确javascript这门语言的规则和约定,好比为开始一场游戏指定的游戏规则.规范.约定. l DOM:提供访问和操作网页内容的方法和接口 l BOM,提供与浏览器交互的方法和接口 ECMA-262规定了以下内容: l 语法 l 类型 l 关键字 l 保留字 l 操作符 l 对象 ECMAScript是对该标准规定的各方面内容的编程语言描述,javascript实现了ECMAScript指定内容并进行了扩展. BOM用于访问浏览器的功能,包含了

  • javascript DOM编程实例(智播客学习)

    并给我们讲解了很多关于如何去学习DOM的方法,觉得真的是受益匪浅啊.下面就几个我觉得比较好的例子和大家分享一下. 1.二级连动下拉菜单(一级是省份,二级是城市,要求一级选中省份,二级城市对应出现) 步骤:1)基本框架(HTML):两个复选框,而第二个复选框里面开始应该是没有选项的,注意第一个下拉框会作为事件源,通过 onchange方法激发JavaScript中的功能实现部分. 复制代码 代码如下: <xmp> <select id="province" onchan

随机推荐