【JavaScript从入门到精通】第十二课 DOM操作应用

此内容来自开课吧石川微信公众号

上节课大家已经掌握了DOM的基础,这节课开始我们开始学习DOM的一些操作和应用。

创建、插入和删除元素

如上图所示,当我们向邮箱里拖入一个文件时,页面会自动添加标签存放文件信息,实际上这个标签并不是提前写好的,而是在文件拖拽入邮箱后使用JS生成。因此,我们可以用JS创建并插入DOM元素,同时也可以对DOM元素进行删除。

用于创建DOM元素的方法为:createElement(),在元素创建后存放在内存中,而如果想将元素插入到页面则需要用到插入DOM元素的方法:appendChild()(实际上是将元素作为子节点插入)代码如下:

<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
</head>
<body>
    <input id="btn1" type="button" value="创建li"/>
    <ul id="ul1">
        
    </ul>
</body>
</html>
window.onload = function () {
    var oBtn = document.getElementById('btn1');
    var oUl = document.getElementById('ul1');

    oBtn.onclick = function () {
        var oLi = document.createElement('li');

        //父级.appendChild(子节点);
        oUl.appendChild(oLi);
    };
};

效果如下:

【JavaScript从入门到精通】第十二课 DOM操作应用

现在我们创建的元素都是空标签,如果我们想创建含有内容的元素应该怎么办呢?试想这么一个例子,我们给页面添加一个文本框,希望点击创建后出现的li标签内能够含有文本框内的文字,这应该怎么做到?实际上也很简单,当我们创建了一个li标签后,将其innerHTML属性设为文本框中的文字之后再插入就可以了。

<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
</head>
<body>
    <input id="txt1" type="text"/>
    <input id="btn1" type="button" value="创建li"/>
    <ul id="ul1">
        
    </ul>
</body>
</html>
window.onload = function () {
    var oBtn = document.getElementById('btn1');
    var oUl = document.getElementById('ul1');
    var oTxt = document.getElementById('txt1');
    oBtn.onclick = function () {
        var oLi = document.createElement('li');
        oLi.innerHTML = oTxt.value;
        oUl.appendChild(oLi);
    };
};

效果如下:

【JavaScript从入门到精通】第十二课 DOM操作应用

这里我们做的效果类似于发送微博,评论等。但我们都知道,在发送这些信息时,时间靠后的信息都是排在上方,而我们则相反是排在下方。我们是否有办法将元素插在开头而不是末尾呢?

这里就要用到我们另一个一个插入元素的方法:insertBefore()。他与appendChild相同,都是使用父级元素调用它,同时参数都是子节点,但insertBefore()还有第二个参数,这个参数代表了它插入元素的位置:在某个元素之前。

<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
<body>
    <input id="txt1" type="text"/>
    <input id="btn1" type="button" value="创建li"/>
    <ul id="ul1">
        
    </ul>
</body>
</html>
window.onload = function () {
    var oBtn = document.getElementById('btn1');
    var oUl = document.getElementById('ul1');
    var oTxt = document.getElementById('txt1');

    oBtn.onclick = function () {
        var oLi = document.createElement('li');
        var aLi = oUl.getElementsByTagName('li');

        oLi.innerHTML = oTxt.value;

        //父级.appendChild(子节点);
        //oUl.appendChild(oLi);
        if (aLi.length > 0) {
            oUl.insertBefore(oLi, aLi[0]);
        }
        else {
            oUl.appendChild(oLi);
        }
    };
};

insertBefore的第二个参数aLi[0]代表的是ul里的第一个li标签,每次插入都是在第一个标签之前插入。但由于第一次插入的时候,ul里没有li标签,所以如果直接使用insertBefore的话会出现错误,因此需要对aLi的长度进行判断,如果长度为0使用appendChild插入,大于0则使用insertBefore插入。

和创建与插入相对的,删除DOM元素的方法为:removeChild()。同样地,它也是由父级节点调用的,参数为需要移除的节点。

<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
</head>
<body>
    <ul id="ul1">
        <li>asfasd <a href="javascript:;">删除</a></li>
        <li>5645 <a href="javascript:;">删除</a></li>
        <li>ghdfjgj <a href="javascript:;">删除</a></li>
        <li>mvbnmvnb <a href="javascript:;">删除</a></li>
    </ul>
</body>
</html>
window.onload = function () {
    var aA = document.getElementsByTagName('a');
    var oUl = document.getElementById('ul1');
    for (var i = 0; i < aA.length; i++) {
        aA[i].onclick = function () {
            oUl.removeChild(this.parentNode);
        };
    }
};

效果如下:

【JavaScript从入门到精通】第十二课 DOM操作应用

文档碎片

我们每次去超市买东西,都是用袋子一次性把所有东西运回来,而不可能选择每次只拿一样东西。而当我们向页面插入元素的时候,每插入一个元素,页面就会渲染一次,但当我们要插入过多元素的时候,页面渲染的次数会使得DOM的操作性能降低。而在这个过程中,文档碎片就类似于一个我们买东西的袋子,我们每次创建好一个元素的时候,不直接插入页面中,而是插入文档碎片里,最后再一次性地把所有元素插入页面中,这样页面只需要渲染一次,极大地提高了性能。插入之后文档碎片会自动消失。 例如,我们写这么一个页面:

<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
</head>
<body>
    <ul id="ul1">
        
    </ul>
</body>
</html>
window.onload = function () {
    var oUl = document.getElementById('ul1');

    for (var i = 0; i < 10000; i++) {
        var oLi = document.createElement('li');

        oUl.appendChild(oLi);
    }
};

我们向页面插入了10000个li标签,使用浏览器打开这个网页的速度会比较慢,所以需要用到文档碎片。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>无标题文档</title>
</head>
<body>
    <ul id="ul1">
        
    </ul>
</body>
</html>
window.onload = function () {
    var oUl = document.getElementById('ul1');
    var oFrag = document.createDocumentFragment();

    for (var i = 0; i < 10000; i++) {
        var oLi = document.createElement('li');

        oFrag.appendChild(oLi);
    }

    oUl.appendChild(oFrag);
};

使用createDocumentFragment创建文档碎片,然后将li标签放入文档碎片中,最后再一次性将文档碎片插入网页。

如需转载,烦请注明出处:https://www.qdskill.com/javascript/519.html

发表评论

登录后才能评论