一个DOM操作的题目

最新推荐文章于 2022-11-29 16:36:24 发布

SuperYuHuoFei

最新推荐文章于 2022-11-29 16:36:24 发布

阅读量517

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/SuperYuHuoFei/article/details/77483263

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!--
    题目：已知页面中有一个ul，下面已经有3个li标签，问：
    1. 如何再添加100个li元素？ 然后删掉次序为偶数的li？
    2. 如何给每个li添加一个onclick事件？
    3. 获取最后一个li并向其中添加<a>标签？

    要点：
    1. 先将li逐个添加至documentFragment中，再将documentFragment添加到ul中。
    2. 事件委托，注意浏览器兼容性。
    3. 获取最后一个元素用document.getElementsByTagName("ul")[0].lastElementChild，不要用lastChild，
    也可以先获取li的HTMLCollection集合，再取其下标为length-1的元素。
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <script>

        function test() {
            //批量添加100个<li>
            var oUl=document.getElementsByTagName("ul")[0];
            var tempNode=document.createDocumentFragment();
            var newLi;
            var newTxt;
            var eleCnt=oUl.childElementCount; // oUl.length动态更新，oUl.childElementCount并不会
            for(var i=1;i<101;i++){
                newTxt=i+eleCnt;
                newLi=document.createElement("li");
                newLi.innerHTML=newTxt;
                tempNode.appendChild(newLi);
            }
            oUl.appendChild(tempNode);

            // 批量删除次序为奇数的li
            //删除dom节点之前,一定要删除注册在该节点上的事件,不管是用observe方式还是用attachEvent方式注册的事件,
            // 否则将会产生无法回收的内存.
            // 批量删除前，先将元素隐藏，再进行删除操作，最后再显示元素。
            // 因对display:none的元素进行操作不会引起回流、重绘,所以整个操作只会有2次回流（display属性切换的时候）。
            oUl.style.display="none";

            var allLi=oUl.querySelectorAll('ul :nth-child(odd)'); // querySelectorAll方法返回值（NodeList类型）不会动态变化
            console.log(allLi);
            var len=allLi.length;
            while(len--){
                oUl.removeChild(allLi[len]);
            }

            oUl.style.display="block";


            //给所有的li添加onclick事件——定义时间处理函数
            function handleFn(e) {
                var ev=e||window.event;
                var targetNode=ev.target;
                if(targetNode.nodeName==="LI"){
                    console.log(targetNode.innerHTML);
                }
            }
            //给所有的li添加onclick事件——给父元素ul添加事件监听
            if(oUl.addEventListener){
                oUl.addEventListener("click",handleFn,false);
            }else{
                oUl.attachEvent("onclick",handleFn);
            }


            // 获取最后一个li
            var lastLi=oUl.lastElementChild; // 注意不能用lastChild

            // 向最后一个li中添加<a>标签及相关属性
            var oA=document.createElement("a");
            lastLi.appendChild(oA);
            oA.href="http://www.baidu.com/";
            oA.target="_blank";
            oA.innerHTML="我是超链接";

        }


    </script>
</head>
<body οnlοad="test()">
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>