原生DOM操作两个栗子，关于折叠内容和批量删除

Posted 超小级小萝莉

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生DOM操作两个栗子，关于折叠内容和批量删除相关的知识，希望对你有一定的参考价值。

批量删除处理上次的全选事件

 <script>
var delete=document.getElementById("btn_delete");
    delete.onclick=function() {
        var flag=window.confirm("你确定要删除吗？");
        if(flag==true) {
            var selNum = document.querySelectorAll("input.checkinfo[type=‘checkbox‘]");
            for(var i=selNum.length-1; i>=0;i--)  {
                if(selNum[i].checked == true)  {
                      var td=selNum[i].parentNode;
                      var tr=td.parentNode;                     
                      var trs=tr.parentNode;                      
                      trs.removeChild(tr);
                 }
            } 
        }
    }
}
 </script>

 

折叠与展开内容

第一种是菜单栏与子菜单，主要是div设置display属性

    <table>
 <tr>
  <td>
      <div class="up" onclick=show("a0")><a href="#">菜单一</a></div>
      <div onmouseover=high() onmouseout=low() id="a0" style="display:none">
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
      </div>
  </td>
 </tr>
 <tr>
  <td>
    <div class="up" onclick=show("a1")><a href="#">菜单二</a></div>
    <div onmouseover=high() onmouseout=low() id="a1" style="display:none">
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
        <li class="innerClass">子菜单</li>
      </div>
  </td>
 </tr>
 
 </table>
 <script>
function show(div){
     if(document.all(div).style.display==‘none‘) {
         document.all(div).style.display=‘block‘;
     }
    else { document.all(div).style.display=‘none‘;
    }
 }
function high() {
if (event.srcElement.className=="innerClass") {
    event.srcElement.style.background="gray";
    event.srcElement.style.color="red";
    }
}
function low(){
if (event.srcElement.className=="innerClass"){
    event.srcElement.style.background="#C4BCB7"
    event.srcElement.style.color="green"
    }
}
 </script>

第二种情况是菜单项里嵌套一系列子菜单，如果按照前一种方式就会很麻烦了，在所有父菜单都要绑定事件，所以用DOM节点操作就很省事啦，（元素匹配的是加减图标）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>    
ul {
    list-style: none;
}
 ul a {
    text-decoration: none;
    color: #333333;
    padding: 0px ;
    background-color: #919AB0;
    background:  no-repeat 0 2px;
    }
 ul a:hover {
    color:white;
    text-decoration: none;
    background-color: #919AB0;
    background-position: 5px 100%;
}
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="images/bt1.png" ><span class="Fliat"> <a href="#">父菜单</a></span>
                <ul>
                    <li><img src="images/bt1.png">
                        <span><a href="#">子菜单</a></span>
                            <ul>
                                <li><a href="#">孙菜单</a></li>
                                <li><a href="#">孙菜单</a></li>
                                <li><a href="#">孙菜单</a></li>
                                <li><a href="">孙菜单</a></li>
                                <li><a href="">孙菜单</a></li>
                            </ul>
                    </li>
                    
                    <li>子菜单</li>
                </ul>    
            </li>
        </ul>
 <script>
document.onclick=function(evt){
    var target=evt.target;
    if(target.matches("ul li img")) {
        var node=target.nextElementSibling.nextElementSibling;
        var display=node.style.display;
        if(display=="none"){
            node.style.display="block";
            target.setAttribute("src","images/bt1.png");
        } else{
            node.style.display="none";
            target.setAttribute("src","images/bt2.png");
        }
    }    
}
 </script>
</body>
</html>

 

以上是关于原生DOM操作两个栗子，关于折叠内容和批量删除的主要内容，如果未能解决你的问题，请参考以下文章

原生JS实现的DOM操作笔记（草稿整理）

vue如何监听到原生js删除dom结点

MySQL进阶19--函数的创建(举例)/设置mysql的创建函数的权限/查看(show)/删除(drop) / 举4个栗子

PHP原生DOM对象操作XML'代码'

举个栗子！Tableau 技巧（69）：巧用 折叠菜单 隐藏筛选器和图例

DOM扩展