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>

上圖：點擊哪一個菜單，就會展開其內容。

每日一句

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