JavaScript练习：在末尾添加节点、元素对象（element）、Node对象属性

JavaScript练习：在末尾添加节点、元素对象（element）、Node对象属性

19、练习1：在末尾添加节点
        1）获取ul标签
        2）创建li标签
            document.createElement("标签名称");
        3）创建文本
            document.createTextNode("文本内容");
        4）把文本添加到li下面
            使用appendChild();
        5）把li添加到ul末尾
            使用appendChild();

20、元素对象（element）
        ** 要操作element，首先必须要先获取到element
                -使用document中的相应方法获取

        ** 方法
                *** 获取属性里面的值
                        getAttribute("属性名称");
                        - var input=document.getElementById("inputid");
                        //alert(input.value);
                        alert(input.getAttribute("value"));

                *** 设置属性的值
                        input.setAttribute("class","haha");

                *** 删除属性
                        input.removeAttribute("name");

                        * 不能删除value

            ** 获取标签下的子标签

                *** 使用属性 childNodes 但是这个属性的兼容性很差
                        var ul=document.getElementById("ulid");
                        //获取ul下的子标签
                        var lis=ul.childNodes;
                        alert(lis.length);
                *** 获得标签下面子标签的唯一有效办法，使用getElementsByTagName方法
                        var ul=document.getElementById("ulid");
                        //获取ul下的子标签
                        var lis=ul.getElementsByTagName("li");
                        alert(lis.length);

21、Node对象属性
            * nodeName
            * nodeType
            * nodeValue

            * 使用dom解析html对象的时候，需要把html里面的标签、属性和文本都封装成对象
            * 标签节点对应的值
                    nodeType：1
                    nodeName：大写的标签名称 比如 SPAN
                    nodeValue：null

            * 属性节点对应的值
                    nodeType：2
                    nodeName：属性名称
                    nodeValue：属性的值

            * 文本节点对应的值
                    nodeType：3
                    nodeName：#text
                    nodeValue：文本内容

            <ul>
                <li>aaaa</li>
                <li>bbbb</li>
            </ul>

            * 父节点 
                - ul是li的父节点
                - parentNode
                var li= document.getElementById("li");
                var ul=li.parentNode;
                alert(ul.id);

            * 子节点
                - li是ul的子节点
                - childNodes：得到所有子节点，但是兼容性较差

                - firstChild：获取第一个子节点
                    var ul=document.getElementById("ulid");
                    var li=ul.firstChild;
                    alert(li.id);

                - lastChile:获取最后一个子节点
                    var ul=document.getElementById("ulid");
                    var li=ul.lastChild;
                    alert(li.id);

            * 同辈节点（兄弟节点）
                - li直接关系是同辈节点
                - nextSibling：返回一个给定节点的下一个兄弟节点
                previousSibling：返回一个给定节点的上一个兄弟节点

                var li=document.getElementById("li");
                alert("li.nextsibling.id");
                alert("li.previousSibling");

22、操作dom树
        ** appendChild();
                - 添加子节点到末尾
                - 特点：类似于剪切粘贴的效果

        ** insertBefore(newNode,oldNode);
                - 在某个节点之前插入一个新的节点，通过父节点来调用
                - 两个参数

                - 插入新的节点，步骤如下
                    1、创建标签
                    2、创建文本
                    3、把文本添加到标签下面

                    var li3=document.getElementById("li3");
                    var li5=document.createElement("li");   //创建新的标签，命名为li5
                    var text5=document.createTextNode("aaa");
                    li5.appendChild("text5");
                    var ul=document.getElementById("ul");
                    ul.insertBefore(li5,li3);   //通过父节点来调用

                ** 但是没有insertAfter();方法

                ** removeChild()方法：删除节点
                        - 通过父节点删除，不能自己删除自己

                        var li=document.getElementById("li");
                        var ul=document.getElementById("ul");
                        ul.removeChild(li);

                ** replaceChild(newNode,oldNode); 替换节点
                        - 通过父节点替换，不能自己删除自己
                        - 两个参数

                        var oldLi=document.getElementById("li");
                        var newLi=document.createElement("li");
                        var newText=document.createTextNode("这是新节点");
                        newLi.appendChild(newText);
                        var ul=document.getElementById("ul");
                        ul.replaceChild(newLi,oldLi);

                ** cloneNode(boolean); 复制节点
                        1、获取到ul
                        2、执行复制方法 clonNode 方法复制 true
                        3、把复制之后的内容放到p里面去
                            1）获取到p
                            2）appendChild();
                        var ul=document.getElementById("ulid");
                        var ulcopy=ul.cloneNode(true);
                        var p=document.getElementById("pid");
                        p.appendChild("ulcopy");

                ** dom总结
                    - 获取节点
                            getElementById();通过节点的id属性，查找对应节点
                            getElementsByName();通过节点的name属性，查找对应节点
                            getElementsByTagName();通过节点名称，查找对应节点
                    - 插入节点
                            insertBefore():在某个节点之前插入
                            appendChild():在末尾添加，相当于剪切粘贴
                    - 删除节点
                            removeChild():通过父节点删除
                    - 替换节点
                            replaceChild():通过父节点替换

23、innerHTML属性
        * 这个属性不是dom的组成部分，但是大多数浏览器都支持，兼容性强

        作用1：获取文本内容
            ** //获取span标签的内容
            var span1=document.getElementById("spanid");
            alert(span1.innerHTML);
        作用2：向标签里面设置内容（可以是html代码）
            ** //向p里面设置内容
            var p=document.getElementById("pid");
            p.innerHTML="<h1>aaa</h1>";
            或者
            var p=document.getElementById("pid");
            var h="<h1>aaa</h1>";
            p.innerHTML=h;

24、练习：动态显示时间
        * 得到当前时间
                var date=new Date();
                var d1=date.toLocaleString();
        * 需要让页面每一秒钟获取时间
                setInterval() 定时器
        * 显示到页面上
                每一秒向p里面写一次时间
                    * 使用innerHTML属性
        * 代码

            function getDate(){
                //当前时间
                var date=new Date();
                //格式化
                var d1=date.toLocaleString();
                //获取p
                var p1=document.getElementById("times");
                p1.innerHTML=d1;
            }
            //使用定时器实现每一秒写一次时间
            setInterval("getDate();",1000);