DOM元素

Posted Me*淡定

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM元素相关的知识,希望对你有一定的参考价值。

元素的三种创建方法
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"
                }
            }
        }

 

 在线用户

 

 

以上是关于DOM元素的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的DOM操作

JavaScript单行代码,也就是代码片段

JS常用代码片段2-值得收藏

JS常用代码片段2-值得收藏

从 DOM 中读取 HTML 片段并向其中添加自定义数据

前端开发常用js代码片段