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

知识点

  1. 获取节点
# 单个
gallery = document.getElementById('gallery');

# 数组
li_list = document.getElementsByTagname('li');
  1. 获取属性
<a href="static/images/fireworks.jpg" title="A fireworks display">Fireworks</a>
# 获取
a_element = document.getElementsByTagName(a)[0];
a_href = a_element.getAttribute('href');

完整代码

html文档

imagegallery.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>Image Gallery</title>
</head>
<link rel="stylesheet" type="text/css" href="static/css/layout.css" media="screen">
<body>
    <h1>Snapshots</h1>
    <!-- <a href="http://www.baidu.com" onclick="return false;">点击下</a> -->
    <div>
        <ul id="imagegallery">
        <li>
          <a href="static/images/fireworks.jpg" title="A fireworks display">Fireworks</a>
        </li>
        <li>
          <a href="static/images/coffee.jpg" title="A cup of black coffee">Coffee</a>
        </li>
        <li>
          <a href="static/images/rose.jpg" title="A red, red rose">Rose</a>
        </li>
        <li>
          <a href="static/images/bigben.jpg" title="The famous clock">Big Ben</a>
        </li>
    </ul>
    </div>
        <script type="text/javascript" src="static/js/showPic.js"></script>
        <!-- <script type="text/javascript" src="static/js/showPic_copy.js"></script> -->
<!--    <script type="text/javascript">
        function showPic(whichpic) {
        var source = whichpic.getAttribute('href');
        var placeholder = document.getElementById('placeholder');
        placeholder.setAttribute('src', source);
        }
    </script> -->
</body>
</html>

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<links.length; i++){
        links[i].onclick = function() {
            return showPic(this);
            // return showPic(this);
        }
    }
}

    // <img id="placeholder" src="static/images/index.jpg" alt="my image gallery" />
    // <p id="description"> choose a picture</p>
/*
    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;
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,072评论 0 3
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,613评论 0 7
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,416评论 1 3
  • 一、DOM概述 D: Document 文档 一份文档就是一棵节点树,每个节点都是一个对象 O:Object 对象...
    紫陌兰溪阅读 338评论 0 1
  • 1. 相关概念 由 W3C 批准并由所有于标准相兼容的 Web 浏览器支持的第三方技术成为 DOM (文档对象模型...
    梦回吹角连营阅读 362评论 0 3