JavaScript DOM编程艺术 (第2版)
一些 抄书
norang
这个作者很懒,什么都没留下…
展开
-
JavaScript--DOM--JavaScript--DOM里常用的一些方法和属性
DOM的原子是元素节点 (element node)。文本节点 (text node)。属性结点用来对元素做出更具体的描述。<p title="a gentle reminder">Don't forget to buy this stuff.</p>在DOM中,title=“a gentle reminder” 是一个属性节点 (attribute node),继承 (inheritance)是CSS技术中的一项强大功能。类似于DOM,CSS 也把文档的内容视为一棵节原创 2021-06-08 00:05:20 · 521 阅读 · 5 评论 -
JavaScript--DOM--nodeType 属性
4.4.2 nodeType 属性根据gallery.html 文件的结构,body 元素应该只有3个子元素:一 个h1 元素、一个ul 元素和一个img 元素。可 是,countBodyChildren() 函数给出来的数字却远大于此,这是因为 文档树的节点类型并非只有元素节点一种。由childNodes 属性返回的数组包含所有类型的节点,而不仅仅是元素 节点。事实上,文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释为节点,而它们也全都包含在childNodes 属性所返回的数组当中。原创 2021-06-07 15:55:18 · 678 阅读 · 1 评论 -
JavaScript--DOM--通过DOM-style属性来设置样式,并由此获取样式
通过style 属性获取样式有很大的局限性。style 属性只能返回内嵌样式。换句话说,只有把CSS style 属性插入到标记里,才可以用DOM style 属性去查询那些信息:<p id="example" style="color: grey; font: 12px 'Arial',sans-serif;">这可不是使用样式的好办法——表现信息与结构混杂在一起了。更好的 办法是用一个外部样式表去设置样式:p#example { color: grey; font: 12p原创 2021-06-07 00:02:07 · 2129 阅读 · 1 评论 -
JavaScript--DOM--当你需要引用一个中间带减号的CSS属性时,DOM要求你用驼峰命名法
如果像下面这样去 访问名为font-family 的属性,就会收到一条出错信息:element.style.font-familyJavaScript将把减号前面的内容解释为“元素的style 属性的font 属 性”,把减号后面的内容解释为一个名为family 的变量,把整个表达式 解释为一个减法运算。这完全违背了我的本意!减号和加号之类的操作符是保留字符,不允许用在函数或变量的名字里。这同时意味着它们也不能用在方法或属性的名字里(别忘了,方法 和属性其实是关联在某个对象上的函数和变量)。当你需原创 2021-06-06 22:56:34 · 289 阅读 · 0 评论 -
JavaScript--DOM--对于动态创建标记,说的很漂亮的话。
DOM是文档的表示。DOM所包含的信息与文档里的信息一一对应。你 只要学会问正确的问题(使用正确的方法),就可以获取DOM节点树 上任何一个节点的细节。DOM是一条双向车道。不仅可以获取文档的内容,还可以更新文档的内容。如果你改变了DOM节点树,文档在浏览器里的呈现效果就会发 生变化。你已经见识过setAttribute 方法的神奇之处了。用这个方法 可以改变DOM节点树上的某个属性节点,相关文档在浏览器里的呈现 就会发生相应的变化。不过,setAttribute 方法并未改变文档的物理 内容,如果用文本原创 2021-06-06 16:57:50 · 184 阅读 · 0 评论 -
JavaScript--DOM--HTML 的 innerHTML 属性
7.1.2 innerHTML 属性现如今的浏览器几乎都支持属性innerHTML ,这个属性并不是W3C DOM标准的组成部分,但现已经包含到HTML5规范中。它始见于微软 公司的IE 4浏览器,并从那时起逐渐被其他的浏览器接受。innerHTML 属性可以用来读、写某给定元素里的HTML内容。要了解它 如何工作,请把下面这段代码插入test.html 文档的 部分:用DOM 的眼睛看testdiv 内的标记,是如图7-2所示的结构。div 元素的id 是testdiv 。它包含一个元素节点(原创 2021-06-06 16:50:07 · 496 阅读 · 1 评论 -
JavaScript--DOM--在使用键盘选中标签时,照样能够触发onclick事件
小心onkeypress我最后的决定是不添加onkeypress 事件处理函数。原因是这个事件处 理函数很容易出问题。用户每按下一个按键都会触发它。在某些浏览器 里,甚至包括Tab键!这意味着如果绑定在onkeypress 事件上的处理 函数上返回的是false ,那些只使用键盘访问的用户将永远无法离开当前链接。我的图片库网页就存在这样的问题——只要图片切换成功,showPic 函数就将返回false 。那这些只使用键盘的人可怎么办?幸运的是,onclick 事件处理函数比我们想象得更聪明。虽然它的名原创 2021-06-06 16:31:25 · 260 阅读 · 0 评论 -
JavaScript--DOM--nodeName 属性总是返回一个大写字母的值,即使元素在 HTML文档里是小写字母
比如说,检查placeholder 元素是否存在,但需要假设那是一张图 片。为了验证这种情况,可以用nodeName 属性来增加一项测试:if (placeholder.nodeName != "IMG") return false;请注意,nodeName 属性总是返回一个大写字母的值,即使元素在 HTML文档里是小写字母。参考目录绝大多数内容来自于:JavaScript DOM编程艺术 (第2版) 作者:作者:[英] Jeremy Keith [加] Jeffrey Sambel原创 2021-06-06 16:26:14 · 299 阅读 · 0 评论 -
JavaScript--DOM--共享onload 事件
6.3.2 共享onload 事件我必须执行prepareGallery 函数才能对onclick 事件进行绑定。如果马上执行这个函数,它将无法完成其工作。如果在HTML文档完成加载之前执行脚本,此时DOM是不完整的。具体到prepareGallery 函数,它的第3行代码将测试"imagegallery" 元素是否存在,如果 DOM不完整,这项测试的准确性就无从谈起,事态的发展就会偏离我 的计划。应该让这个函数在网页加载完毕之后立刻执行。网页加载完毕时会触发 一个onload 事件,这个事件与win原创 2021-06-06 16:20:38 · 403 阅读 · 2 评论 -
JavaScript--DOM--给相关标签添加点击事件触发匿名函数
for ( var i=0; i < links.length; i++) { links[i].onclick = function() { showPic(this); return false; }}这条语句定义了一个匿名函数。这是一种在代码执行时创建函数的 办法。具体到上面这条语句,它把links[i] 元素的onclick 事件 处理函数指定为这个匿名函数。这个匿名函数里的所有语句将 在links[i] 元素所对应的链接被点击时执行。参考目录绝大原创 2021-06-06 16:03:13 · 327 阅读 · 0 评论 -
JavaScript--DOM--压缩脚本
5.6.3 压缩脚本在写完了脚本,做了优化,而且也将它放到文档中的适当位置之后,还有一件事可以加快加载速度:压缩脚本文件。所谓压缩脚本,指的是把脚本文件中不必要的字节,如空格和注释,统统删除,从而达到“压缩”文件的目的。好在,有很多工具都可以替你来 做这件事。有的精简程序甚至会重写你的部分代码,使用更短的变量 名,从而减少整体文件大小。比如,假设你有如下代码:压缩之后的代码就会变成下面这样:精简后的代码虽然不容易看懂,却能大幅减少文件大小。多数情况下, 你应该有两个版本,一个是工作副本,可以修原创 2021-06-06 15:55:17 · 339 阅读 · 0 评论 -
JavaScript--DOM--关于HTML文档中,引用JavaScript的<script> 标签的 位置的建议
脚本在标记中的位置对页面的初次加载时间也有很大影响。传统上,我 们都把脚本放在文档的<head> 区域,这种放置方法有一个问题。位于 <head> 块中的脚本会导致浏览器无法并行加载其他文件(如图像或其 他脚本)。一般来说,根据HTTP规范,浏览器每次从同一个域名中最 多只能同时下载两个文件。而在下载脚本期间,浏览器不会下载其他任 何文件,即使是来自不同域名的文件也不会下载,所有其他资源都要等 脚本加载完毕后才能下载。按照本章前面讨论的渐进增强和分离JavaScript观点,把&l原创 2021-06-06 15:50:12 · 156 阅读 · 0 评论 -
JavaScript--DOM--当DOM树结构完整时,调用指定方法 -- window.onload
如果把这段代码存入外部JavaScript文件,它们将 无法正常运行。因为这段代码的第一行是:var links = document.getElementsByTagName("a");这条语句将在JavaScript文件被加载时立刻执行。如果JavaScript文件是 从HTML文档的<head> 部分用<script> 标签调用的,它将在HTML文 档之前加载到浏览器里。同样,如果<script> 标签位于文档底部 </body> 之前,就不能保证原创 2021-06-06 00:47:20 · 202 阅读 · 0 评论 -
JavaScript--DOM--渐进增强 的概念
所谓“渐进增强”就是用一些额外的信息层去包裹原始数据。按照“渐进 增强”原则创建出来的网页几乎(如果不是“全部”的话)都符合“平稳退 化”原则。原创 2021-06-05 10:46:51 · 142 阅读 · 0 评论 -
JavaScript--DOM-- “javascript:”伪协议
5.2.1 “javascript:”伪协议“真”协议用来在因特网上的计算机之间传输数据包,如HTTP协议 (http://)、FTP协议(ftp://)等,伪协议则是一种非标准化的协 议。“javascript:”伪协议让我们通过一个链接来调用JavaScript函数。下面是通过“javascript:”伪协议调用popUp() 函数的具体做法:<a href="javascript:popUp('http://www.example.com/');">Example</a>原创 2021-06-05 10:40:28 · 539 阅读 · 0 评论 -
JavaScript--DOM-- window对象的open()方法的使用
JavaScript使用window 对象的open() 方法来创建新的浏览器窗口。这 个方法有三个参数:window.open(url,name,features)这三个参数都是可选的。第一个参数是想在新窗口里打开的网页的URL地址。如果省略这个 参数,屏幕上将弹出一个空白的浏览器窗口。第二个参数是新窗口的名字。可以在代码里通过这个名字与新窗口 进行通信。最后一个参数是一个以逗号分隔的字符串,其内容是新窗口的各种 属性。这些属性包括新窗口的尺寸(宽度和高度)以及新窗口被启 用或禁用原创 2021-06-05 10:31:54 · 1010 阅读 · 0 评论 -
JavaScript--DOM--平稳退化 的 概念
记住,网站的访问者完全有可能使用的是不支持JavaScript的浏览器,还 有一种可能是虽然浏览器支持JavaScript,但用户已经禁用它了(比如, 因为讨厌看到弹出广告)。如果没有考虑到这种情况,人们在访问你们 的网站时就有可能遇到各种各样的麻烦,并因此不再来访问你们的网 站。如果正确地使用了JavaScript脚本,就可以让访问者在他们的浏览器不支 持JavaScript的情况下仍能顺利地浏览你的网站。这就是所谓的平稳退化 (graceful degradation),就是说,虽然某些功能无法使用,原创 2021-06-05 10:25:12 · 122 阅读 · 0 评论 -
JavaScript--DOM-- firstChild 和lastChild 属性
4.4.6 firstChild 和lastChild 属性数组元素childNodes[0] 有个更直观易读的同义词。无论何时何地, 只要需要访问childNodes 数组的第一个元素,都可以把它写 成firstChild :node.firstChild这种写法与下面的写法完全等价:node.childNodes[0]这不仅更加简短,还更加具有可读性。DOM还提供了一个与之对应的lastChild 属性:node.lastChild这代表着childNodes 数组的最后一个元素。原创 2021-06-05 10:17:17 · 606 阅读 · 0 评论 -
JavaScript--DOM--中使用nodeValue 属性 修改 p 标签 内 文本节点 的 值
4.4.5 nodeValue 属性如果想改变一个文本节点的值,那就使用DOM提供的nodeValue 属 性,它用来得到(和设置)一个节点的值:node.nodeValue但这里有个大家必须注意的细节:在用nodeValue 属性获取 description 对象的值时,得到的并不是包含在这个段落里的文本。 可以用下面这条alert 语句来验证这一点:alert (description.nodeValue);这个调用将返回一个null 值。<p> 元素本身的nodeValue原创 2021-06-05 00:22:57 · 972 阅读 · 0 评论 -
JavaScript--DOM-- 防止点击 a 标签 被带到 href 目标链接窗口
在给某个元素添加了 事件处理函数后,一旦事件发生,相应的JavaScript代码就会得到执行。 被调用的JavaScript代码可以返回一个值,这个值将被传递给那个事件处 理函数。当这个链接被点击时,如果那段JavaScript代码返回的值 是true ,onclick 事件处理函数就认为“这个链接被点击了”;反之, 如果返回的值是false ,onclick 事件处理函数就认为“这个链接没有 被点击”。<a href="http://www.example.com" onclick="retur原创 2021-06-05 00:12:22 · 181 阅读 · 0 评论 -
JavaScript中 DOM 的概念解释
3.1 文档:DOM中的“D”如果没有document (文档),DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时,DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。在人类语言中,“对象”这个词的含义往往不那么明确,它几乎可以用来 称呼任何一种东西。但在程序设计语言中,“对象”这个词的含义非常明 确。3.2 对象:DOM中的“O”在上一章的末尾,我们向大家展示了几个JavaScript对象的例子。你应该 还记得,“对象”是一种自足的数据集合。与某个特定对象相关联的变原创 2021-06-04 18:07:22 · 1893 阅读 · 1 评论 -
JavaScript 里的 变量 与函数的命名建议
在命名变量时,我用下划线来分隔各个单词;在命名函数时,我从第二个单词开始把每个单词的第一 个字母写成大写形式(也就是所谓的驼峰命名法)。我这么做是为了能 够一眼看出哪些名字是变量,哪些名字是函数。function convertToCelsius(temp) { var result = temp - 32; result = result / 1.8; return result; }var temp_fahrenheit = 95; var temp_celsius = convertT原创 2021-06-04 17:04:46 · 140 阅读 · 0 评论 -
JavaScript 中 if 比较操作符
条件必须放在if 后面的圆括号中。条件的求值结果永远是一个布尔 值,即只能是true 或falseif (1 > 2) { alert("The world has gone mad!"); }相等操作符==并不表示严格相等,这一点很容易让人犯糊涂。例如,比 较false 与一个空字符串会得到什么结果?var a = false;var b = ""; if (a == b) { alert("a equals b"); }这个条件语句的求值结果是true ,为什么?因为相等操原创 2021-06-04 16:56:47 · 480 阅读 · 0 评论 -
JavaScript 对象 的一些创建
与数组类似,对象也是使用一个名字表示一组值。对象的每个值都是对 象的一个属性。例如,前一节的lennon 数组也可以创建成下面这个对象:var lennon = Object(); lennon.name = "John"; lennon.year = 1940; lennon.living = false;与使用Array类似,创建对象使用Object 关键字。它不使用方括号和下 标来获取元素,而是像任何JavaScript对象一样,使用点号来获取属性。创建对象还有一种更简洁的语法,即花括号原创 2021-06-04 15:58:36 · 63 阅读 · 0 评论 -
JavaScript 数组 的一些创建
在JavaScript中,数组可以用关键字Array 声明。声明数组的同时还可以 指定数组初始元素个数,也就是这个数组的长度 (length):var beatles = Array(4);有时,我们无法预知某个数组有多少个元素。没有关系,JavaScript根本 不要求在声明数组时必须给出元素个数,我们完全可以在声明数组时不 给出元素个数:var beatles = Array();var beatles = Array(4); beatles[0] = "John"; beatles[1原创 2021-06-04 15:52:40 · 174 阅读 · 0 评论 -
JavaScript 中 布尔值不是字符串,千万不要把布尔值用引号括起来。布尔 值false 与字符串值“false“ 是两码事!
布尔值不是字符串,千万不要把布尔值用引号括起来。布尔 值false 与字符串值"false" 是两码事!下面这条语句将把变量married 设置为布尔值true :var married = true;下面这条语句把变量married 设置为字符串”true ”:var married = "true";参考目录绝大多数内容来自于:JavaScript DOM编程艺术 (第2版) 作者:作者:[英] Jeremy Keith [加] Jeffrey Sambells 著 译者原创 2021-06-04 15:39:24 · 576 阅读 · 0 评论 -
JavaScript 注释中,对于 <!-- // --> 的态度
其实 JavaScript解释器对“<!-- ”的处理与对“// ”的处理是一样的:<!-- 这是JavaScript 中的注释如果是在HTML文档中,还需要以“–> ”来结束注释<!-- 这是 HTML 中的注释 -->但JavaScript不要求这样做,它会把“–> ”视为注释内容的一部分。请注意,HTML允许上面这样的注释跨越多个行,但JavaScript要求这种 注释的每行都必须在开头加上“<!-- ”来作为标志。因为JavaScript解释原创 2021-06-04 15:32:38 · 1338 阅读 · 0 评论