《JavaScript DOM 编程艺术（第2版）》读书笔记四： 案例研究：JavaScript 图片库

非DOM的一些方法：

• 改变input元素的value属性：element.value = "the new value" 等价 element.setAttribute("value", "the new value");
• 改变图片的src属性：placeholder.src = soure 等价 placeholder.setAttribute("src", source);

推荐使用setAttribute, 因为：

• setAttribute可以修改文档中的任何一个元素的任何一个属性，不必去记忆哪些元素的哪些属性可以用DOM之前的哪些方法去设置。
• 可以移植性好，老方法只适用于Web文档，DOM则适用于任何一种标记语言。

事件处理函数

• 作用是：在特定事件发生时调用特定的JavaScript代码

• 工作机制：在给某个元素添加了事件处理函数后，一旦事件发生，相应的JavaScript代码就会得到执行。被调用的JavaScript代码可以返回一个值，这个值将被传递给那个事件处理函数。

• 防止用户被带到目标链接窗口的方法：给某个链接添加一个onclick事件处理函数，并让这个处理函数所触发的JavaScript代码返回值为false.

  <a href="https://www.baidu.com/" onclick="return false">Click me</a>
  

• this关键字：“这个对象”

几个DOM属性

• childNodes属性：获取任何一个元素的所有子节点的数组（包含所有类型子节点：元素节点、文本节点、属性节点）

  // 获取body元素。因为每份文档只有一个body元素，所以它是document.getElementsByTagName("body")方法返回数组中的第一个（也是唯一一个）元素
  var body_element = document.getElementsByTagName("body")方法所有返回的数组中的第一个（也是唯一一个）元素[0];
  // 获取body元素的子节点
  body_element.childNodes;
  // 获取body元素的子节点个数
  body_elements.childNodes.length;
  // 页面加载执行函数
  window.onload = 函数名；
  

• nodeType属性：节点类型，每一个节点都有nodeType类型。值是一个数字而不是字符，如下：

  • 元素节点的nodeType属性值是1
  • 属性节点的nodeType属性值是2
  • 文本节点的nodeType属性值是3

• nodeValue属性：得到（和设置）一个节点的值

  <p id="description">Choose an image</p>
  // description.nodeValue 返回一个null值，<p>元素本身的nodeValue属性是一个空值，真正需要的是<p>元素包含的文本值,是文本节点，就是<p>元素的第一个子节点
  description.childNodes[0].nodeValue
  

• firstChild属性：访问childNodes数组的第一个元素

• lastChild属性：访问childNodes数组的最后一个元素

• nodeName属性：得到一个节点的名字，总是返回一个大写字母的值，即使元素在HTML文档里是小写字母，例如（IMG、P、A）

开发注意事项：

• 所有图片放到一个子目录images中
• 所有JavaScript脚本文件放到一个子目录scripts中
• 所有css文件放到一个子目录styles中