JS DOM编程艺术第6/7两章-完整code

知识点

1. 获取节点

# 单个
gallery = document.getElementById('gallery');

# 数组
li_list = document.getElementsByTagname('li');

2. 获取属性

Fireworks
# 获取
a_element = document.getElementsByTagName(a)[0];
a_href = a_element.getAttribute('href');

完整代码

html文档

imagegallery.html




    



    
Snapshots
    
    

        

        

          Fireworks
        
        

          Coffee
        
        

          Rose
        
        

          Big Ben
        
    
    
        
        

css部分

layout.css
*{
    margin:0;
    padding:0;
}

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里面的li横向排列，并且居中呢？ul设置为text-align：center；li设置-display-inline即可*/
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;
}*/

js部分

showPic.js
function showPic(whichpic) {
    if (!document.getElementById('placeholder')){
        return true;
    }
    if (!document.getElementById('description')){
        return false;
    }
    var source = whichpic.getAttribute('href');
    
    var placeholder = document.getElementById('placeholder');
    placeholder.setAttribute('src', source);
    if (whichpic.getAttribute('title')){
        var text = whichpic.getAttribute("title");
    }
    else{
        var text = "";
    }
    var description = document.getElementById("description");
    if(description.firstChild.nodeType == 3){
        // alert(description.firstChild.nodeValue);
        description.firstChild.nodeValue = text;
        // alert(description.firstChild.nodeValue);     
    }
    return false;
}   


function prepareGallery() {
    if(!document.getElementById){
        return false;
    }
    if(!document.getElementsByTagName){
        return false;
    }
    if(!document.getElementById("imagegallery")){
        return false;
    }
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    for(var i=0; i
    // 
 choose a picture
/*
    1. 创建一个元素节点
        document.creatElement(nodeName)
    2. 元素节点插入到文档树中
        parent.appendChild(nodeName)
    3. 创建一个文本节点
        document.createTextNode(text)
    4. 文本节点插入到文档树中
        parent = document.getElementById(parent)
        parent.appendChild(nodeName)
    5. 将一个元素节点插入到一已知节点前
        parentElement = targetElement.parentNode
        parentElement.insertBerfore(newElement, targetElement)
    6. 目标元素节点的后一个元素节点
        next_brother_node = target.nextSibling
*/

function insertAfter(newElement, targetElement){
    var parent = targetElement.parentNode;  // 获取targetElement的父元素节点 parent
    if(parent.lastChild == targetElement){  // 判定 parent节点的最后一个节点是不是target节点
        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.getElementsByTagName){
        return false;
    }
    var placeholder = document.createElement('img');    // 创建了一个img元素节点
    placeholder.setAttribute('id', 'placeholder');      
    placeholder.setAttribute('src', 'static/images/index.jpg');
    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);
}
/*
 这里学习的是
 1. 获取元素节点  element.childNodes      # 这里就是elemennt所有的节点都获取到，不过这里获取到是一个数组
 2. 掌握节点的类型
    2.1 node.nodeType
        nodeType=1 : 元素节点
        nodeType=2 : 属性节点
        nodeType=3 : 文本节点
    2.2 node.nodeValue # 获取node节点的值
    2.3 针对 element.childNodes获取到是一个数组，那么每次使用的使用都要使用索引来对每一个元素进行使用
        element.childNodes[0] <=> element.firstChild
        element.childNodes[length-1] <=> element.lastChild
        
        ********************************************
        description = document.getElementById("description"); # 获取到一个元素节点
        description.childNodes[0].nodeValue <=> description.firstChild.nodeValue = text; # 将description中的第一个节点属性值赋值为 text变量
        ********************************************
*/

function countBodyChildren() {
    var body_element = document.getElementsByTagName("body")[0];  // 获取body元素[0] 的所有节点
    var gallery = document.getElementById("imagegallery");
    alert(body_element.childNodes.length);  // 获取节点的长度
    // for (var i = 0; i < body_element.length; i++) {
    //  alert(i.nodeType)
    }



function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }
    else{
        window.onload = function(){
        oldonload();
        func();
        }
    }
}

// addLoadEvent(countBodyChildren);
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
// window.onload = countBodyChildren;