JavaScript DOM 编程艺术：图片库实现与节点操作详解

修改图片 src 属性的两种方法

修改图片 src 属性主要有两种实现路径：

第一种是使用 setAttribute 方法，该方法属于“第1级DOM”规范的一部分，支持对元素节点的任意属性进行设置。

第二种是直接通过 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 属性返回的数组中。

每个节点都具备 nodeType 属性。该属性共有12种可能的取值，但在实际开发中，仅有3种取值具有核心使用价值：元素节点的 nodeType 值为1，属性节点的值为2，文本节点的值为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 来获取。