《JavaScript DOM编程艺术》笔记
前几章介绍javascript基本知识，变量的声明，函数，和对象这三者是重点，当然没什么难度。
第三章开始是重点，讲到了DOM。
D：文档
O：面向对象
M：模型（树）
获取元素：
有三种DOM方法可以获取元素节点，分别是通过元素id，通过标签名，和通过类名。
1.getElementById
根据id返回一个
2.getElementByTagName
根据标签名，返回一个对象数组。每个对象分别对应着document对象中的一个列表项元素。
3.getElementByClassName
以上的三种方法是用来获取元素的，我们获取元素后，还需要获取其各个属性。getAttribute方法是用来获取属性，setAttribute方法是用来更改属性。
getAttribute是一个函数，它只有一个参数，你打算查询的属性的名字。
object.getAttribute(attribute)
基本的思路是：通过上述提到的三种方式获取元素节点，再根据getAttribute获取属性，再根据setAttribute改变属性。
第四章，作者先讲了一个小例子，在继续练习上述内容之外，讲到了childNode属性。
//由于每个html中只有一个body元素，所以将会是getElementsByTagName返回的数组中的第0个
var body_element = document.getElementsByTagName("body")[0];
body_element.childNodes
还有nodeType属性。
3种具有实用价值的nodeType属性:
元素节点的nodeType属性是1
属性节点的nodeType属性是2
文本节点的nodeType属性是3
图片库实例的代码：
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Image Gallery</title> <script type="text/javascript" src="scripts/showPic.js"></script> <link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" /> </head> <body> <h1>Snapshots</h1> <ul id="imagegallery"> <li> <a href="images/fireworks.jpg" title="A fireworks display"> <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" /> </a> </li> <li> <a href="images/coffee.jpg" title="A cup of black coffee" > <img src="images/thumbnail_coffee.jpg" alt="Coffee" /> </a> </li> <li> <a href="images/rose.jpg" title="A red, red rose"> <img src="images/thumbnail_rose.jpg" alt="Rose" /> </a> </li> <li> <a href="images/bigben.jpg" title="The famous clock"> <img src="images/thumbnail_bigben.jpg" alt="Big Ben" /> </a> </li> </ul> </body> </html>
js：
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function insertAfter(newElement,targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { parent.insertBefore(newElement,targetElement.nextSibling); } } function preparePlaceholder() { if (!document.createElement) return false; if (!document.createTextNode) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; var placeholder = document.createElement("img"); placeholder.setAttribute("id","placeholder"); placeholder.setAttribute("src","images/placeholder.gif"); placeholder.setAttribute("alt","my image gallery"); var description = document.createElement("p"); description.setAttribute("id","description"); var desctext = document.createTextNode("Choose an image"); description.appendChild(desctext); var gallery = document.getElementById("imagegallery"); insertAfter(placeholder,gallery); insertAfter(description,placeholder); } function prepareGallery() { if (!document.getElementsByTagName) return false; if (!document.getElementById) return false; if (!document.getElementById("imagegallery")) return false; var gallery = document.getElementById("imagegallery"); var links = gallery.getElementsByTagName("a"); for ( var i=0; i < links.length; i++) { links[i].onclick = function() { return showPic(this); } links[i].onkeypress = links[i].onclick; } } function showPic(whichpic) { if (!document.getElementById("placeholder")) return true; var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); if (!document.getElementById("description")) return false; if (whichpic.getAttribute("title")) { var text = whichpic.getAttribute("title"); } else { var text = ""; } var description = document.getElementById("description"); if (description.firstChild.nodeType == 3) { description.firstChild.nodeValue = text; } return false; } addLoadEvent(preparePlaceholder); addLoadEvent(prepareGallery);
css：
body { font-family: "Helvetica","Arial",serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style: none; } #imagegallery { list-style: none; } #imagegallery li { display: inline; } #imagegallery li a img { border: 0; }