JavaScript中document操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>
<body style="margin: 0">
    <div>
        <input type="button" value="添加" onclick="ShowModel();"/>
        <input type="button" value="全选" onclick="ChooseAll();"/>
        <input type="button" value="取消" onclick="CancleAll(); "/>
        <input type="button" value="反选" onclick="ReverseAll();"/>
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>

                </tr>
            </thead>

            <tbody id="tb">
                <tr>
                    <td>
                        <input  type="checkbox">
                    </td>
                    <td>
                        1.1.1.1
                    </td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="test"/></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!-- 遮罩层开始 -->
    <div id ='i1' class="c1 hide"></div>
    <!-- 遮罩层结束 -->
    <div id="i2" class="c2 hide">
        <p><input type="text"></p>
        <p><input type="text"></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确认"/>
        </p>
    </div>
    <!-- 弹出框结束 -->
    <script>
        function ShowModel() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
            
        }
        function HideModel() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
            
        }
        function ChooseAll() {
            var tbody= document.getElementById('tb');
            //获取所有的tr
            var tr_list = tbody.children;
            for (var i =0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox=current_tr.children[0].children[0];
                checkbox.checked=true
            }

            
        }
        function CancleAll() {
            var tbody = document.getElementById('tb');
             //获取所有的tr
            var tr_list = tbody.children;
            for (var i =0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked=false
            }
        }
        function ReverseAll() {
            var tbody = document.getElementById('tb');
            //获取所有的tr
            var tr_list = tbody.children;
            for (var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if(checkbox.checked){checkbox.checked=false;}else {checkbox.checked=true;}
            }


            
        }
    </script>

</body>
</html>

View Code

Dom操作
   1.找到标签
       获取单个元素
           document.getElementById('i1')
       获取多个元素（列表）
           document.getElementsByTagName('div')
       获取多个元素（列表）
           document.getElementsByClassName('c1')
       a.直接找：
                document.getElementById(arg)             // 根据ID获取一个标签对象
               document.getElementsByClassName(arg)     // 根据class属性获取标签对象集合
               document.getElementsByName(arg)       // 根据name属性值获取标签对象集合
               document.getElementsByTagName(arg)       // 根据标签名获取标签对象集合
       b.间接找
               tag=document.getElementById('i1')
               tag.parentElement           // 找当前标签对象的父标签对象
               tag.children                // 找当前标签对象的所有子标签对象
               tag.firstElementChild       // 找当前标签对象的第一个子标签对象
               tag.lastElementChild        // 找当前标签对象最后一个子标签对象
               tag.nextElementtSibling     // 找当前标签对象下一个兄弟标签对象
               tag.previousElementSibling // 找当前标签对象上一个兄弟标签对象


   2.标签操作
       获取标签中的文本内容
           标签.innerText

       对标签内部文本进行重新赋值

           标签.innerText =""
       b.classname
           tag.className=> 直接整体做操作
           tag.classList.add('样式名') 添加指定样式
           tag.classList.remove('样式名')删除指定样式
       c.checkbox
           //获取值
           checkbox.checked
           //赋值
           checkbox.checked = true

写的时候注意：

　　tbody要放在table下

JavaScript必须加分号