day04_元素案例

1.在末尾添加节点

    1.获取ul标签
    2.创建li标签
    3.创建文本
    4.把文本添加到li
    5.把li添加到ul

    var ul1 = document.getElementById("ulid");
    var li1 = document.createElement("li");
    var tex = document.createTextNode("6666");
    li1.appendChild(tex);
    ul1.appendChild(li1);

2.element对象

    获取属性值
    document.write(input1.className);
    document.write(input1.getAttribute("class"));
    设置属性值
    input1.setAttribute("class","8888");
    删除属性值
    input1.removeAttribute("class");

    获取标签下面的子标签的唯一办法：getElementsByTagName()
        var lis = input1.getElementsByTagName("li");
        document.write(lis.length);//0

3.Node对象属性

node…..

 //获取标签对象
var span1 = document.getElementById("sid"); 
//标签节点对应的属性值
alert(span1.nodeName);//SPAN
alert(span1.nodeType);//1
alert(span1.nodeValue);//null

//属性节点对应的值
var id1 = span1.getAttributeNode("id");
alert(id1.nodeName);//id
alert(id1.node;//2
alert(id1.nodeValType)ue);//sid

//获取文本
var tex = span1.firstChild;
//文本节点对应的值
alert(tex.nodeName);//#text
alert(tex.nodeType);//3
alert(tex.nodeValue);//00000

父节点：

    var li1 = document.getElementById("li12");
    var ul1 = li1.parentNode;
    document.write(ul1.id);

子节点：

    var ul1 = document.getElementById("ulid");
    var li1 = ul1.firstChild;
    var li4 = ul1.lastChild;
    document.write(li1.id);
    document.write(li4.id);

同辈节点：

    //获取上下兄弟节点
    var li3 = document.getElementById("li3");
    document.write(li3.nextSibling.id);
    document.write("<br/>");
    document.write(li3.previousSibling.id);

4.操作dom树

appendChild()方法：

1. 添加子节点到末尾
2. 类似于剪切黏贴的效果

insertBefore()添加标签：

    /*
      没有insertAfter()方法
     insertBefore(new,old);

    * 1.获取li3标签
    * 2.创建li
    * 3.创建文本
    * 4.把文本放入li
    * 5.获取ul
    * 6.把li放入ul，li5放到li3前面
    * */
    function insert1() {
        var li3 = document.getElementById("li3");
        var li5 = document.createElement("li");
        var te = document.createTextNode("哈哈哈");
        li5.appendChild(te);
        var ul1 = document.getElementById("ul1");
        ul1.insertBefore(li5,li3);
    }

removeChild()删除节点

    /*
    删除节点
    *1.获取li1标签
    *2.获取ul标签
    *3.通过父标签删除li1
    * */
    function delete1() {
        var li1 = document.getElementById("li1");
       // var ul1 = document.getElementById("ul1");
        var ul1 = li1.parentNode;
        ul1.removeChild(li1);
    }

replace()替换标签：

   /*
    * 1.获取li4标签
    * 2.创建li
    * 3.创建文本
    * 4.把文本放入li
    * 5.获取ul父标签
    * 6.执行替换操作
   * */
    function replace1() {

        var li4 = document.getElementById("li4");
        var li6 = document.createElement("li");
        var tex = document.createTextNode("嘿嘿嘿");
        li6.appendChild(tex);
        //var ul1 = li4.parentNode;
        var ul1 = document.getElementById("ul1");
        ul1.replaceChild(li6,li4);
    }

cloneNode()复制节点

            /*
             * 把ul复制到另外一个div中
             * 1.获取ul
             * 2.执行复制clonenode方法复制true
             * 3.把复制的内容放到div中
             *       --获取到div
             *       --appendChild方法
             * */
            function copy1() {
                var ul1 = document.getElementById("ul1");
                var ulcopy = ul1.cloneNode(true);
                var div2 = document.getElementById("div2");
                div2.appendChild(ulcopy);
            }

操作dom总结：

1. 获取节点使用方法
   getElementById();
   getElementsByName();
2. 插入节点使用方法
   insertBefore()
   appendChild()
3. 删除节点使用方法
   removeChild()
4. 替换节点使用方法
   replace()