《Javacript DOM 编程艺术》笔记（三）A JavaScript Image Gallery [完结]

这是最后一篇文章了，我所需要的知识到这里都结束了，书本剩余的内容都是一些最佳实践。应该在实践中遇到问题了再回来学习。

A JavaScript Image Gallery

• childNodes
• nodeType
• nodeValue
• firstChild
• lastChild

Image Gallery

gallery.html

    
    
    


    
Snapshots
    

        

             Fireworks
        
        

             Coffee
        
        

            Rose
        
        

             Big Ben
        
    
        

showPic.js

function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);
}

childNodes

function countBodyChildren() {
    var body_element = document.getElementsByTagName("body")[0];
    console.log(body_element.childNodes.length);
}

window.onload = countBodyChildren;

nodeType property

 var body_element = document.getElementsByTagName("body")[0];
console.log('body_element.nodeType = ' + body_element.nodeType);

• Element nodes have a nodeType value of 1.
• Attribute nodes have a nodeType value of 2.
• Text nodes have a nodeType value of 3.

Adding a description in the markup

gallery.html 添加一个标签

Choose an image.

修改 showPic.js 的 showPic 方法

function showPic(whichpic) {
    // ...

    var text = whichpic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
}