第六节 DOM操作应用

最新推荐文章于 2024-11-08 16:09:18 发布

weixin_30467087

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量70

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/han-bky/p/10093976.html

版权

创建、插入和删除元素

　　创建DOM元素：

　　　　createElement(标签名);　　//创建一个节点

　　　　appendChild(节点);　　　　//追加一个节点　　例如：document.body.appendChild(oDiv);　　//把div插入到body中，并且位于末尾

　　　　举例：为<ul>插入<li>，如上传文件时，即为创建一个DOM元素　　　　

var oBtn1=document.getElementById('btn1');
　　　　var oUl=document.getElementById('ul1');
　　　　var oTxt=document.getElementById('txt1');
　　　　//该点击事件相当于：点击第一次，新建一个标签；再点击，就会在其下面创建，一直点击，一直在最下面创建

　　　　oBtn.οnclick=function () {
　　　　　　 var oLi1=document.createElement('li'); //创建li标签
　　　　　　oLi1.innerHTML=oTxt.value; //输出li标签内的内容
　　　　　　oUl.appendChild(oLi1); //父级.appendChild(子节点); 在父级下创建子节点，每次创建的子节点都会往下排，第一次创建的在第一个位置，第二次创建的在第二个位置，依次类推
　　　　};　

　　　　<input id="txt1" type="text"/>
　　　　<button id="btn1">创建li</button>
　　　　<ul id="ul1"></ul>

　　插入元素

　　　　insertBefore(节点, 原有节点);　　//在原有的元素前插入节点，即在原有的标签前插入标签

　　　　举例：倒序插入<li>　　　　

var oBtn2=document.getElementById('btn2');

　　　　var oUl=document.getElementById('ul1');

　　　　var oTxt=document.getElementById('txt1');

　　　　//该点击事件相当于：点击第一次，在最上面新建一个标签，每次点击，都会在最上面创建标签
　　　　oBtn2.οnclick=function () {
　　　　　　var oLi2=document.createElement('li'); //创建li标签
　　　　　　var aLi=oUl.getElementsByTagName('li');
　　　　　　oLi2.innerHTML=oTxt.value; //输出li标签内的内容
　　　　　　//oUl.insertBefore(oLi2, aLi[0]); //父级.insertBefore(子节点, 在谁之前); 即在第一个位置插入li标签
　　　　　　//注意：上面一句语句在IE浏览器中会报错，因为ul标签内原本什么都没有，所以也就不存在第一个aLi[0]，所以报错，此时的解决办法为
　　　　　　if (aLi.length>0){
　　　　　　　　oUl.insertBefore(oLi2, aLi[0]);
　　　　　　} else {
　　　　　　　　oUl.appendChild(oLi2);
　　　　　　}
　　　 };　　　

　　　<input id="txt1" type="text"/>
　　　<button id="btn2">插入li</button>
　　　<ul id="ul1"></ul>

　　删除DOM元素：　　

　　　　removeChild(节点);　　//删除一个节点

　　　　举例：删除<li>，如上传文件时，又不想上传了，此时的删除按钮，即为把原来创建的DOM元素，给删除掉　　　　

//删除子节点
　　　　var aA=document.getElementsByTagName('a');
　　　　var oUl3=document.getElementById('ul3');

　　　　for (var i=0; i<aA.length; i++){
　　　　　　aA[i].onclick=function () {
　　　　　　　　// alert(this.parentNode); //返回[object HTMLLIElement]，表示<a>的父级为<li>
　　　　　　　　oUl3.removeChild(this.parentNode); //父级.removeChild()
　　　　　　};
　　　　}

　　　　<ul id="ul3">
　　　　　　<li>abcd<a href="javascript:;">删除</a></li>
　　　　　　<li>efg<a href="javascript:;">删除</a></li>
　　　　　　<li>hijk<a href="javascript:;">删除</a></li>
　　　　　　<li>lmn<a href="javascript:;">删除</a></li>
　　　　　　<li>opq<a href="javascript:;">删除</a></li>
　　　　　　<li>rst<a href="javascript:;">删除</a></li>
　　　　</ul>

　　查找DOM节点：getElementById()、getElementByTagName()

　　替换DOM节点：replaceChild(新标签, 原标签);　　//用新标签替换掉原有标签

　　　　var oSapn = document.createElement('span');　　var oBox = document.getElementById('div'); 　　document.body.replaceChild(oSpan, oBox);

　　新建、插入、删除综合实例：　　

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .oli{width: 300px; height: 35px; color: #FFFFFF; background-color: #004488; margin-bottom: 1px; padding-left: 20px; line-height: 35px;}
            a:link{color: #FFFFFF;}
            a:hover{color: #ff0099;}
        </style>
        <script>
            //方法一：这个要用事件代理，比较详细的解法如下：      ————网友1
            window.onload = function(){
                var oul_b1 = document.getElementById('oul_1');
                var oBat_a2 = document.getElementById('bat_a2');

                oBat_a2.onclick = function(){
                    var oli_b1 = document.createElement('li');
                    var text_b2 = document.getElementById('text_a2');
                    oli_b1.innerHTML = text_b2.value + "&nbsp;&nbsp;&nbsp;<a href='javascript:;'>删除</a>";
                    oul_b1.appendChild(oli_b1);
                    //下面的代码是给添加的li加一个class样式
                    var calss_li = oul_b1.getElementsByTagName('li');
                    for(var i=0;i<calss_li.length;i++){
                        //alert(calss_li[1].innerHTML);
                        calss_li[i].className = 'oli';
                    };

                    //下面是删除添加的li，错误示范
                    // var del_li = document.getElementsByTagName('a');
                    // alert('dsaf');
                    // for(var j=0;j<del_li.length;j++){
                    //     // alert(del_li.innerHTML);
                    //     del_li[i].onclick = function(){
                    //         // alert('ada');//测试
                    //         oul_b1.removeChild(this.parentNode); //删除oul_b1的子节点
                    //     };
                    // }
                    //错误原因：
                    //首先，添加完之后可以直接通过querySelector获取刚才添加的a标签
                    //这里循环是没必要的，而且你的循环会导致之前已经绑定过删除事件的元素又被绑一遍
                    //虽然没什么其他错，但却是无用功
                    oli_b1
                        .querySelector('a')
                        .addEventListener('click', function(){  //添加一个事件监听器
                             //然后就是这里的this指的是a标签，他的父节点才是li
                             //从ul里删除
                             oul_b1.removeChild(this.parentNode);
                        }, false);
                };
            };

            //方法二：其实和方法一一样，而且优点是代码简化很多     ————网友2
            window.onload=function(){
                document.getElementById('bat_a2').onclick = function(){
                    var val = document.getElementById('text_a2').value;
                    var text = '<li class="oli">' + val + "&nbsp;&nbsp;&nbsp;<a href='javascript:;'>删除</a></li>";
                    document.getElementById("oul_1").insertAdjacentHTML('beforeEnd', text);
                };
                document.getElementById("oul_1").addEventListener("click", function(e) {
                    if (e.target && e.target.nodeName == "A") {
                        document.getElementById("oul_1").removeChild(e.target.parentNode);
                    }
                });
            };
        </script>
    </head>
    <body>
        <input type="text" value="" id="text_a2" />
        <input type="button" value="添加LI" id="bat_a2" />
        <ul id="oul_1"></ul>
    </body>
</html>

getElementById('bat_a2').onclick = function(){ var val = document.getElementById('text_a2').value; var text = '<li class="oli">' + val + "   <a href='javascript:;'>删除</a></li>"; document.getElementById("oul_1").insertAdjacentHTML('beforeEnd', text); }; document.getElementById("oul_1").addEventListener("click", function(e) { if (e.target && e.target.nodeName == "A") { document.getElementById("oul_1").removeChild(e.target.parentNode); } }); }; </script> </head> <body> <input type="text" value="" id="text_a2" /> <input type="button" value="添加LI" id="bat_a2" /> <ul id="oul_1"></ul> </body></html>

文档碎片：

　　文档碎片可以提高DOM操作性能（理论上）

　　文档碎片的原理

　　document.createDocumentFragment();　　//基本已经不再使用了

　　需要说明的是：如果是在IE9及以上、FF、Chrome等高级浏览器中运行时，文档碎片其实几乎没有提高什么性能，有时还会拖延性能，但是在IE6-8等低级浏览器中文档碎片确实能相对提高那么一些性能。　　

window.οnlοad=function(){
　　　　var oUl=document.getElementById('ul1');
　　　　var oFrag=document.createDocumentFragment();

　　　　for (var i=0; i<10000; i++){　　　　//一次插入10000个标签
　　　　　　var oLi=document.createElement('li');
　　　　　　// oUl.appendChild(oLi); //相当于下面两句oFrag.appendChild(oLi);和oUl.appendChild(oFrag);
　　　　　 oFrag.appendChild(oLi);
　　　}
　　　oUl.appendChild(oFrag);
  };

<ul id="ul1"></ul>

转载于:https://www.cnblogs.com/han-bky/p/10093976.html