DOM元素

Posted 2020-10-07 Me*淡定

元素的三种创建方法

1、doumrnt.write（可以写类名，各种表情属性）

      script写在哪里就创建在哪

<button>点我</button>
<script>
    document.write("<li class=\'kk\'>生活</li>")
</script>
<button>点我</button>

　　

弊端：把原来的内容替换掉

var but=document.getElementsByTagName("button")[0];
    //console.log(document.write);是一个函数
    but.onclick=function () {
        document.write("<li class=\'kk\'>生活</li>");
    }

　2、事件源.innerhtml +="<li></li>"(经常用，写上 + 号，原来的内容不会被替换)　

ul.innerHTML+="<li class=\'kk\'>生活</li>"

 

 3、利用dom的api创建元素

        appendChild(“ 添加的元素 ”)  在父元素最后面添加元素

        insertBefore(“ 添加的元素 ”，“添加的位置”) 指定位置添加

//利用dom的api创建元素  把创建的元素放在变量里
    var newLi=document.createElement("li");
    var newL=document.createElement("li");
    //赋值
        newLi.innerHTML="我是createElement创建的";
        newL.innerHTML="我是appendChild创建的";
    //添加到ul原来里面
        ul.appendChild(newL);
    //指定位置添加
    var firUl=ul.firstElementChild || ul.firstChild;
        ul.insertBefore(newLi,firUl)

删除 替换 克隆节点

1、removeChild 删除节点

ul.removeChild(li3)

2、replaceChild（"新节点"，“旧节点”）替换节点（用的少）

ul.replaceChild(li3,li2)

3、克隆node.cloneNode(true)

//克隆li2标签 li2.cloneNode(true);深层复制。
    for(var i=0; i<3; i++){
        var clLi=li2.cloneNode(true);
        ul.appendChild(clLi)
    }

 

案例

点击按钮添加li列表，鼠标放上去高亮显示（鼠标离开也会有一个亮）

//需求:点击列表，添加四大美女，然后鼠标放到谁上面，谁高亮显示
        //思路：创建一个数组，添加内容。利用for循环创建li标签添加到ul里面
        //步骤：（指定多少个元素的创建最好用for循环）
        var but=document.getElementsByTagName("button")[0];
        var arr=["昭君","西施","贵妃","貂蝉"];
        var ul=document.getElementsByTagName("ul")[0];
        but.onclick=function(){
            ul.innerHTML="";//只添加一次 原理，每次循环清空了在添加
            for(var i=0; i<arr.length; i++){
                var li=document.createElement("li");
                li.innerHTML=arr[i];
                ul.appendChild(li);
            }
            //获取所有的Li标签然后，为他绑定事件，排他思想，高亮显示
            var liArr=ul.children;
            for(var i=0; i<liArr.length; i++){
                liArr[i].onmouseover=function(){
                    for(var j=0; j<liArr.length; j++){
                        liArr[j].style.background=""
                    }
                    this.style.background="red"
                }
            }
        }

 

 在线用户