machinecat520
/
zj-Exercise


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        window.onload = function () {
            //创建一个“广州”节点，添加到#city下
            myClick("btn01", function () {
                //创建广州节点:<li>广州<li/>
                //创建li元素节点
                /**
                 * document.createElement()
                 * 可以用于创建一个元素节点对象，
                 *  它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
                 *  并将创建好的对象作为返回值返回
                */
                var li = document.createElement("li");
                // alert(li);

                //创建“广州”文本节点
                /**
                 * document.createTextNode()
                 * 可以用来创建一个文本节点对象
                 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
                 * 
                */
                var gzText = document.createTextNode("广州");
                // alert(gzText);

                //将gzText设置为li的子节点
                /**
                 * appendChild()
                 *  -向一个父节点中添加一个新的子节点
                 *  -用法：父节点.appendChild(子节点)
                */
                li.appendChild(gzText);

                //获取id为city的节点
                var city = document.getElementById("city");

                //将广州节点添加到city下
                city.appendChild(li);

            });


            //将“广州”节点插入到#bj前面
            myClick("btn02", function () {
                //创建一个广州节点
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                //获取id为bj的节点
                var bj = document.getElementById("bj");

                //获取city
                var city = document.getElementById("city");

                /**
                 * inserBefore()
                 *  -可以在指定的子节点前插入新的子节点
                 *  -语法：
                 *      父节点.inserBefore(新节点,旧节点);
                */
                city.insertBefore(li, bj);

            });


            //使用“广州”节点替换#bj节点
            myClick("btn03", function () {
                //创建一个广州节点
                var li = document.createElement("li");
                var gzText = document.createTextNode("广州");
                li.appendChild(gzText);

                //获取id为bj的节点
                var bj = document.getElementById("bj");

                //获取city
                var city = document.getElementById("city");
                city.replaceChild(li,bj);
                /**
                 * replaceChild()
                 *  -可以使用指定的子节点替换已有的子节点
                 *  -语法：父节点.replaceChild(新节点，旧节点);
                */


            });


            //删除#bj节点
            myClick("btn04",function(){
                //获取id为bj的节点
                var bj = document.getElementById("bj");

                //获取city
                var city = document.getElementById("city");
                /**
                 * removeChild()
                 *  -可以删除一个子节点
                 *  -语法：父节点.removeChild(子节点);
                 * 
                 *  子节点.parentNode.removeChild(子节点)
                 *      -这种方式不用再去单独获取父节点，更常用
                */
                // city.removeChild(bj);
                
                bj.parentNode.removeChild(bj);

            });


            //读取#city内的HTML代码
            myClick("btn05",function(){                
                //获取city
                var city = document.getElementById("city");
                alert(city.innerHTML);
            });


            //设置#bj内的HTML代码
            myClick("btn06",function(){
                //获取bj
                var bj = document.getElementById("bj");
                bj.innerHTML = "成都";
            });

            //使用innerHTML方法添加广州
            myClick("btn07",function(){
                //向city中添加广州
                var city = document.getElementById("city");
                /**
                 * 使用innerHTML也可以完成DOM的增删改的相关操作
                 *  一般我们会两种方式结合使用
                */
                // city.innerHTML += "<li>广州<li>";
                    //这种方式相当于将原来的节点全部删除，然后全部重新创建
                    //如果原来的节点绑定了事件，则原来绑定的事件会失效
                    //所以不推荐使用

                //推荐使用下面的方法
                //创建一个li
                var li = document.createElement("li");
                //向li中设置文本
                li.innerHTML = "广州";
                //将li添加到city中
                city.appendChild(li);
            });

        };

        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        };
        

    </script>
</head>

<body>
    <div id="total">
        <div class="inner">
            <p>
                你喜欢哪个城市？
            </p>

            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>天津</li>
                <li>重庆</li>
            </ul>
        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">创建一个“广州”节点，添加到#city下</button></div>
        <div><button id="btn02">将“广州”节点插入到#bj前面</button></div>
        <div><button id="btn03">使用“广州”节点替换#bj节点</button></div>
        <div><button id="btn04">删除#bj节点</button></div>
        <div><button id="btn05">读取#city内的HTML代码</button></div>
        <div><button id="btn06">设置#bj内的HTML代码</button></div>
        <div><button id="btn07">创建一个“广州”节点，添加到#city下</button></div>
    </div>
</body>

</html>