JavaScript笔记03

1.案例一：在末尾添加节点
    第一步：获取到ul标签
    第二部：获取到li标签
        document.createElement("标签名称")方法
    第三步： 创建文本
        document.createTextNode("文本内容")
    第四步：把文本添加到li下面
        使用appendChild()方法
    第五步：把li添加到ul末尾
        使用appendChild()方法

2.元素对象（element对象）
    要操作element对象，首先必须要获取到element,
        使用document里面相应的方法获取
    方法：
        获取属性里面的值
            getAttribute（"属性名称"）
                    var input1 = document.getElementById("inputid");
                    //alert(input1.value);
                    alert(input1.getAttribute("value"));
        设置属性的值
            input1.setAttribute("class","haha");
        删除属性
            input1.removeAttribute("name");
            不能删除value
    想要获取标签下面的子标签
        使用属性 childNodes，但是这个属性兼容性很差，一般不使用
        获得标签下面子标签的唯一有效办法：getElementsByTagName
                var ul11 = document.getElementById("ulid1");
                //获取ul下面的子标签
                // var lis=ul11.childNodes;
                // alert(lis.length);
                var lis=ulid1.getElementsByTagName("li");
                alert(lis.length);

3.Node对象的属性一
    nodeName
    nodeType
    nodeValue
    使用dom解释html的时候，需要html 里面的标签、属性、文本都封装成对象。他们各自对应上面三种对象都有不同的值。

    标签节点对应的值
        nodeType : 1
        nodeName : 大写的标签名称
        nodeValue : null
    属性节点对应的值
        nodeType : 2
        nodeName : 属性的名称
        nodeValue : 属性的值
    文本节点对应的值
        nodeType : 3
        nodeName : #text
        nodeValue : 文本内容

4.Node对象的属性二
        <ul>
            <li>CCBZ</li>
            <li>CBZZ</li>

        </ul>
    父节点
        ul是li的父节点
        parentNode
    子节点
        li是ul的子节点
        childNodes 得到所有的子节点，但是兼容性很差
        firstChild 第一个子节点
                    var ul1 = document.getElementById("ulid");
                    var li1 = ul1.firstChild;
                    alert(li1.id);
        lastChild  最后一个子节点
                    var ul1 = document.getElementById("ulid");
                    var li1 = ul1.lastChild;
                    alert(li1.id);
    同辈节点
        li直接关系是同辈节点
        nextSibling : 返回给定节点的下一个兄弟节点
                    var li3=document.getElementById("li3");
                    alert(li3.nextSibling.id);
        previousSibling : 返回给定节点的上一个兄弟节点
                    var li3=document.getElementById