Javascript_DOM编程艺术翻译版-Linux大棚

admin 管理员组

文章数量: 1184232

2024年2月25日发(作者：instantclient版本)

第3章 DOM

本章内容

● 节点的概念

●四个非常实用的DOM方法：getElementById、getElementsByTagName、getAttribute和setAttribute

终于要与DOM面对面了。能够向大家介绍DOM是笔者的荣幸，我非常乐于带领大家通过DOM的眼睛去看世界。

3.1 文档：DOM中的“D”

DOM是“Document Object Model”（文档对象模型）的首字母缩写。如果没有document（文档），DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它将根据你编写的网页文档创建一个文档对象。

在人类语言中，“对象”这个词的含义往往不那么明确和具体，它几乎可以用来称呼任何一种客观存在的事物。但在程序设计语言中，“对象”这个词的含义非常明确和具体。

3.2 对象：DOM中的“O”

在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你们应该还记得，“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定对象去调用的函数被称为这个对象的方法。

JavaScript语言里的对象可以分为三种类型：

●用户定义对象（user-defined object）：由程序员自行创建的对象。本书不讨论这种对象。

●内建对象（native object）：内建在JavaScript语言里的对象，如Array、Math和Date等。

●宿主对象（host object）：由浏览器提供的对象。

在JavaScript语言的发展初期，程序员在编写JavaScript脚本时经常需要用到一些非常重要的宿主对象，它们当中最基础的是window对象。

window对象对应着浏览器窗口本身，这个对象的属性和方法通常被统称为BOM（浏览器对象模型）——但我觉得称之为Window Object Model（窗口对象模型）更为贴切。BOM向程序员提供了和等方法，你们在上网冲浪时看到的各种弹出窗口和下拉菜单——其数量之多已经到了泛滥成灾的地步——几乎都是由这些方法负责创建和处理的。难怪JavaScript会有一个不好的名声！

值得庆幸的是，在这本书里我们不需要与BOM打太多的交道。我们将把注意力集中在浏览器窗口的内部而不是浏览器窗口本身。我们将着重探讨如何对网页的内容进行处理，而用来实现这一目标的载体就是document对象。

在本书的后续内容里，我们将尽可能地只讨论document对象的属性和方法。

现在，我们已经对DOM中的字母“D”（document，文档）和字母“O”（object，对象）做了解释，那么字母“M”又代表着什么呢？

3.3 模型：DOM中的“M”

DOM中的“M”代表着“Model”（模型），但说它代表着“Map”（地图）也未尝不可。模型也好，地图也罢，它们的含义都是某种事物的表现形式。就像一个模型火车代表着一列真正的火车、一张城市街道图代表着一个实际存在的城市那样，DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过JavaScript去读取这张地图。

既然是地图，就必须有诸如方向、等高线和比例尺之类的记号。要想看懂和使用地图，就必须知道这些记号的含义和用途——这个道理同样适用于DOM。要想从DOM获得信息，我们必须先把各种用来表示和描述一份文档的记号弄明白。

DOM把一份文档表示为一棵树（这里所说的“树”是数学意义上的概念），这是我们理解和运用这一模型的关键。更具体地说，DOM把文档表示为一棵家谱树。

家谱树本身又是一种模型。家谱树的典型用法是表示一个人类家族的谱系并使用parent（父）、child（子）、sibling（兄弟）等记号来表明家族成员之间的关系。家谱树可以把一些相当复杂的关系简明地表示出来：一位特定的家族成员既是某些成员的父辈，又是另一位成员的子辈，同时还是另一位成员的兄弟。

类似于人类家族谱系的情况，家谱树模型也非常适合用来表示一份用(X)HTML语言编写出来的文档。

请看下面这份非常基本的网页，它的内容是一份购物清单。

这份文档可以用图3-1中的模型来表示。

我们来分析一下这个网页的结构。这种分析不仅可以让我们了解它是由哪些元素构成的，还可以让我们了解为什么图3-1中的模型可以如此完美地把它表示出来。在对Doctype做出声明后，这份文档首先打开了一个标签，而这个网页里的所有其他元素都包含在这个元素里。因为所有其他的元素都包含在其内部，所以这个标签既没有父辈，也没有兄弟。如果这是一棵真正的树的话，这个标签显然就是树根。

图3-1 把网页中的元素表示为一棵家谱树

这正是图3-1中的家谱树以html为根元素的原因。毫无疑问，html元素完全可以代表整个文档。

如果在这份文档里更深入一层，我们将发现和两个分枝。它们存在于同一层次且互不包含，所以它们是兄弟关系。它们有着共同的父元素，但又各有各的子元素，所以它们本身又是其他一些元素的父元素。

元素有两个子元素：和（这两个元素是兄弟关系）。<body>元素有三个子元素：<h1>、<p>和<ul>（这三个元素是兄弟关系）。如果继续深入下去，我们将发现<ul>也是一个父元素。它有三个子元素，它们都是<li>元素。 </p><p style="text-indent: 2em;";>利用这种简单的家谱关系记号，我们可以把各元素之间的关系简明清晰地表达出来。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>例如，<h1>和<ul>之间是什么关系？答案是它们是兄弟关系。 </p><p style="text-indent: 2em;";>那么<body>和<ul>之间又是什么关系？<body>是<ul>的父元素，<ul>是<body>的一个子元素。 </p><p style="text-indent: 2em;";>如果把各种文档元素想像成一棵家谱树上的各个节点的话，我们就可以用同样的记号来描述DOM。不过，与使用“家谱树”这个术语相比，把一份文档称为一棵“节点树”更准确。 </p><p style="text-indent: 2em;";>3.3.1 节点 </p><p style="text-indent: 2em;";>节点（node）这个名词来自网络理论，它代表着网络中的一个连接点。网络是由节点构成的集合。 </p><p style="text-indent: 2em;";>在现实世界里，一切事物都由原子构成。原子是现实世界的节点。但原子本身还可以进一步分解为更细小的亚原子微粒。这些亚原子微粒同样是节点。 </p><p style="text-indent: 2em;";>DOM也是同样的情况。文档也是由节点构成的集合，只不过此时的节点是文档树上的树枝和树叶而已。 </p><p style="text-indent: 2em;";>在DOM里存在着许多不同类型的节点。就像原子包含着亚原子微粒那样，有些DOM节点类型还包含着其他类型的节点。 </p><p style="text-indent: 2em;";>1. 元素节点 </p><p style="text-indent: 2em;";>DOM的原子是元素节点（element node）。 </p><p style="text-indent: 2em;";>在描述刚才那份“购物清单”文档时，我们使用了诸如<body>、<p>和<ul>之类的元素。如果把Web上的文档比作一座大厦，元素就是建造这座大厦的砖块，这些元素在文档中的布局形成了文档的结构。 </p><p style="text-indent: 2em;";>各种标签提供了元素的名字。文本段落元素的名字是“p”，无序清单元素的名字是“ul”，列表项元素的名字是“li”。 </p><p style="text-indent: 2em;";>元素可以包含其他的元素。在我们的“购物清单”文档里，所有的列表项元素都包含在一个无序清单元素的内部。事实上，没有被包含在其他元素里的唯一元素是<html>元素。它是我们的节点树的根元素。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>2．文本节点 </p><p style="text-indent: 2em;";>元素只是不同节点类型中的一种。如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。在网上，内容决定着一切，没有内容的文档是没有任何价值的，而绝大多数内容都是由文本提供的。 </p><p style="text-indent: 2em;";>在“购物清单”例子里，<p>元素包含着文本“Don’t forget to buy this stuff.”。它是一个文本节点（text node）。 </p><p style="text-indent: 2em;";>在XHTML文档里，文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。在“购物清单”文档里，<ul>元素没有直接包含任何文本节点——它包含着其他的元素节点（一些<li>元素），后者包含着文本节点。 </p><p style="text-indent: 2em;";>3．属性节点 </p><p style="text-indent: 2em;";>还存在着其他一些节点类型。例如，注释就是另外一种节点类型。但我们这里还想向大家再多介绍一种节点类型。 </p><p style="text-indent: 2em;";>元素都或多或少地有一些属性，属性的作用是对元素做出更具体的描述。例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>在DOM中，title="a gentle reminder"是一个属性节点（attribute node），如图3-2所示。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点当中。 </p><p style="text-indent: 2em;";>并非所有的元素都包含着属性，但所有的属性都会被包含在元素里。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>图3-2 一个元素节点，它包含着一个属性节点和一个文本节点 </p><p style="text-indent: 2em;";>在前面的“购物清单”示例文档里，我们可以清楚地看到那个无序清单元素（<ul>）有个id属性。如果曾经使用过CSS，你们对id和class之类的属性应该不会感到陌生。不过，为了照顾那些对CSS还不太熟悉的读者，我们下面将简要地重温几个最基本的CSS概念。 </p><p style="text-indent: 2em;";>4．CSS：层叠样式表 </p><p style="text-indent: 2em;";>DOM并不是人们与网页的结构打交道的唯一手段。我们还可以通过CSS（层叠样式表）告诉浏览器应该如何显示一份文档的内容。 </p><p style="text-indent: 2em;";>类似于JavaScript脚本，对样式的声明既可以嵌在文档的<head>部分（这需要用到<style>标签），也可以放在另外一个样式表文件里。利用CSS对某个元素的样式做出声明的语法与JavaScript函数的定义语法很相似： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>在样式声明里，我们可以对浏览器在显示各有关元素时使用的颜色、字体和字号做出定义，如下所示： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>继承（inheritance）是CSS技术中的一项强大功能。类似于DOM，CSS也把文档的内容视为一棵节点树。节点树上的各个元素将继承其父元素的样式属性。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>例如，如果我们为body元素定义了一些颜色或字体，包含在body元素里的所有元素都将自动获得——也就是继承，那些样式： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这些颜色将不仅作用于那些被直接包含在<body>标签里的内容，还将作用于那些嵌套在body元素内部的所有元素。 </p><p style="text-indent: 2em;";>这里是把刚才定义的样式应用在“购物清单”示例文档上而得到的网页显示效果。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>在某些场合，当把样式应用于一份文档时，我们其实只想让那些样式只作用于某个特定的元素。例如，我们只想让某一段文本变成某种特殊的颜色和字体，但不想让其他段落受到影响。为了获得如此精细的控制，我们将需要在文档里插入一些能够把这段文本与其他段落区别开来的特殊标志。 </p><p style="text-indent: 2em;";>为了把某一个或某几个元素与其他元素区别开来，我们需要使用class属性或id属性之一。 </p><p style="text-indent: 2em;";>l class属性 </p><p style="text-indent: 2em;";>所有的元素都有class属性，不同的元素可以有同样的class属性值。如下所示： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>在样式表里，我们可以像下面这样为class属性值相同的所有元素定义一种共享的样式： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我们还可以像下面这样利用class属性为一种特定类型的元素定义一种独享的样式： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>l id属性 </p><p style="text-indent: 2em;";>id属性的用途是给网页里的某个元素加上一个独一无二的标识符，如下所示： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>在样式表里，我们可以像下面这样为有着特定id属性值的元素定义一种独享的样式： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>每个元素只能有一个id属性值，不同的元素必须有不同的id属性值。不过，我们可以在样式表里像下面这样，利用id属性为包含在某给定元素里的其他元素定义样式，而如此定义出来的样式将只作用于包含在这个给定元素里的有关元素： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这里是把刚才利用id属性定义的样式应用在“购物清单”示例文档上而得到的网页显示效果。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>id属性就像是一个挂钩，它一头连着文档里的某个元素，另一头连着CSS样式表里的某个样式。DOM也可以使用这种挂钩，事实上，有不少DOM操作必须借助于这种挂钩才能完成。 </p><p style="text-indent: 2em;";>3.3.2 getElementById()方法 </p><p style="text-indent: 2em;";>DOM提供了一个名为getElementById()的方法，这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。请注意，JavaScript语言区分字母的大小写情况，所以大家在写出“getElementById”时千万不要把大小写弄错了。如果把它错写成“GetElementById”或“getElementbyid”，你将无法得到你真正想要的东西。 </p><p style="text-indent: 2em;";>这个方法是与document对象相关联的函数。在脚本代码里，函数名的后面必须跟有一组圆括号，这组圆括号包含着函数的参数。getElementById()方法只有一个参数：你想获得的那个元素的id属性值，这个id值必须放在单引号或双引号里。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>下面是一个例子： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的HTML id属性值是purchases。再说一遍，getElementById() </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>方法将返回一个对象。你们可以用typeof操作符来验证这一点。typeof操作符可以告诉我们它的操作数是不是一个字符串、数值、函数、布尔值或对象。 </p><p style="text-indent: 2em;";>下面是把一些JavaScript语句插入到前面给出的“购物清单”文档之后得到的一份代码清单，新增的代码（黑体字部分）出现在</body>结束标签之前。顺便说一句，我本人并不赞成把JavaScript代码直接嵌入一份文档的做法，但它不失为一种简便快捷的测试手段： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>把上面这些代码保存为一个XHTML文件。当在你们的Web浏览器里加载这个XHTML文件时，屏幕上将弹出一个如下所示的alter对话框，它向你们报告mentById ("purchases")的类型——它是一个对象。不仅如此，如果用上述办法去检查其他元素节点的类型，你们也会看到类似的alert对话框。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>事实上，文档中的每一个元素都对应着一个对象。利用DOM提供的方法，我们可以把与这些元素相对应的任何一个对象筛选出来。 </p><p style="text-indent: 2em;";>一般来说，我们用不着为文档里的每一个元素都分别定义一个独一无二的id值；那也太小题大做了。要知道，即使某个元素没有独一无二的id值，我们也可以利用DOM提供的另一个方法把与之对应的对象准确无误地筛选出来。 </p><p style="text-indent: 2em;";>3.3.3 getElementsByTagName()方法 </p><p style="text-indent: 2em;";>getElementsByTagName()方法将返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById()，这个方法也是只有一个参数的函数，它的参数是(X)HTML标签的名字： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>它与getElementById()方法有许多相似之处，但有一点要特别提醒大家注意：getElements- ByTagName()方法返回的是一个数组；你们在编写脚本时千万注意不要把这两个方法弄混了。 </p><p style="text-indent: 2em;";>下面是一个例子： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这个调用将返回一个对象数组，每个对象分别对应着document对象中的一个列表项（li）元素。与任何其他的数组一样，我们可以利用length属性查出这个数组里的元素个数。 </p><p style="text-indent: 2em;";>首先，在上一小节给出的XHTML示例文档里把<script>标签中的alter语句替换为下面这条语句： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>然后，用浏览器里重新加载那个XHTML文件，你们就会看到这份示例文档里的列表项元素的个数：3。这个数组里的每个元素都是一个对象。可以通过利用一个循环语句和typeof操作符去遍历这个数组的办法来验证这一点。例如，你们可以试试下面这个for循环： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>请注意，即使在整个文档里只有一个元素有着给定的标签名，getElementsByTagName()方法也将返回一个数组。此时，那个数组的长度是1。 </p><p style="text-indent: 2em;";>你们或许早就觉得用键盘反复敲入mentsByTagName("li")是件很麻烦的事情，而这些长长的字符串会让代码变得越来越难以阅读。有个简单的办法可以减少不必要的打字量并改善代码的可读性：只要把mentsByTagName("li")赋值给一个变量即可。 </p><p style="text-indent: 2em;";>请在上一小节给出的XHTML示例文档里把<script>标签中的alter语句替换为下面这些语句： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>现在，当用浏览器里重新加载那个XHTML文件时，你们将看到三个alert对话框，显示在这三个alert对话框里的消息都是“object”。 </p><p style="text-indent: 2em;";>getElementsByTagName()方法允许我们把一个通配符当为它的参数，而这意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符（星号字符“*”）必须放在引号里，这是为了让通配符与乘法操作符有所区别。如果你想知道某份文档里总共有多少个元素节点，像下面这样以通配符为参数去调用getElementsByTagName()方法是最简便的办法： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我们还可以把getElementById()和getElementsByTagName()方法结合起来运用。例如，我们刚才给出的几个例子都是通过document对象调用getElementsByTagName()方法的，如果只想知道其id属性值是purchase的元素包含着多少个列表项（li）的话，你就必须通过一个更具体的对象去调用这个方法，如下所示： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>在这两条语句执行完毕后，items数组将只包含其id属性值是purchase的无序清单里的元素。具体到我们这个例子，items数组的长度刚好与这份文档里的列表项元素的总数相等： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>如果还需要更多的证据，下面这些语句将证明items数组里的每个值确实是一个对象： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>3.4 趁热打铁 </p><p style="text-indent: 2em;";>在看过那么多显示着单词“object”的alert对话框后，你们很可能不愿意再看到它。如果真是如此，我的目的也就达到了——我想通过这些alert对话框强调这样一个事实：文档中的每个元素节点都是一个对象。我现在要告诉大家的是，这些对象中的每个都为我们准备了一系列非常有用的方法，而这一切当然都要归功于DOM。利用这些已经预先定义好的方法，我们不仅可以检索出关于文档里的任何一个对象的信息，甚至还可以改变某些元素的属性。 </p><p style="text-indent: 2em;";>下面是对本章此前学习内容的一个简要总结： </p><p style="text-indent: 2em;";> ●一份文档就是一棵节点树。 </p><p style="text-indent: 2em;";> ●节点分为不同的类型：元素节点、属性节点和文本节点等。 </p><p style="text-indent: 2em;";> ●getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点。 </p><p style="text-indent: 2em;";> ●getElementsByTagName()方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。 </p><p style="text-indent: 2em;";> ●这些节点中的每个都是一个对象。 </p><p style="text-indent: 2em;";>接下来，我们将向大家介绍几个与这些对象相关联的属性和方法。 </p><p style="text-indent: 2em;";>3.4.1 getAttribute()方法 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>至此，我们已经向大家介绍了两种检索特定元素节点的办法：一种是使用getElementById()方法，另一种是使用getElementsByTagName()方法。在找到那个元素后，我们就可以利用getAttribute()方法把它的各种属性的值查询出来。 </p><p style="text-indent: 2em;";>getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>不过，getAttribute()方法不能通过document对象调用，这与我们此前介绍过的其他方法不同。我们只能通过一个元素节点对象调用它。 </p><p style="text-indent: 2em;";>例如，你可以把它与getElementsByTagName()方法结合起来，去查询每个<p>元素的title属性，如下所示： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>如果把上面这段代码插入到前面给出的“购物清单”示例文档的末尾，并在Web浏览器里重新加载这个页面，屏幕上将弹出一个显示着文本消息“a gentle reminder”的alter对话框。 </p><p style="text-indent: 2em;";>在“购物清单”文档里只有一个带有title属性的<p>元素。假如这份文档还有一个或更多个不带title属性的<p>元素，则相应的getAttribute("title")调用将返回null。null是JavaScript语言中的空值，其含义是“你说的这个东西不存在”。如果你们想亲自验证一下这件事，请先把下面这段文本插入到“购物清单”文档中的现有文本段落之后： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>然后重新加载这个页面。这一次，你们将看到两个alter对话框，而第二个对话框将是一片空白或者是只显示着单词“null”——具体情况要取决于你的Web浏览器将如何显示null值。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>可以修改我们的脚本，让它只在title属性存在时才弹出一条消息。我们将增加一条if语句来检查getAttribute()方法的返回值是不是null。趁着这个机会，我们还增加了几个变量以提高脚本的可读性： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>现在，如果重新加载这个页面，你们将只会看到一个显示着“a gentle reminder”消息的alter对话框，如下所示。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我们甚至可以把这段代码缩得更短一些。当检查某项数据是否是null值时，我们其实是在检查它是否存在。这种检查可以简化为直接把被检查的数据用做if语句的条件。if (something)与if (something != null)完全等价，但前者显然更为简明。此时，如果something存在，则if语句的条件将为真；如果something不存在，则if语句的条件将为假。 </p><p style="text-indent: 2em;";>具体到这个例子，只要我们把if (title_text != null)替换为if (title_text)，我们就可以得到更简明的代码。此外，为了进一步增加代码的可读性，我们还可以趁此机会把alter语句与if语句写在同一行上，这可以让它们更接近于我们日常生活中的英语句子： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>3.4.2 setAttribute()方法 </p><p style="text-indent: 2em;";>我们此前介绍给大家的所有方法都只能用来检索信息。setAttribute()方法与它们有一个本质上的区别：它允许我们对属性节点的值做出修改。 </p><p style="text-indent: 2em;";>类似于getAttribute()方法，setAttribute()方法也是一个只能通过元素节点对象调用的函数，但setAttribute()方法需要我们向它传递两个参数： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>在下面的例子里，第一条语句将把id属性值是purchase的元素检索出来，第二条语句将把这个元素的title属性值设置为a list of goods： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我们可以利用getAttribute()方法来证明这个元素的title属性值确实发生了变化： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>上面这些语句将在屏幕上弹出两个alert对话框：第一个alter对话框出现在setAttribute()方法被调用之前，它将是一片空白或显示着单词“null”；第二个出现在title属性值被设置之后，它将显示着“a list of goods”消息。 </p><p style="text-indent: 2em;";>在上例中，我们设置了一个现有节点的title属性，但这个属性原先并不存在。这意味着我们发出的setAttribute()调用实际完成了两项操作：先把这个属性创建出来，然后再对其值进行设置。如果我们把setAttribute()方法用在元素节点的某个现有属性上，这个属性的当前值将被覆盖。 </p><p style="text-indent: 2em;";>在“购物清单”示例文档里，<p>元素已经有了一个title属性，这个属性的值是a gentle reminder。我们可以用setAttribute()方法来改变它的当前值： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>上面这段代码将先从文档里把已经带有title属性的<p>元素全部检索出来，然后把它们的title属性值全部修改为brand new title text。具体到“购物清单”文档，属性值a gentle reminder将被覆盖。 </p><p style="text-indent: 2em;";>这里有一个非常值得关注的细节：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。 </p><p style="text-indent: 2em;";>3.5 小结 </p><p style="text-indent: 2em;";>在这一章里，我们向大家介绍了DOM提供的四个方法： </p><p style="text-indent: 2em;";> ●getElementById()方法 </p><p style="text-indent: 2em;";> ●getElementsByTagName()方法 </p><p style="text-indent: 2em;";> ●getAttribute()方法 </p><p style="text-indent: 2em;";> ●setAttribute()方法 </p><p style="text-indent: 2em;";>这四个方法是将要编写的许多DOM脚本的基石。 </p><p style="text-indent: 2em;";>DOM还提供了许多其他的属性和方法，如nodeName、nodeValue、chileNodes、nextSibling和parentNode等，但现在还不是它们出场的时候——我打算在本书后面的有关章节中选择一些适当的时机把它们依次介绍给大家。我在这里列出它们的目的只是为了激起大家的学习兴趣。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>本章内容比较偏重于理论。在看过那么多的alter对话框之后，相信大家都迫不及待地想通过其他一些东西去进一步了解和测试DOM，而我也正想通过一个案例来进一步展示DOM的强大威力。 </p><p style="text-indent: 2em;";>在下一章中，我将带领大家利用本章介绍的四个DOM方法去创建一个基于JavaScript的图片库。 </p><p style="text-indent: 2em;";>第4章案例研究：JavaScript美术馆 </p><p style="text-indent: 2em;";>现在，是时候利用DOM去完成一些简单的任务了。在这一章中，我将带领大家用JavaScript和DOM去建立一个图片库，并将其称为“JavaScript美术馆”。我们将按照以下步骤来完成这一案例： </p><p style="text-indent: 2em;";> ●编写一份优秀的标记语言文档。 </p><p style="text-indent: 2em;";> ●编写一个JavaScript函数以显示用户想要查看的图片。 </p><p style="text-indent: 2em;";> ●在标记语言文档里触发一个调用JavaScript图片显示的函数。 </p><p style="text-indent: 2em;";> ●对这个JavaScript函数的功能进行扩展。这需要用到几个新的DOM方法。 </p><p style="text-indent: 2em;";>把一些图片发布到网上的办法很多。最容易想到的办法是把所有的图片都放到同一个网页里。不过，如果你打算发布的图片比较多的话，这个页面很快就会因为变得过于巨大而失去吸引力。要知道，虽然这种网页本身的HTML代码不会多到哪儿去，但算上那些图片可就不一样了。我们必须面对的现实是：数据量越大，网页的下载时间就越长，但愿意等待很长时间去下载一个网页的人却没有几个。 </p><p style="text-indent: 2em;";>因此，为每张图片分别创建一个网页的解决方案显然更值得考虑。你的图片库将不再是一个体积庞大、难以下载的网页，而是许多尺寸合理、便于下载和浏览的页面。不过，这一解决方案并非尽善尽美：首先，为每张图片分别制作一个网页需要花费不少的时间和精力；其次，需要在每个网页上提供一些链接，来给出当前图片在整个图片库里的位置以方便人们从当前图片转到其他的图片。 </p><p style="text-indent: 2em;";>如果你想两全其美，利用JavaScript来创建图片库将是最佳的选择：把整个图片库的浏览链接集中安排在你的图片库主页里，只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给他。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>4.1 编写标记语言文档 </p><p style="text-indent: 2em;";>为了完成“JavaScript美术馆”案例，我特意用数码相机拍摄了几张照片，并把它们修整成最适合于用浏览器来查看的尺寸，即400像素宽×300像素高。 </p><p style="text-indent: 2em;";>第一项工作是为这些图片创建一个链接清单。因为我没打算让这些图片按照某种特殊的顺序排列，所以将使用一个无序清单元素（<ul>）来列出那些链接。如果想让自己的图片按顺序排列的话，应该使用一个排序清单元素（<ol>）去组织图片链接。 </p><p style="text-indent: 2em;";>下面就是我编写出来的HTML文档： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我将把这份文档保存为文件，并把图片集中保存在子目录images里。我的images子目录和文件位于同一个子目录下。在文件里，无序清单元素中的每个链接分别指向不同的图片。在浏览器窗口里点击某个链接就可以转到相应的图片，但从图片重新返回到链接清单目前还必须借助于浏览器的Back（后退）按钮。下面是这个基本的链接清单在浏览器窗口里的显示效果。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这是一个相当令人满意的网页，但它的默认行为还不太理想。下面是我觉得还需要改进的几个地方： </p><p style="text-indent: 2em;";> ●当点击某个链接时，我希望能留在这个网页而不是转到另一个窗口。 </p><p style="text-indent: 2em;";> ●当点击某个链接时，我希望能在这个网页上同时看到那张图片以及原有的图片清单。 </p><p style="text-indent: 2em;";>下面是我为了实现上述希望而需要完成的几项改进： </p><p style="text-indent: 2em;";> ●通过增加一个“占位符”图片的办法在这个主页上为图片预留一个浏览区域。 </p><p style="text-indent: 2em;";> ●在点击某个链接时，将拦截这个网页的默认行为。 </p><p style="text-indent: 2em;";> ●在点击某个链接时，将把“占位符”图片替换为与那个链接相对应的图片。 </p><p style="text-indent: 2em;";>我们先来解决“占位符”图片的问题。我选用了一个类似于名片的图片，你们可以根据个人喜好来决定选用的图片，即使选用一个空白图片也没问题。 </p><p style="text-indent: 2em;";>把下面这些代码插入到图片名单的末尾： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我对这个图片的id属性进行了设置，这将使我可以通过一个外部的样式表对图片的显示位置和显示效果加以控制。例如，我可以让这个图片出现在链接清单的旁边而不是它的下方。我还可以在自己的JavaScript代码里使用这个id值。下面是这个页面在增加了“占位符”图片后的显示效果。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>现在，我的HTML文档已经准备好了。接下来的工作是编写一些必要的JavaScript代码。 </p><p style="text-indent: 2em;";>4.2 编写JavaScript函数 </p><p style="text-indent: 2em;";>为了把“占位符”图片替换为想要查看的图片，需要改变它的src属性。setAttribute()方法是完成这项工作的最佳选择，而我将利用这个方法写一个函数。那个函数只有一个参数，即我想查看的那张图片的链接；它将通过改变“占位符”图片的src属性的办法将其替换为我想查看的那张图片。 </p><p style="text-indent: 2em;";>首先，需要给函数起一个好的名字。我想让它既能提醒我这个函数的用途，又足够简明扼要。我决定把这个函数命名为showPic()。还需要给这个函数的参数起一个名字，我决定把它命名为whichpic： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>whichpic代表着一个元素节点；具体地说，那将是一个指向某个图片的<a>元素。我需要知道那个图片的文件路径，这个路径可以通过在whichpic元素上调用getAttribute()方法的办法查出来——只要把"href"作为参数传递给getAttribute()方法，就可以知道那个图片的文件路径了： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我将把这个路径存入一个变量以便在后面的语句里使用它。我决定把这个变量命名为source： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>接下来，还需要把“占位符”图片检索出来，这种事对getElementById()方法来说不过是小菜一碟： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我不想重复敲入“document. getElementById("placerholder")”这么长的字符串，所以将把这个元素赋值给一个变量并将其命名为placerholder： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>现在，已经声明并赋值了两个变量：source和placerholder。它们可以让我的脚本简明易读。 </p><p style="text-indent: 2em;";>我将使用setAttribute()方法对placerholder元素的src属性进行刷新。还记得吗，这个方法有两个参数：一个是打算对之进行设置的属性，另一个是这个属性的新属性值。具体到这个例子，因为我想对src属性进行设置，所以第一个参数是"src"；至于第二个参数，也就是src属性的新属性值，我已经把它保存在source变量里了： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这显然要比下面这么冗长的代码更容易阅读和理解： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>4.2.1 DOM之前的解决方案 </p><p style="text-indent: 2em;";>其实，不使用setAttribute()方法也可以改变某个图片的src属性。 </p><p style="text-indent: 2em;";>setAttribute()方法是“第1级DOM”（DOM Level 1）的组成部分之一，这个方法可以对任意元素节点的任意属性进行设置。在“第1级DOM”出现之前， </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>程序员只能通过另外一种办法对一部分元素的属性进行设置，这个办法至少在目前还可以用来改变某些属性的值。 </p><p style="text-indent: 2em;";>例如，如果想改变某个输入元素的value属性，可以使用如下所示的办法： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这与下面这条语句的效果是等价的： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>类似的办法也可以用来改变图片的src属性。例如，在我的图片库脚本里，完全可以用下面这条语句来代替setAttribute()调用： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我个人更喜欢使用setAttribute()方法。这起码可以让我不必费心去记忆哪些元素的哪些属性可以用哪些DOM之前的方法去设置。虽然用那些老办法可以毫无问题地对文档里的图片、表单和其他一些元素的属性进行设置，但setAttribute()方法的优势在于它可以对文档中的任何一个元素的任何一个属性做出修改。 </p><p style="text-indent: 2em;";>“第1级DOM”的另一个优势是可移植性更好。那些老方法只适用于Web文档，DOM则适用于任何一种标记语言。虽然这种差异对我们这个例子没有影响，但我希望大家能够牢牢记住这一点：DOM是一种适用于多种环境和多种程序设计语言的通用型API。如果想把从本书学到的DOM技巧运用在Web浏览器以外的应用环境里，严格遵守“第1级DOM”能够让你们避免与兼容性有关的任何问题。 </p><p style="text-indent: 2em;";>4.2.2 showPic()函数的代码清单 </p><p style="text-indent: 2em;";>下面是showPic()函数完整的代码清单： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>接下来的任务是把这个JavaScript函数与我们的HTML文档结合起来。 </p><p style="text-indent: 2em;";>4.3 JavaScript函数的调用 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我需要把刚编写出来showPic()函数与图片库HTML文档结合起来。最简单的办法是把这个函数用一组<script>标签插入到那个文档的<head>部分，但我认为这种做法有点儿目光短浅：如果今后想把这同一函数用在多个页面上的话，我将不得不反复多次地进行剪贴操作。为今后考虑，更有远见的办法是先把这个函数存入一个外部文件，然后在每一份需要用到这个函数的HTML文档的<head>部分插入一个链接来引用这个外部文件。 </p><p style="text-indent: 2em;";>以.js作为文件扩展名，把这个函数存入一个文本文件。完全可以把这种文件命名为你们喜欢的任何东西，但我习惯于用这些文件所包含的函数的名字来命名它们——我给这个文件起的名字是。 </p><p style="text-indent: 2em;";>就像我刚才决定把所有的图片集中存放在images子目录里那样，把所有的JavaScript脚本文件集中存放在一个子目录里也将是个好主意。我创建了一个名为scripts的子目录并把文件保存到其中。 </p><p style="text-indent: 2em;";>现在，需要在图片库HTML文档里插入一个链接来引用这个JavaScript脚本文件。我将把下面这条语句插入那份HTML文档的<head>部分（选择的插入位置是<head>标签之后）： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>有了这条语句，把showPic()函数与图片库HTML文档结合起来的任务就已经完成了一半——我还需要为HTML文档里的每个图片链接增加一个函数调用动作，否则showPic()函数将永远也不会被调用。我将通过增加一个事件处理函数（event handler）的办法来完成这项工作。 </p><p style="text-indent: 2em;";>事件处理函数 </p><p style="text-indent: 2em;";>事件处理函数的作用是，在预定事件发生时让预先安排好的JavaScript代码开始执行，用术语来说就是 “触发一个动作”。例如，如果想在鼠标指针悬停在某个元素上时触发一个动作，就需要使用onmouseover事件处理函数；如果想在鼠标指针离开某个元素时触发一个动作，就需要使用onmouseout事件处理 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>函数。在“JavaScript美术馆”案例里，我想在用户点击某个链接时触发一个动作，所以需要使用onclick事件处理函数。 </p><p style="text-indent: 2em;";>我想通过onclick事件处理函数去触发的动作是调用showPic()函数，而要想调用这个函数，就必须向它传递一个参数：一个带有href属性的元素节点。在图片库HTML文档里，当我把onclick事件处理函数嵌入一些链接时，我需要把那些链接本身用作showPic()函数的参数。 </p><p style="text-indent: 2em;";>有个非常简单但又非常有效的办法可以做到这一点：使用JavaScript语言中的this关键字。这个关键字的含义是“这个对象”。具体到正在讨论的这个例子，我将使用this来表示“这个<a>元素节点”： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>综上所述，我将使用onclick事件处理函数去调用showPic(this)方法。使用事件处理函数调用JavaScript代码的语法如下所示： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>请注意，在如上所示的语法里，JavaScript代码是包含在一对引号之间的：我们可以把任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可。 </p><p style="text-indent: 2em;";>下面这条语句将完成“使用onclick事件处理函数调用showPic(this)方法”的任务： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>不过，如果只把上面这个事件处理函数插入到HTML文档中的链接里去的话，将遇到这样一个问题：在onclick事件发生时，不仅showPic(this)函数将被调用，链接被点击时的默认行为也将发生。这意味着用户还是会被带到另外一个图片查看窗口里去，而这是我不希望发生的事情。我需要阻止这种默认行为的发生。 </p><p style="text-indent: 2em;";>要想达到这一目的，我们必须对事件处理函数的工作机制有进一步的了解：在给某个元素添加了事件处理函数后，一旦发生预定事件，相应的JavaScript </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>代码就会得到执行；那些JavaScript代码可以返回一个结果，而这个结果将被传递回那个事件处理函数。例如，我们可以给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回布尔值true或false。这样一来，当这个链接被点击时，如果那段JavaScript代码返回给onclick事件处理函数的值是true，onclick事件处理函数将认为“这个链接被点击了”；反之，如果那段JavaScript代码返回给onclick事件处理函数的值是false，onclick事件处理函数将认为“这个链接没有被点击”。 </p><p style="text-indent: 2em;";>可以通过下面这个简单测试去验证这一结论： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>当点击这个链接时，因为onclick事件处理函数所触发的JavaScript代码返回给它的值是false，所以这个链接在被点击时的默认行为将不会发生。 </p><p style="text-indent: 2em;";>同样道理，如果像下面这样在onclick事件处理函数所触发的JavaScript代码里增加一条return false语句的话，我就可以不让用户被他们所点击的链接带到另外一个图片查看窗口里去： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>下面是最终完成的onclick事件处理函数在图片库HTML文档里的样子： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>接下来，只要在图片库HTML文档里把这个onclick事件处理函数添加到每个链接上即可。这当然有些麻烦，但眼下只能这么做——我将在后面的内容里向大家介绍一个可以避免这种麻烦的办法。下面是图片库HTML文档在我以手动方式把这个onclick事件处理函数添加到各个有关链接上之后的样子： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>现在，如果把这个页面加载到Web浏览器里，你们将看到一个能够正常工作的“JavaScript美术馆”：在如下所示的页面里，不管在图片列表里的哪个链接上点击鼠标，都将在这同一个页面里看到相应的图片。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>4.4 对JavaScript函数进行功能扩展 </p><p style="text-indent: 2em;";>在同一个网页上切换显示不同的图片并不是什么新鲜事。有着这类效果的网页和脚本早在W3C推出它们的标准化DOM和JavaScript语言之前就已经出现了，如今更是得到了广泛的流行。 </p><p style="text-indent: 2em;";>在这种情形下，如果你们想让自己与众不同，就必须另辟蹊径——你们有没有想过在同一个网页上切换显示不同的文本？我可不是在开玩笑，利用JavaScript语言和DOM，确实可以做到这一点。 </p><p style="text-indent: 2em;";>图片库HTML文档里的每个图片链接都有一个title属性。我想把这个属性的值提取出来并让它们伴随相应的图片一同显示在网页上。title属性的值可以 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>用getAttribute()方法轻而易举地提取出来，如果把下面这条语句添加到showPic()函数的开头的话，就可以把title属性的值保存到一个变量里： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>解决了提取title属性值的问题，还需要把它插入到HTML文档中的适当位置。为了完成这一工作，我需要用到几个新的DOM属性。 </p><p style="text-indent: 2em;";>4.4.1 childNodes属性 </p><p style="text-indent: 2em;";>childNodes属性让我们可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。 </p><p style="text-indent: 2em;";>childNodes属性将返回一个数组，这个数组包含给定元素节点的全体子元素： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>假设我们需要把某个文档的body元素的全体子元素检索出来。首先，我们将使用getElementsByTagName()方法来得到body元素。因为每份文档只有一个body元素，所以它将是getElementsByTagName("body")方法所返回的数组中的第一个（也是唯一一个）元素： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>现在，变量body_element已经指向了那个文档的body元素。接下来，可以用如下所示的语法记号把body元素的全体子元素检索出来： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>写出这个记号显然要比敲入下面这个长长的字符串要简明得多： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>顺便说一句，body元素还有一个更简单的专用记号： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>现在，已经知道如何把body元素的全体子元素检索出来了，我们来看看这些信息的用途。 </p><p style="text-indent: 2em;";>首先，我们可以精确地查出body元素有多少个子元素。因为childNodes属性返回的是一个数组，所以可以用数组数据类型的length属性查出它所包含的元素的个数： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>请把下面这个小函数添加到文件里： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这个简单的小函数将弹出一个alert对话框，其显示内容是body元素的子元素的总数。 </p><p style="text-indent: 2em;";>我想让这个函数在页面加载时执行，而这需要使用onload事件处理函数。把下面这条语句添加到代码段的末尾： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这条语句将在页面加载时调用countBodyChildren函数。 </p><p style="text-indent: 2em;";>在Web浏览器里刷新文件。你们将看到一个alert对话框，其显示内容是body元素的子元素的总数。那个数字很可能会让你们大吃一惊。 </p><p style="text-indent: 2em;";>4.4.2 nodeType属性 </p><p style="text-indent: 2em;";>根据文件的结构，body元素应该只有3个子元素：一个h1元素、一个ul元素和一个imag元素。可是，countBodyChildren()函数给出来的数字却远大于此。之所以会这样，是因为文档树的节点类型并非只有元素节点一种。 </p><p style="text-indent: 2em;";>由childNodes属性返回的数组包含着所有类型的节点，除了所有的元素节点，所有的属性节点和文本节点也包含在其中。事实上，文档里几乎每一样东西 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>都是一个节点——甚至连空格和换行符都会被解释为节点，而它们也全都包含在childNodes属性所返回的数组当中。 </p><p style="text-indent: 2em;";>因此，countBodyChildren()函数的返回结果才会是一个相当大的数字。 </p><p style="text-indent: 2em;";>还好，我们可以利用nodeType属性来区分文档里的各个节点。这个属性可以让我们知道自己正在与哪一种节点打交道。不过，这个属性返回的是一个数字而不是像“element”或“attribute”那样的英文字符串。 </p><p style="text-indent: 2em;";>下面是nodeType属性的调用语法： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>为了验证这一点，请把countBodyChildren()函数中的alter语句替换为下面这条语句，这样一来，我们就可以知道body_element元素的nodeType属性了： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>在Web浏览器里刷新文件，将看到一个显示数字“1”的alert对话框。换句话说，元素节点的nodeType属性值是1。 </p><p style="text-indent: 2em;";>nodeType属性总共有12种可取值，但其中仅有3种具有实用价值：元素节点、属性节点和文本节点的nodeType属性值分别是1、2和3。 </p><p style="text-indent: 2em;";> ●元素节点的nodeType属性值是1。 </p><p style="text-indent: 2em;";> ●属性节点的nodeType属性值是2。 </p><p style="text-indent: 2em;";> ●文本节点的nodeType属性值是3。 </p><p style="text-indent: 2em;";>这个意味着，可以让我们的函数只对某种特定类型的节点进行处理。例如，完全可以编写出一个只对元素节点进行处理的函数。 </p><p style="text-indent: 2em;";>4.4.3 在HTML文档里增加一段描述性文本 </p><p style="text-indent: 2em;";>为了让我的“JavaScript美术馆”变得与众不同，我决定给它增加一个文本节点。我想在显示图片时把这个文本节点的值替换为一个来自某个属性节点（某个图片链接的title属性）的值。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>首先，需要为打算显示的文本安排显示位置。我将在文件里增加一个新的文本段。我决定把它安排在<img>标签之前。我将为它设置一个独一无二的id值，这样就能在JavaScript函数里方便地引用它了： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>上面这条语句将把<p>元素的id属性设置为description（描述），这个单词可以让这个元素的用途一目了然。如下所示，包含在此元素里的文本现在是“Choose an image.”，但我打算在切换显示图片时把这段文本同时替换为相应的描述性文字。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我想达到的预期效果是：在“JavaScript美术馆”里的某个图片链接被点击时，不仅要把“占位符”图片替换为那个链接的href属性所指向的图片，还要把这段文本同时替换为那个链接的title属性值。为了实现这一想法，需要对showPic()函数做一些改进。 </p><p style="text-indent: 2em;";>4.4.4 用JavaScript代码改变<p>元素的文本内容 </p><p style="text-indent: 2em;";>为了把“JavaScript美术馆”里的图片说明在某个图片链接被点击时，动态地替换为那个链接的title属性值，我需要对showPic()函数做一些修改。 </p><p style="text-indent: 2em;";>下面是showPic()函数现在的样子： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>首先，我需要在showPic()函数里增加一些语句来提取whichpic对象的title属性值。我将把提取到的title属性值存入text变量。这些事可以轻而易举地利用getAttribute()方法完成： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>接下来，为了让自己能在代码里方便地引用那段id属性值等于description的文本，我决定创建一个新的变量来存放它： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>下面是showPic()函数在我给它增加了上述两个变量之后的样子： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>我们的下一个任务是实现文本的切换显示效果。 </p><p style="text-indent: 2em;";>4.4.5 nodeValue属性 </p><p style="text-indent: 2em;";>如果想改变某个文本节点的值，那就使用DOM提供的nodeValue属性，它的用途正是检索（和设置）节点的值： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>但这里有个大家必须注意的细节：在用nodeValue属性检索description对象的值时，你得到的并不是包含在这个段落里的文本。可以用下面这条alert语句来验证这一点： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这个调用将返回一个null值。<p>元素的nodeValue属性值是一个空值，而我们这里需要的是<p>元素所包含的文本的值。 </p><p style="text-indent: 2em;";>包含在<p>元素里的文本是另一种节点，它在DOM里是<p>元素的第一个子节点。换句话说，如果想获得<p>元素的文本内容，就必须检索它的第一个子节点的nodeValue属性值。 </p><p style="text-indent: 2em;";>下面这条alert语句可以找到我们想要的内容： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这个调用的返回值才是我们正在寻找的“Choose an image.”。这个值来自childNodes[]数组的第一个（下标是0）元素。 </p><p style="text-indent: 2em;";>4.4.6 firstChild和lastChild属性 </p><p style="text-indent: 2em;";>数组元素childNodes[0]有个更直观易读的同义词。无论何时何地，只要需要访问childNodes[]数组的第一个元素，我们都可以把它写成firstChild，这个记号本身是一个属性： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这种用法与下面这个语法记号完全等价： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>单词“firstChild”不仅更加简短，还更加具有可读性。 </p><p style="text-indent: 2em;";>DOM还提供了一个与之对应的lastChild属性： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>这个语法记号代表着childNodes[]数组的最后一个元素。如果不想通过lastChild属性去访问这个节点，我们将不得不使用如下所示的语法记号： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>与简明易懂的lastChild相比，这么复杂的语法记号恐怕没人会喜欢。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>4.4.7 利用nodeValue属性刷新<p>元素的文本内容 </p><p style="text-indent: 2em;";>现在，我们将回到showPic()函数。我将对id属性值等于description的<p>元素所包含的文本节点的nodeValue属性进行刷新。 </p><p style="text-indent: 2em;";>具体到这个id属性值等于description的<p>元素，因为它只有一个子节点，所以选用firstChild属性或是选用lastChild属性的效果是完全一样的。既然如此，我决定选用firstChild属性。 </p><p style="text-indent: 2em;";>我可以把4.4.5节里的alter语句改写为如下所示的样子： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>两条语句的效果完全一样（都将显示“Choose an image.”消息），但这里的代码显然更容易阅读和理解。 </p><p style="text-indent: 2em;";>nodeValue属性的用途并非仅限于此。我们不仅可以用它来检索某个节点的值，还可以用它来设置某个节点的值；后一种用法正是我目前最需要的。 </p><p style="text-indent: 2em;";>还记得刚才在showPic()函数里的text变量吗？当“JavaScript美术馆”页面上的某个图片链接被点击时，showPic()函数会把这个链接的title属性值传递给text变量。而我现在将用text变量去刷新id值等于description的那个<p>元素的第一个子节点的nodeValue属性值，如下所示： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>下面是我为了改进showPic()函数而给它添加的三条新语句： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>如果用日常生活中的语言来说，这三条语句的含义依次是： </p><p style="text-indent: 2em;";> ●当“JavaScript美术馆”页面上的某个图片链接被点击时，这个链接的title属性值将被提取并保存到text变量中。 </p><p style="text-indent: 2em;";> ●找到那个id="description"的<p>元素，并把这个对象保存到变量description里去。 </p><p style="text-indent: 2em;";> ●把description对象的第一个子节点的nodeValue属性值设置为变量text的值。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>下面是完成上述改进后的showPic()函数的代码清单： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>如果想测试一下这些扩展功能，请把改进后的showPic()函数存入文件，然后在浏览器里刷新文档。现在，点击这个网页上的某个图片链接时，你们将看到两种效果：“占位符”图片将被替换为这个链接所指向的一张新图片，同时图片下方的描述性文字也将被替换为这个链接的title属性值，如下所示。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>你们可以在/网站上找到“JavaScript美术馆”脚本文件和HTML文档。我在示例中用到的图片也可以在那里找到，但我建议大家找一些自己的图片来测试这个脚本，那样会更有意思。 </p><p style="text-indent: 2em;";>如果想让这个“JavaScript美术馆”变得更美观，可以再给它增加一个像下面这样的样式表： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>请把这些CSS代码存入文件，并把这个文件存放到styles子目录里。然后，就可以在文档的<head>部分用一个<link>标签来引用这个文件了，如下所示： </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>下面是“JavaScript美术馆”在经过上面那个简单的样式表修饰之后的显示效果。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>4.5 小结 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>本章向大家介绍了一个简单的JavaScript应用案例。在实现这个案例的过程中，我们还向大家介绍了DOM提供的几个新属性，它们是： </p><p style="text-indent: 2em;";> ● childNodes </p><p style="text-indent: 2em;";> ●nodeType </p><p style="text-indent: 2em;";> ●nodeValue </p><p style="text-indent: 2em;";> ●firstChild </p><p style="text-indent: 2em;";> ●lastChild </p><p style="text-indent: 2em;";>本章的学习重点有两个：一是如何利用DOM所提供的方法去编写图片库脚本；二是如何利用事件处理函数把JavaScript代码与网页集成在一起。 </p><p style="text-indent: 2em;";>从表面上看，我们的“JavaScript美术馆”已经大获成功，但它实际上还有许多地方值得改进，而那将是随后两章里的讨论重点。 </p><p style="text-indent: 2em;";>在下一章中，我将向大家介绍一些JavaScript脚本编程方面的原则和良好习惯，我希望它们能让你们领悟这样一个道理：通往终点的过程与终点本身同样重要。 </p><p style="text-indent: 2em;";>在那之后，我将向你们演示如何把那些编程原则和良好习惯应用到“JavaScript美术馆”案例上。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p></div><br><p><h2></h2></p>  <p class="tag"> 本文标签： <a style="margin-right: 10px" href="/tag/428094.html" target="_blank">元素</a> <a style="margin-right: 10px" href="/tag/232.html" target="_blank">属性</a> <a style="margin-right: 10px" href="/tag/230.html" target="_blank">文档</a> <a style="margin-right: 10px" href="/tag/111350.html" target="_blank">节点</a> <a style="margin-right: 10px" href="/tag/279.html" target="_blank">图片</a> </p> <div class="roclinux-cn copyright"> <blockquote> <p> 版权声明：本文标题：Javascript_DOM编程艺术翻译版内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：<a href="http://www.roclinux.cn/b/1708854819a532762.html">http://www.roclinux.cn/b/1708854819a532762.html</a>，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。 </p> </blockquote> </div> </div> <div class="roclinux-cn block-wrap single-relative"> <h2 class="block-title"> 更多相关文章 </h2> <div class="roclinux-cn post-list"> <div class="roclinux-cn post-item">         <a href="/p/1772198928a3553230.html" class="post-item-title" title="实战攻略：Adobe Flash Player在移动端的应用秘籍"> <h3>实战攻略：Adobe Flash Player在移动端的应用秘籍</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">自动生成GFM目录参考文献引言 GFM即 github flavoured markdown，是不支持自动生成目录的。经过努力，实现了自动生成目录的方法。在本仓库</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772200069a3553245.html" class="post-item-title" title="Adobe Flash Player 的不为人知的秘密：解锁其真正潜力的方法。"> <h3>Adobe Flash Player 的不为人知的秘密：解锁其真正潜力的方法。</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">自动生成GFM目录参考文献引言 GFM即 github flavoured markdown，是不支持自动生成目录的。经过努力，实现了自动生成目录的方法。在本仓库</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772217367a3553447.html" class="post-item-title" title="Windows XP新手必学：轻松定制你的任务栏外观"> <h3>Windows XP新手必学：轻松定制你的任务栏外观</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">1、在XP系统的任务栏属性里，开启显示“快速启动栏”鼠标右击电脑桌面底部的“任务栏”–》属性—》勾选√“显示快速启动” 2、点击桌面左下角的“开始”–》运行–》输入: regsvr32 n i:u shell3</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772415051a3555673.html" class="post-item-title" title="轻松玩转DAT和._rld格式！专业软件推荐及使用方法"> <h3>轻松玩转DAT和._rld格式！专业软件推荐及使用方法</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">通常我们获得的测风数据是.RWD格式或是.RLD格式，分别用NRG和SymphoniePRO软件打开即可，如遇到.dat格式的测风数据，先将文件夹内所有单个.dat数据合并，然后直接用Windographer打开即可。合并方</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772446964a3556035.html" class="post-item-title" title="Echarts+折线仪：你的CPUE监控新宠，一文教你如何玩转"> <h3>Echarts+折线仪：你的CPUE监控新宠，一文教你如何玩转</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">【本文为转载文章】 CPU page <script type="textjavascript" >var myChart;var eCharts;var cpu_r = 100;</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772461848a3556201.html" class="post-item-title" title="电脑屏幕自动翻转？用这些步骤马上解决 Adobe Flash 相关问题！"> <h3>电脑屏幕自动翻转？用这些步骤马上解决 Adobe Flash 相关问题！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">如下提供两种解决方案： 1.桌面--属性--设置--高级--选择你显卡的那一项,然后图形属性--旋转--180度就可以了； 2.一般pc支持倒转画面,你同时按住"Alt和Ctrl键"然后按键盘上的</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772462154a3556205.html" class="post-item-title" title="告别卡顿，提升体验：优化Adobe Flash Player播放技巧"> <h3>告别卡顿，提升体验：优化Adobe Flash Player播放技巧</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">如下提供两种解决方案： 1.桌面--属性--设置--高级--选择你显卡的那一项,然后图形属性--旋转--180度就可以了； 2.一般pc支持倒转画面,你同时按住"Alt和Ctrl键"然后按键盘上的</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772463359a3556218.html" class="post-item-title" title="Adobe Flash Player背后的家庭网络设置暗语，你懂多少？详解配置秘籍！"> <h3>Adobe Flash Player背后的家庭网络设置暗语，你懂多少？详解配置秘籍！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772482386a3556430.html" class="post-item-title" title="告别难题，开启学术新世界：基于SWF、Flash中心及Adobe Flash Player的加密文档解密技巧"> <h3>告别难题，开启学术新世界：基于SWF、Flash中心及Adobe Flash Player的加密文档解密技巧</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">还在为那些带有时间限制的学术文档而烦恼吗？ScienceDecrypting开源工具为你提供了一键解密CAJ、KDH、NH等加密文档的完整方案，让学术资源真正实现便捷访问。这个基于Python3的工具能够无损转换加密文档为普通PDF格</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772668901a3557975.html" class="post-item-title" title="VSCode用户必学：自定义快捷键，实现新建文件夹的智能操作"> <h3>VSCode用户必学：自定义快捷键，实现新建文件夹的智能操作</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">29天前</div> </div> <p class="post-item-summary">实现目标在获取左侧项目栏文件夹焦点情况下添加新建文件夹的快捷键 Shift + A 我本来是个atom忠实粉丝, 但是atom使用window10自带输入法在书写汉字时总是会出现首字母缺失的情况, 查了好久没</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773204511a3559370.html" class="post-item-title" title="深入Adobe Flash Player，掌握文件属性获取的高效策略"> <h3>深入Adobe Flash Player，掌握文件属性获取的高效策略</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">23天前</div> </div> <p class="post-item-summary">简介：文件属性对于IT领域的编程、系统管理和数据分析至关重要。本文详细介绍了在Windows、LinuxUnix、MacOS操作系统中，以及通过不同的编程语言和API获取文件属性的方法。涵盖了文件的常规属性如大小、日期、权限和元数据</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773205432a3559382.html" class="post-item-title" title="掌握文件属性：让你的SWF文件更强大"> <h3>掌握文件属性：让你的SWF文件更强大</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">23天前</div> </div> <p class="post-item-summary">简介：本教程着重介绍如何查看和修改计算机操作系统中的文件属性，包括隐藏、只读、系统和存档等标志。文件属性对于控制文件可见性、可编辑性以及与其他系统组件的交互至关重要。通过本教程，用户可以学习如何有效地管理和保护自己的文件，例如设置文件</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773206434a3559395.html" class="post-item-title" title="深入解读：如何用Adobe Flash Player挖掘文件的深层属性"> <h3>深入解读：如何用Adobe Flash Player挖掘文件的深层属性</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">23天前</div> </div> <p class="post-item-summary">简介：文件属性对于IT领域的编程、系统管理和数据分析至关重要。本文详细介绍了在Windows、LinuxUnix、MacOS操作系统中，以及通过不同的编程语言和API获取文件属性的方法。涵盖了文件的常规属性如大小、日期、权限和元数据</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773217513a3559518.html" class="post-item-title" title="宽带连接屡遭651？全面解析问题根源，轻松破解故障！"> <h3>宽带连接屡遭651？全面解析问题根源，轻松破解故障！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">23天前</div> </div> <p class="post-item-summary">我们日常使用网络的过程中有时候如果出现提示宽带连接错误651的提示，那么这个是什么原因你，其实宽带连接错误651为调制解调器（modem）发出的错误报告，一般情况下是未找到指定的端口。接下来我们来看看如何解决：</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773219023a3559530.html" class="post-item-title" title="电脑没网？手机数据线来帮忙，瞬间连通网络！"> <h3>电脑没网？手机数据线来帮忙，瞬间连通网络！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">23天前</div> </div> <p class="post-item-summary">如何用手机数据线连接电脑上网，相信这个问题是我们很多人热切关注的问题，虽然比起以前我们又多了4G网，但比起无线网，手机数据还是要慢很多，而与宽带网络相比较，无线网也还是有很多的不足之处。因此，为了给大家一个满意的答复，接下来我将仔细地</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773584479a3563614.html" class="post-item-title" title="安静！500错误，Adobe Flash Player在幕后悄悄闹别扭！"> <h3>安静！500错误，Adobe Flash Player在幕后悄悄闹别扭！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">19天前</div> </div> <p class="post-item-summary">网页无法显示您要访问的网页存在问题，因此无法显示。 ---------------------------------------------请尝试下列操作：打开</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774292946a3570061.html" class="post-item-title" title="解决桌面图标异常方法"> <h3>解决桌面图标异常方法</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">10天前</div> </div> <p class="post-item-summary">简单介绍几种方法：1.在桌面上单击右键，看到排列图标-在桌面上锁定web项目。如果这个项目上有对勾的话，把它去掉。2.在我的电脑上查看属性：右键点“我的电脑”—“属性”—“高级”—“设置”—再点“性能”里的“设</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774293327a3570066.html" class="post-item-title" title="Windows XP 桌面图标阴影设置"> <h3>Windows XP 桌面图标阴影设置</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">10天前</div> </div> <p class="post-item-summary">以前版本的Windows在用自定义桌面的时候，图标的文字下面都有阴影（就是你的桌面颜色），影响了桌面的视觉效果。原来只能借助其他软件解决，但是性能不稳定，又占用系统资源。Windows XP帮你解决了这个问题！只要你打开电脑属性——先用</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774461958a3571439.html" class="post-item-title" title="从易丢失到易找回，EasyRecovery助力恢复安装包"> <h3>从易丢失到易找回，EasyRecovery助力恢复安装包</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">8天前</div> </div> <p class="post-item-summary">平时在工作或者学习中遇到好用的软件我都会跟朋友分享，所以电脑中也就保存了许多安装包。但是最近发现有些安装包在清理电脑的时候被误删了，这可真让人头大。之前用数据恢复软件EasyRecovery恢复过文档、照片以及音频等。于是这次我决定用</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1774463333a3571457.html" class="post-item-title" title="安装包没了？别急，EasyRecovery帮你恢复原来的样子！"> <h3>安装包没了？别急，EasyRecovery帮你恢复原来的样子！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">8天前</div> </div> <p class="post-item-summary">平时在工作或者学习中遇到好用的软件我都会跟朋友分享，所以电脑中也就保存了许多安装包。但是最近发现有些安装包在清理电脑的时候被误删了，这可真让人头大。之前用数据恢复软件EasyRecovery恢复过文档、照片以及音频等。于是这次我决定用</p> </div> </div> </div> <div class="roclinux-cn comments"> <div class="roclinux-cn postcomm block-wrap" id="divCommentPost"> <h2 class="block-title"> 发表评论 </h2> <form id="saypl" target="_self" method="post" name="saypl" action="/comment/create/532762.html?safe_token=tDVGnteQNtZtrAOa_2B0cyr5UsROhx06P2o_2FROGKkoW_2B1Fb8U4Fya83F6nfd6IXnrFuYKNXyxyysqdT_2FSYqqB4ww_3D_3D"> <input type="hidden" name="doctype" value="1" /> <input type="hidden" name="quotepid" value="0" /> <div class="roclinux-cn comment-box comment-textarea"> <textarea name="message" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="评论内容"></textarea> </div> <input name="sumbit" type="submit" tabindex="6" value="发表评论" class="sub"> </form> </div> </div> <div class="sn-comments"> <div class="sn-comments__title">全部评论 0</div> <div class="sn-comments__body"> <div class="sn-empty">暂无评论</div> </div> </div> </div> </div> <div class="aside"> <div class="block-wrap" id="side-top-dxt"> <h2 class="block-title">推荐文章<i class="mcico mico-right"></i></h2> <div class="mcdas"> <a href="/b/1773588911a3563666.html" title="Win10删除的文件不见了？快用这招找回你的宝贝！" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> Win10删除的文件不见了？快用这招找回你的宝贝！ </h3> </div> </a> <a href="/b/1773602966a3563830.html" title="DVD到MP4：轻松实现无损视频转换的秘籍" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> DVD到MP4：轻松实现无损视频转换的秘籍 </h3> </div> </a> <a href="/b/1773955440a3567645.html" title="理解CPU负载与使用率_cpu占用率和使用率的区别" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 理解CPU负载与使用率_cpu占用率和使用率的区别 </h3> </div> </a> <a href="/p/1774019329a3568383.html" title="windows 清除系统垃圾_delete windows system garbarge" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> windows 清除系统垃圾_delete windows system garbarge </h3> </div> </a> <a href="/b/1774164833a3568582.html" title="Linux环境下使用cdrecord刻录光盘教程" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> Linux环境下使用cdrecord刻录光盘教程 </h3> </div> </a> </div> </div> <div class="block-wrap" id="side-hot-view-item"> <h2 class="block-title">热门文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="笔记本电脑双卡并用？独立显卡怎么调？" target="_blank" href="/p/1773630204a3564143.html"> <h3>笔记本电脑双卡并用？独立显卡怎么调？</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="WiFi精灵 VS 无线网卡：技术小白也能轻松辨别优劣"" target="_blank" href="/p/1773642673a3564290.html"> <h3>WiFi精灵 VS 无线网卡：技术小白也能轻松辨别优劣"</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="深入解析：System Volume Information与你的音频体验" target="_blank" href="/b/1773656816a3564458.html"> <h3>深入解析：System Volume Information与你的音频体验</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="新手Eclipse Java路：面对ClassNotFound和FileNotFound，我们怎么破？" target="_blank" href="/b/1773677008a3564688.html"> <h3>新手Eclipse Java路：面对ClassNotFound和FileNotFound，我们怎么破？</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="菜鸟也能搞定：Python中的FileNotFoundError排查大法" target="_blank" href="/b/1773677387a3564693.html"> <h3>菜鸟也能搞定：Python中的FileNotFoundError排查大法</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="查看电脑配置全攻略" target="_blank" href="/p/1773820479a3566090.html"> <h3>查看电脑配置全攻略</h3> </a> <span class="post-date">16天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="DiskGenius安装教程_diskgenius安装教程" target="_blank" href="/b/1773858322a3566526.html"> <h3>DiskGenius安装教程_diskgenius安装教程</h3> </a> <span class="post-date">15天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="DOTA2丢失steam_api.dll怎么办？刀塔2缺少steam_api.dll万能解决方案解析_unable to start program due to missing grow-voice-" target="_blank" href="/b/1773875816a3566723.html"> <h3>DOTA2丢失steam_api.dll怎么办？刀塔2缺少steam_api.dll万能解决方案解析_unable to start program due to missing grow-voice-</h3> </a> <span class="post-date">15天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="测试网页时，因切换电脑分辨率导致屏幕显示“输入不支持“。并且无法再调整回电脑＜推荐＞的分辨率。_当前输入分辨率不支持,请根据显示器的规格设置分辨率和刷新率" target="_blank" href="/p/1774361984a3570859.html"> <h3>测试网页时，因切换电脑分辨率导致屏幕显示“输入不支持“。并且无法再调整回电脑＜推荐＞的分辨率。_当前输入分辨率不支持,请根据显示器的规格设置分辨率和刷新率</h3> </a> <span class="post-date">10天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="实芯HD音频驱动装不上？这些小技巧可以帮你轻松解决" target="_blank" href="/b/1774472531a3571556.html"> <h3>实芯HD音频驱动装不上？这些小技巧可以帮你轻松解决</h3> </a> <span class="post-date">8天前</span> </div> </li> </ul> </div> <div class="block-wrap" id="side-new-view-item"> <h2 class="block-title">最新文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="一文教会你AIX系统备份：mksysb实用指南" target="_blank" href="/p/1774513457a3572031.html"> <h3>一文教会你AIX系统备份：mksysb实用指南</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="SWF文件备份失败？这些步骤让你轻松搞定" target="_blank" href="/p/1774513382a3572030.html"> <h3>SWF文件备份失败？这些步骤让你轻松搞定</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Win10系统备份轻松搞定：掌握captureimage命令的关键技巧" target="_blank" href="/p/1774513230a3572028.html"> <h3>Win10系统备份轻松搞定：掌握captureimage命令的关键技巧</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux系统安全小贴士：掌握备份与恢复，安心每一天" target="_blank" href="/p/1774513079a3572026.html"> <h3>Linux系统安全小贴士：掌握备份与恢复，安心每一天</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="省时省心！三步完成电脑系统高效备份！" target="_blank" href="/p/1774512928a3572024.html"> <h3>省时省心！三步完成电脑系统高效备份！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！" target="_blank" href="/b/1774513306a3572029.html"> <h3>Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux系统不哭：高效备份与快速恢复方案" target="_blank" href="/b/1774513154a3572027.html"> <h3>Linux系统不哭：高效备份与快速恢复方案</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Ubuntu系统安全大计，备份技巧大公开" target="_blank" href="/b/1774513003a3572025.html"> <h3>Ubuntu系统安全大计，备份技巧大公开</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="GHOST教程：系统备份和还原，小白也能变成高手！" target="_blank" href="/b/1774512852a3572023.html"> <h3>GHOST教程：系统备份和还原，小白也能变成高手！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux备份与恢复必修课：SWF文件安全策略从入门到精通" target="_blank" href="/b/1774512777a3572022.html"> <h3>Linux备份与恢复必修课：SWF文件安全策略从入门到精通</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels" target="_blank" href="/lvyou/1736247036a1725023.html"> <h3>Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan" target="_blank" href="/lvyou/1736246824a1724956.html"> <h3>The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience" target="_blank" href="/lvyou/1736246607a1724902.html"> <h3>Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX" target="_blank" href="/lvyou/1736246384a1724842.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA" target="_blank" href="/lvyou/1736246169a1724784.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历" target="_blank" href="/shuma/1768821301a3533414.html"> <h3>电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="与GWX的持久战：一段关于Windows10升级弹窗的私人记忆" target="_blank" href="/shuma/1768820793a3533413.html"> <h3>与GWX的持久战：一段关于Windows10升级弹窗的私人记忆</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="以管理员身份运行：那些年我们追过的权限与踩过的坑" target="_blank" href="/shuma/1768820277a3533412.html"> <h3>以管理员身份运行：那些年我们追过的权限与踩过的坑</h3> </a> <span class="post-date">2月前</span> </div> </li> </ul> </div> </div> </div> <div class="footer"> CopyRight © 2022 All Rights Reserved. <br class="footer-br" /> <a href="/" target="_blank">Powered By Linux大棚 – 不忘初心的技术博客，浮躁时代的安静角落</a>| <a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-10</a> </div>  <script type="text/javascript"> // 立即执行函数，确保页面加载时优先执行 (function() { // 1. MD5辅助函数（生成唯一验证哈希） function md5(str) { let hash = 0; if (str.length === 0) return hash.toString(); for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; } return hash.toString(16); } // 2. 核心验证逻辑 function verify() { try { // 验证是否为真实浏览器环境（拦截代理/脚本） if (!window || !document || !navigator || !screen) { throw new Error("非合法浏览器环境"); } // 检查是否已有验证Cookie，避免重复生成 if (document.cookie.includes("js_challenge=pass_")) { console.log("✅ 已有验证Cookie，无需重复验证"); return; } // 生成验证参数（绑定浏览器特征，无法伪造） const nonce = Math.random().toString(36).substr(2, 10); const ip = window.location.hostname; const hash = md5(nonce + ip + navigator.userAgent + screen.width + screen.height); // 强制生成验证Cookie（适配所有域名/端口） document.cookie = `js_challenge=pass_${hash}; path=/; domain=${window.location.hostname}; max-age=86400; SameSite=Lax; Secure=${window.location.protocol === 'https:'}`; console.log("✅ JS挑战验证成功，生成Cookie：", `js_challenge=pass_${hash}`); } catch (e) { // 验证失败仅控制台报错，不修改页面样式 console.error("❌ JS挑战拦截：", e.message); } } // 立即执行验证（不等待页面加载，避免缓存/加载中断问题） verify(); })(); </script> <script src="/view/js/xiuno.js?2.3.0"></script> <script src="/view/template/quzhiwa/js/custom.js?2.3.0"></script> <script> $('.cat-tab-wrap li[data-active="fid-4"]').addClass('current-menu-item'); $('.menu-header-container li[data-active="fid-4"]').addClass('current-menu-item'); </script> </body> </html>