笔记练习：《Javascript入门经典（第5版）》page150_12.8_Practice

本文链接：https://blog.csdn.net/nd_rrew/article/details/51115807

练习一：尝试编写一个 insertAfter() 方法，使用与 insertBefore() 类似的参数，也是就一个插入节点，一个目标节点。（提示：使用 insertBefore() 方法和 nextSibling 属性。）

代码内容如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>insertAfter()</title>
    <script>
        //创建 insertAfter() 方法，插入新节点insertElement、指示插入位置的节点targetPosition（插入到这个节点后面）
        function insertAfter(insertElement,targetPosition){
            var Element = targetPosition.nextSibling;
            targetPosition.parentNode.insertBefore(insertElement,Element.nextSibling);
        }
        //创建一个测试的 <p> 标签
        var newP = document.createElement("p");
        var newText = document.createTextNode("\n******");
        newP.appendChild(newText);
        //创建一个点击事件，执行在“测试3”后插入一段字符串
        window.onload = function(){
            document.getElementById("btn").onclick = function(){
                insertAfter(newP,document.getElementById("test3"));
            }
        };
    </script>
</head>
<body>
    <div>
        <ul>
            <li id="test1">测试1</li>
            <li id="test2">测试2</li>
            <li id="test3">测试3</li>
            <li id="test4">测试4</li>
            <li id="test5">测试5</li>
        </ul>
        <input type="button" id="btn" value="点击" />
        <p>点击按钮，使用 insertAfter() 方法插入‘******’在‘测试3’之后。</p>
    </div>
</body>
</html>

练习二：在使用程序清单12.4生成的菜单时，点击其中一个菜单项，页面就会跳转到相应的内容，但为了返回菜单，需要用户自己手工滚动页面。尝试修改代码，在每个 <h2> 元素之前添加“回到顶部”的链接。（提示：不需要添加新链接，只需要给每个锚点添加一个 href 和一些链接文本。）

动态创建菜单范例的 HTML 文件，代码内容如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Scripting the DOM:《海子诗集》</title>
    <script src="menu.js"></script>
    <script>window.onload = makeMenu ;</script>
</head>
<body>
    <h1>海子诗集</h1>
    <h2>一：答复</h2>
    <p>麦地，别人看见你，觉得你温暖,美丽，我则站在你痛苦质问的中心，被你灼伤，我站在太阳痛苦的芒上，麦地，神秘的质问者啊，当我痛苦地站在你的面前，你不能说我一无所有，你不能说我两手空空。</p>
    <h2>二：重建家园</h2>
    <p>在水上放弃智慧，停止仰望长空，为了生成你要流下屈辱的泪水，来浇灌家乡平静的果园，生成无须洞察，大地自己呈现，用幸福也用痛苦，来重建家乡的屋顶，放弃沉思和智慧，如果不能带来麦粒，请对诚实的大地，保持缄默和你那幽暗的本性，风吹炊烟，果园就在我的身旁静静叫喊，"双手劳动，慰籍心灵"。</p>
    <h2>三：明天醒来我会在哪一只鞋子里</h2>
    <p>我想我已经够
        小心翼翼的，我的脚趾正好十个，我的手指正好十个，我生下来时哭几声，我死去时别人又哭，我不声不响的，带来自己这个包袱，尽管我不喜爱自己，但我还是悄悄打开，我在黄昏时坐在地球上，我这样说并不表明晚上，我就不在地球上早上同样，地球在你屁股下，结结实实，老不死的地球你好，或者我干脆就是树枝，我以前睡在黑暗的壳里，我的脑袋就是我的边疆，就是一颗梨，在我成型之前，我是知冷知热的白花，或者我的脑袋是一只猫，安放在肩膀上，造我的女主人荷月远去，成群的阳光照着大猫小猫，我的呼吸，一直在证明，树叶飘飘，我不能放弃幸福，或相反，我以痛苦为生，埋葬半截，来到村口或山上，我盯住人们死看，呀,生硬的黄土人丁兴旺。</p>
    <h2>四：麦子熟了</h2>
    <p>那一年兰州一带的新麦，熟了，在回家的路上，在水面混了三十多年的父亲还家了，坐着羊皮筏子，回家来了，有人背着粮食，夜里推门进来，灯前，认清是三叔，老哥俩，一宵无言，半尺厚的黄土，麦子熟了。</p>
    <h2>五：死亡之诗(之一)</h2>
    <p>漆黑的夜里有一种笑声笑断我坟墓的木板，你可知道。这是一片埋葬老虎的土地，正当水面上渡过一只火红的老虎，你的笑声使河流漂浮，的老虎，断了两根骨头，正当这条河流开始在存有笑声的黑夜里结冰，断腿的老虎顺流而下,来到我的，窗前。一块埋葬老虎的木板，被一种笑声笑断两截。</p>
    <h2>六：死亡之诗(之二)</h2>
    <p>我所能看见的少女，水中的少女，请在麦地之中，清理好我的骨头，如一束芦花的骨头，把他装在箱子里带回，我所能看见的，洁净的少女,河流上的少女，请把手伸到麦地之中，当我没有希望坐在一束，麦子上回家，请整理好我那凌乱的骨头，放入一个小木柜。带回它，象带回你们富裕的嫁妆，但是,不要告诉我，扶着木头,正在干草上晾衣的，母亲。</p>
    <h2>七：死亡之诗(之三:采摘葵花)</h2>
    <p>雨夜偷牛的人，爬进了我的窗户，在我做梦的身子上，采摘葵花，我仍在沉睡，在我睡梦的身子上，开放了彩色的葵花，那双采摘的手，仍象葵花田中，美丽笨拙的鸭子，雨夜偷牛的人，把我从人类，身体中偷走。我仍在沉睡。我被带到身体之外，葵花之外。我是世界上，第一头母牛(死的皇后)，我觉的自己很美，我仍在沉睡。雨夜偷牛的人，于是非常高兴，自己变成了另外的彩色母牛，在我的身体中，兴高彩烈地奔跑，扶着木头,正在干草上晾衣的，母亲。</p>
    <h2>八：两座村庄</h2>
    <p>和平与情欲的村庄，诗的村庄，村庄母亲昙花一现，村庄母亲美丽绝伦，五月的麦地上天鹅的村庄，沉默孤独的村庄，一个在前一个在后，这就是普希金和我诞生的地方，风吹在村庄，风吹在海子的村庄，风吹在村庄的风上，有一阵新鲜有一阵久远，北方星光照耀南国星座，村庄母亲怀抱中的普希金和我，闺女和鱼群的诗人安睡在雨滴中，是雨滴就会死亡!，夜里风大听风吹在村庄，村庄静座象黑漆漆的财宝，两座村庄隔河而睡，海子的村庄睡的更沉。</p>
    <h2>九：十四行:王冠</h2>
    <p>我所热爱的少女，河流的少女，头发变成了树叶，两臂变成了树干，你既然不能做我的妻子，你一定要成为我的王冠，我将和人间的伟大诗人一同戴，用你美丽的叶子缠绕我的竖琴和箭袋，秋天的屋顶、时间的重量，秋天又苦又香，使石头开花象一顶王冠，秋天的屋顶又苦又香，空中弥漫着一顶王冠，被劈开的月桂和扁桃和苦香，夜里风大听风吹在村庄，村庄静座象黑漆漆的财宝，两座村庄隔河而睡，海子的村庄睡的更沉。</p>
</body>
</html>

动态创建菜单范例的 Javascript 文件，代码内容如下：

function makeMenu(){
    var h2s = document.getElementsByTagName("h2");
    var menu = document.createElement("div");
    //给 menu 对象设置 TOP 锚点
    menu.setAttribute("name","TOP");
    var menuUl = document.createElement("ul")
    menu.appendChild(menuUl);
    for(var i = 0; i < h2s.length; i++){
        var itemText = h2s[i].childNodes[0].nodeValue;
        var menuLi = document.createElement("li");
        menuUl.appendChild(menuLi);
        var menuLiA = document.createElement("a");
        menuLiA = menuLi.appendChild(menuLiA);
        menuLiA.setAttribute("href","#item" + i);
        var menuText = document.createTextNode(itemText);
        menuLiA.appendChild(menuText);
        var anchor = document.createElement("a");
        //给锚点添加链接文本
        var backTopText = document.createTextNode("回到顶部");
        anchor.appendChild(backTopText);
        anchor.setAttribute("name","item" + i);
        //给锚点添加链接，指向 menu 对象的 TOP 锚点
        anchor.setAttribute("href","#TOP");
        document.body.insertBefore(anchor,h2s[i]);
    }
    document.body.insertBefore(menu,document.body.firstChild);
}