这一章通过JavaScript图片库案例，学习了一些DOM属性。
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片库</title> <link href="http://www.likecs.com/styles/layout.css" media="screen" /> </head> <script type="text/javascript" src="http://www.likecs.com/scripts/showPic.js"></script> <body> <h1>Snapshots</h1> <ul> <li> <a href='http://www.likecs.com/images/1.jpg' title="黄昏海边">黄昏海边</a> </li> <li> <a href='http://www.likecs.com/images/2.jpg' title="大漠孤烟直">沙漠</a> </li> <li> <a href='http://www.likecs.com/images/3.jpg' title="湖泊">湖泊</a> </li> <li> <a href='http://www.likecs.com/images/4.jpg' title="可爱熊熊">可爱壁纸</a> </li> <li> <a href='http://www.likecs.com/images/5.jpg' title="哆啦A梦">哆啦A梦</a> </li> </ul> <img src="http://www.likecs.com/images/gallery.png" alt="my image gallery" /> <p>Choose an image.</p> </body> </html> 几个DOM属性 1. childNodes属性用来获取任何一个元素的所有子元素
使用方式：element.childNodes
返回值：这个元素的所有子元素数组。包含所有类型的节点：元素节点、文本节点和属性节点。（实际上，文档里几乎每个东西都是一个节点，甚至连空格和换行符都是节点）
-- 示例：输出body元素的全体子元素
function countBodyChildren() { let body_element = document.getElementsByTagName('body')[0]; console.log(body_element.childNodes); }-- 输出：
如图可见，body元素的子元素有9个，除了h1元素、ul元素、p元素、img元素四个外，还包括5个文本节点。
-- 文本节点示例：
获取每个节点的type（元素节点、文本节点还是属性节点）
元素节点的nodeType属性值：1
属性节点的nodeType属性值：2
文本节点的nodeType属性值：3
使用方式：node.nodeType
-- 示例：
let body_element = document.getElementsByTagName('body')[0]; alert(body_element.nodeType);-- 输出：1
3. nodeValue属性获取 or 设置节点的值
获取节点的值使用方式：node.nodeValue
设置节点的值使用方式：node.nodeValue = xxx
注意，元素节点的nodeValue值是null。如果想获取p元素所包含的文本值，则需要获取元素所包含的文本值，则需要获取p元素的第一个子节点。
-- 示例：输出 p元素的nodeValue 和 p的childNodes 以及 第一个子节点的nodeValue
function countBodyChildren() { let description = document.getElementsById('description'); console.log(description.nodeValue); console.log(description.childNodes); console.log(description.childNodes[0].nodeValue); }--- 输出：
-- 示例：将p元素nodeValue值设置为'hello world'
function countBodyChildren() { let description = document.getElementById('description'); description.childNodes[0].nodeValue = 'hello world'; console.log(description.childNodes[0].nodeValue); }--- 输出：
指childNodes的第一个元素和最后一个元素，相当于简写，如下：
node.firstChild ——> node.childNodes[0]
node.lastChild ——> node.childNodes[node.childNodes.length - 1]
完整代码 1. HTML见上 2. JavaScript function showPic(whichPic) { let source = whichPic.getAttribute('href'); let placeholder = document.getElementById('placeholder'); placeholder.setAttribute('src', source); let title = whichPic.getAttribute('title'); let description = document.getElementById('description'); description.firstChild.nodeValue = title; } 3. 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; } img { width: 80%; display: block; clear: both; }