Javascript Dom编程艺术读书笔记（三）_createtextnode可以填入占位符吗-CSDN博客

本文链接：https://blog.csdn.net/eye_water/article/details/78060372

动态创建标记
之前的案例通过“占位符”图片以及“占位符”文字来进行图片资源和文字资源的更换。但是“占位符”图片和“占位符”文字是存在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。