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);//SPANalert(span1.nodeType);//1alert(span1.nodeValue);//null//属性节点对应的值var id1 = span1.getAttributeNode("id");alert(id1.nodeName);//idalert(id1.node;//2alert(id1.nodeValType)ue);//sid//获取文本var tex = span1.firstChild;//文本节点对应的值alert(tex.nodeName);//#textalert(tex.nodeType);//3alert(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()