42-51

时间 2020-02-02

原文原文链接

Dom的使用

document用于调用并操做标签html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="i1">我是i1</div>

    <a>909</a>
    <a>abcdef</a>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="i1">我是i1</div>

    <a>909</a>
    <a>abcdef</a>
    <a>123456</a>

</body>
</html>

代码：定义几个标签数组

上图：
经过TagName获取的是数组，因此后面要根据下标获取标签。
可使用innerText来获取标签中的文本内容并对其修改。网络

上图：for循环多个a标签，并将其文本内容修改成777。ide

Dom查找

直接查找函数

document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取标签集合
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

间接查找工具

parentNode          // 父节点
childNodes          // 全部子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素
children                // 全部子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div>
        <div></div>
        <div>
            c1
        </div>
    </div>

    <div>
        <div></div>
        <div id="i1">
            c2
        </div>
    </div>

    <div>
        <div></div>
        <div>
            c3
        </div>
    </div>

</body>
</html>

上图：获取指定id标签数据；而且使用parentElement获取其父标签测试

上图：
prentElement.children 获取父标签的子标签
prentElement.previousElementSibling 获取父标签的上一个兄弟标签。编码

修改

上图：修改标签的className ='c1'，默认为空至关于新设定；部位空，就将className修改为c2。code

上图：将其className内容用列表的形式展示htm

上图：add 新增class名； remove 删除class名。

测试示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .hide{
            display: none;      /*默认让其隐藏*/
        }

        .c1{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: cornflowerblue;
            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();">      <!--点击添加后，触发函数-->
        <table>
            <thead>
                <tr>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <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');     /*将hide删除，这样就取消效果隐藏*/
            document.getElementById('i2').classList.remove('hide');
        }

        function HideModel() {
            document.getElementById('i1').classList.add('hide');        /*将hide添加，隐藏*/
            document.getElementById('i2').classList.add('hide');
        }
    </script>

</body>
</html>

上2图：点击添加就会弹出弹框，点击取消就会隐藏。

分号

function ReverseAll() {
            var tbody = document.getElementById('tb');
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];     /*当前的值是checkbox*/
                if(checkbox.checked){
                    checkbox.checked = false;
                }else {
                    checkbox.checked = true;
                }

            }
        }

代码：
上面的代码占用了多行，其实能够将多行的代码放在一行，这样就能够节省代码空间，使代码文件更小。
代码文件小在网络当中就会传输的快，同时在电脑上加载的也快。
这时为了区分代码，就须要使用分号将不一样的代码区分开。

上图：图中标记部分，就是将多行代码放到一行，而后用分号来区分开来，这样就能够节省代码文件的大小空间了。

咱们在编码的时候，能够将代码分为多行，这样逻辑上那看来更方便和整洁，但咱们也要用分号来区分，由于最后代码在上线的时候会使用上线工具将多行代码自动放在一行，若是没有使用分号的话，将会致使代码异常。

左侧菜单示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .hide{
            display: none;
        }

        .item .header{
            height: 35px;
            background-color: cornflowerblue;
            color: white;
            line-height: 35px;
        }
    </style>

</head>
<body>

    <div style="height: 48px;"></div>

    <div style="width: 300px">

        <div class="item">
            <div id="i1" class="header" onclick="ChangeMenu('i1');">菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>

        <div class="item">
            <div id="i2" class="header" onclick="ChangeMenu('i2');">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>

        <div class="item">
            <div id="i3" class="header" onclick="ChangeMenu('i3');">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>

        <div class="item">
            <div id="i4" class="header" onclick="ChangeMenu('i4');">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>

    </div>

    <script>
        function ChangeMenu(nid) {
            var current_header = document.getElementById(nid);  /*点击哪一个标签，就会相关标签字符串给传过来*/

            /*获得全部item标签*/
            var item_list = current_header.parentElement.parentElement.children;

            for(var i=0;i<item_list.length;i++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');   /*将每一个content标签 加上hide标签，这样会所有隐藏*/

            }

            /*这里将当前传进来的标签移出 hide 标签，这样就将内容展开了*/
            current_header.nextElementSibling.classList.remove('hide');

        }
    </script>

</body>
</html>

上图：点击哪一个菜单，就会展开其内容。

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。