第四章 JS图片库

把整个图片库的浏览链接集中安排在图片库主页里，只在用户点击了这个主页里的某个图片链接时才把相应的图片传给他。

1. 标记

• 设置一个“占位符”，可以设置id用JS对位置进行操作。

2. setAttribute 和 非DOM解决方案

• 非DOM
  element.attribute = value;等价于
• DOM
  element.setAttribute("attribute","value");

第一级DOM的优势：可以修改文档中的任何一个元素的任何一个属性；可移植性好。应用于Web浏览器以外的应用环境
那些老方法只适合于Web文档，DOM则适合于任何一种标记语言。
DOM是一种适用于多种环境和多种程序设计的通用型API

3. 把JS和文档结合
   first：<script type="text/javascript" src="scripts/showPic.js"></script>
   second：//事件处理函数(event handler):在特定事件发生时调用特定的JS代码 //阻止默认行为被调用，即防止打开新的窗口 onclick="showPic(this); return false";

• onmouseout onmouseover onclick

4. 在一个网页上切换文本

DOM属性

• childNodes : 用来获取任何一个元素的所有子元素，返回数组
  function countBodyChildren(){ var body_element = document.getElementsByTagName("body")[0]; alert(body_element.childNodes.length); } window.onload = countBodyChildren;//返回值特别大

• nodeType ：每一个节点都有这个属性，让我们知道自己正在于哪个节点打交道，它的值为数字（共12种）

  • 1->元素节点
  • 2->属性节点
  • 3->文本节点

• nodeValue：得到和设置一个节点的值
  <p id = "description">choose me.</p>//description.nodeValue返回null，<p>本身的这个属性为空 description.childNode[0].nodeValue √

• node.firstChild == node.childNode[0];
  node.lastChild == node.childNode[node.childNode.length-1];