zoukankan      html  css  js  c++  java
  • 删除DOM节点应用

    <!-- HTML结构 -->
    <ul id="test-list">
        <li>JavaScript</li>
        <li>Swift</li>
        <li>HTML</li>
        <li>ANSI C</li>
        <li>CSS</li>
        <li>DirectX</li>
    </ul>

    删除与web开发无关的节点

    方法一:

    document.querySelectorAll("#test-list li").forEach(function(e){console.log(e.innerHTML);
    if(['Swift','ANSI C','DirectX'].indexOf(e.innerHTML)>-1)e.remove();
    });

    方法二:

    var li = document.getElementById("test-list")
    Array.from(li.children).filter(x=>!['JavaScript', 'HTML', 'CSS'].includes(x.innerHTML)).forEach(x=>li.removeChild(x))

    方法三:

    var web = ["JavaScript", "HTML", "CSS"];
    var ul = document.getElementById("test-list");
    var arrLi = ul.children;
    
    for (var item of arrLi) {
      if (web.indexOf(item.innerText) === -1) {
        ul.removeChild(item);
      }
    }

    方法一跟二都比较简练。

    测试:

    ;(function () {
        var
            arr, i,
            t = document.getElementById('test-list');
        if (t && t.children && t.children.length === 3) {
            arr = [];
            for (i = 0; i < t.children.length; i ++) {
                arr.push(t.children[i].innerText);
            }
            if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
                alert('测试通过!');
            }
            else {
                alert('测试失败: ' + arr.toString());
            }
        }
        else {
            alert('测试失败!');
        }
    })();

    内容摘自https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001435997163473d309006809fa43abbba322be3eb090a8000

  • 相关阅读:
    <unittest学习8>unittest生成测试报告
    <unittest学习7>unittest的封装方法
    <unittest学习6>unittest多种加载用例方法
    <unittest学习5>unittest的几种执行方式和java的junit的很像
    <unittest学习4>跳过用例
    实验3.1
    I
    大数据运维---Zookeeper学习
    裸金属纳管
    一次Linux系统被攻击的分析过程
  • 原文地址:https://www.cnblogs.com/Dong-Ge/p/7607775.html
Copyright © 2011-2022 走看看