Javascript Dom编程艺术读书笔记（三）

来源：互联网发布：程序员的鄙视链庞博编辑：程序博客网时间：2024/05/18 22:55

动态创建标记
之前的案例通过“占位符”图片以及“占位符”文字来进行图片资源和文字资源的更换。但是“占位符”图片和“占位符”文字是存在HTML源码中的，可以用Javascript来动态创建标记，这样HTML源码里就不需要“占位符”图片和“占位符”文字了。
优化后的HTML源码：

<head>    <meta charset="utf-8" />    <title>History Book</title>    <link rel="stylesheet" href="styles/layout.css" media="screen" /></head><body>    <h1>历史书籍</h1>    <ul id="change">        <li>            <a href="images/jia bian gou.jpg" title="尘封的历史" >                <img src="images/jia bian gou.bmp" />            </a>        </li>        <li>            <a href="images/Fall of Gians.jpg" title="波澜壮阔地展现了一个我们自认为了解，但从未如此真切感受过的20世纪">                <img src="images/Fall of Gians.bmp" />            </a>        </li>        <li>            <a href="images/Second-hand time.jpg" title="一部20世纪后半叶的微观俄国史，笔力直抵普京时代">                <img src="images/Second-hand time.bmp" />            </a>        </li>        <li>            <a href="images/Brief History of Humankind.jpg" title="从动物到上帝" >                <img src="images/Brief History of Humankind.bmp" />            </a>        </li>    </ul>    <script src="scripts/showimages.js"></script></body></html>

至于存放“占位符”图片和“占位符”文字的img和h2标签就要利用Javascript动态创造。
几个函数：

insertBefore(newElement, targetElement)
createElement()
createTextNode()
element.appendChild()

观察HTML源码就可以发现想要显示“占位符”图片就需要把img标签动态创建在<ul>标签后面，很遗憾javascript并没有insertAfter函数，但是可以自己写一个：

function insertAfter(newElement, targetElement) {    var parent = targetElement.parentNode;    if(parent.lastChild == targetElement){        /*如果目标节点为其父节点的最后一个子节点，直接把新的节点插入父节点的最后一个子节点后面*/        parent.appendChild(newElement);    }   else{        /*如果不是，那找到目标节点的下一个兄弟节点，把新节点插入到目标节点的下一个兄弟节点前*/        parent.insertBefore(newElement, targetElement.nextSibling);    }}

有了insertAfter函数之后，就可以创建标签并把标签插入到<ul>标签后了。
创建<h2>标签：

var description = document.createElement("h2");    description.setAttribute("id", "description");    var desctext = document.createTextNode("阴与阳");    description.appendChild(desctext);

创建<img>标签：

var placeholder = document.createElement("img");    placeholder.setAttribute("id", "placeholder");    placeholder.setAttribute("src", "images/A year of no significance.jpg");    var description = document.createElement("h2");    description.setAttribute("id", "description");

插入：

insertAfter(placeholder, change);insertAfter(description, placeholder);

完整代码：

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("change")) return false;     var placeholder = document.createElement("img");    placeholder.setAttribute("id", "placeholder");    placeholder.setAttribute("src", "images/A year of no significance.jpg");    var description = document.createElement("h2");    description.setAttribute("id", "description");    var desctext = document.createTextNode("阴与阳");    description.appendChild(desctext);    var change = document.getElementById("change");    insertAfter(placeholder, change);    insertAfter(description, placeholder);}

至此，动态创建标签功能已经完成，下面就是定位标签并且更换图片以及图片：

function prepareGallery(){    if(!document.getElementsByTagName) return false;    if(!document.getElementById) return false;    if(!document.getElementById("change")) return false;    var gallery = document.getElementById("change")    var links = gallery.getElementsByTagName("a")    for (var i=0; i<links.length; i++){        links[i].onclick = function(){            return showimage(this)? false:true;        }    }}function showimage(whichpic){    if(!document.getElementById("placeholder")) return false;    var source = whichpic.getAttribute("href");    var placeholder = document.getElementById("placeholder")    placeholder.setAttribute("src", source);    if(document.getElementById("description")) {        var text = whichpic.getAttribute("title")? whichpic.getAttribute("title"):" ";        var description = document.getElementById("description")        if(description.firstChild.nodeType == 3){            description.firstChild.nodeValue = text;        }    }     return true;}

注意：
这里有两个函数需要绑定到window.onload。
如果像下面那样绑定只会执行最后一个函数func2：

window.onload = (func1);window.onload = (func2);

如果像执行两个函数要这样写：

window.onload = func() {    func1();    func2();}

高级写法：

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

注意一下window.onload虽然被赋值给oldonload但是它本身在赋值之后还是有意义的。
之前提到过因为图片过大，排版没有排版好，这次写了一个python脚本把images文件里的jpg格式的图片缩写了一点但是比缩略图bmp格式的要大。
效果：
这里写图片描述
代码放在我的github里面了，本文对应的是chapter7。

阅读全文

0 0