Dom編程技術基礎總結

(1)dom概述
 (2)常見dom對象
window對象，location對象，History對象
(3)圖片輪播練習
 (4)定時彈出廣告練習
 (5)節點
 (6)表單校驗練習(節點)
(7)隔行換色練習
 (8)複選框練習(節點全選全不選)
(9)節點操作
創建節點，新增節點，刪除節點，替換節點
(10)與下拉框有關的兩個對象select/option
省市二級聯動

(1)dom概述

文檔對象模型（Document Object Model，簡稱DOM）:是Js操作HTML文檔的一種技術，是W3C組織推薦的處理可擴展標誌語言的標準編程接口。

dom將html標籤對象化，將網頁中的每一個元素都看作一個對象。
利用dom可以直接訪問所有的html對象，連同他們的文本和屬性，可以對其中的內容進行修改和刪除，也可以創建新的元素。

dom作用：參與制作動態網頁(其他前端技術還有vue，ng)。dom能夠在所有的瀏覽器上提供一種一致的方法通過代碼訪問html的結構和內容。

dom參與制作網頁動態的過程：在瀏覽器加載頁面時，瀏覽器會解析html頁面並創建包含html標籤所有元素的文檔的內部模型，自上而下依次來解析，當遇到Js時瀏覽器會使用dom來檢查其語法，然後執行。使用dom來檢查頁面，完成修改，從頁面接收一些事件或者是要求瀏覽器從外部服務器獲取一些其他的數據，當Js修改了dom時，瀏覽器就會隨着修改dom而動態的更新頁面，這樣dom就參與了頁面的動態製作。

(2)常見dom對象

window對象
loaction對象
History對象

<html>

<head>
    <title>dom編程</title>
    <mate charset="utf-8" />
    <script>
        window.onload = function load() {
            //window對象
            // window.alert("Pop-up box");
            // window.confirm("Confirmation box");
            // window.prompt("input box(確認框):");
            // indow.setInterval("method1()", 1000);
            window.setTimeout("method1()", 1000);

        }

        function method1() {
            location.href = "http://www.baidu.com";
            location.reload();
            // alert("Period週期");
        }
    </script>
</head>

<body onload="load()">
    <a href="Testdom1.html">跳轉</a>
    <input type="button" value="回退" onclick="window.history.back()" />
    <input type="button" value="前進" onclick="window.history.forward()" />
</body>

</html>

(3)練習:圖片輪播

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <script>
        window.onload = function () {
            window.setInterval("rotate()", 2000);
        }
        var i = 1;
        function rotate() {
            i++;
            if (i > 3) {
                i = 1;
            }
            var img = document.getElementById("輪播圖1");
            img.src = "image/輪播圖" + i + ".jpg";
        }
    </script>
</head>

<body>
    <img id="輪播圖1" src="image/輪播圖1.jpg" />
</body>

</html>

(4)練習:定時彈出廣告...

css的顯示和隱藏的屬性display
block:顯示元素
none:隱藏元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>廣告定時彈出/隱藏</title>
    <script>
        var time;
        window.onload = function () {
            time = window.setTimeout("show()", 2000);
        }
        //顯示圖片
        function show() {
            //獲得圖片元素對象
            var img = document.getElementById("img1");
            //設置css_style的display屬性
            img.style.display = "block";
            //顯示以後,立即清除時間定時,重新計時
            window.clearTimeout(time);
            //調用消失函數
            time = window.setTimeout("hide()", 2000);
        }

        //隱藏圖片
        function hide() {
            //找到對象
            var img = document.getElementById("img1");
            //設置css_style的display屬性
            img.style.display = "none";
            //令隱藏的定時器失效
            window.clearTimeout(time);
            //兩秒鐘之後再次喚醒show函數
            time = window.setTimeout("show()", 2000);
        }
    </script>
</head>

<body>
    <img id="img1" src="image/上級_自來也.jpg" />
</body>

</html>

(5)節點

文檔本身是文檔節點
所有HTML元素是元素節點
所有HTML屬性是屬性節點
HTML元素內的文本是文本節點
註釋是註釋節點

①獲取元素節點:

<html>

<head>
    <title>dom編程</title>
    <mate charset="utf-8" />
    <script>
        //初始化加載會執行onload
        window.onload = function load() {
            //1.通過ID獲得節點
            var spans1 = document.getElementById("span1");

            console.info(spans1);

            //2.通過標籤名獲得節點
            var spans2 = document.getElementsByTagName("span");
            console.info(spans2.length);
            for (var i = 0; i < spans2.length; i++) {
                console.info(spans2[i]);
            }

            //3.通過name屬性值獲得
            var spans3 = document.getElementsByName("sp");
            console.info(spans3.length);
        }

        function method1() {
            location.reload();
        }
    </script>
</head>

<body>
    <span id="span1" name="sp">span1</span>
    <span id="span2" name="sp">span2</span>
    <span id="span3" name="sp">span3</span>
</body>

</html>

②節點的屬性:

dom規定各種節點的type:

元素節點類型是1
屬性節點是2
文本節點是3
註釋節點是8
文檔節點是9

<html>

<head>
    <title>dom編程</title>
    <mate charset="utf-8" />
    <script>
        //初始化加載會執行onload
        window.onload = function load() {
            //1.通過ID獲得節點
            var spans1 = document.getElementById("span1");

            console.info(spans1);

            //2.通過標籤名獲得節點
            var spans2 = document.getElementsByTagName("span");
            console.info(spans2.length);
            for (var i = 0; i < spans2.length; i++) {
                console.info(spans2[i]);
            }

            //3.通過name屬性值獲得
            var spans3 = document.getElementsByName("sp");
            // console.info(spans3.length);
            //----獲得span3標籤中的文本信息.
            console.info(span3.innerText);
            //----獲取span3標籤中文本值和子標籤
            console.info(span3.innerHTML);
            //----獲取span3標籤的節點名稱/值/類型
            console.info(span3.nodeName + " " + span3.nodeValue + " " + span3.nodeType);


            //獲得子節點
            var div1 = document.getElementById("div1");

            //----獲得所有子節點,返回集合
            var childs = div1.childNodes;
            console.info(childs.length);//除了3個span標籤還有4個換行

            //----獲得頭尾節點
            console.info(div1.firstChild);
            console.info(div1.lastChild);
        }

        function method1() {
            location.reload();
        }
    </script>
</head>

<body>
    <div id="div1">
        <span id="span1" name="sp">&nbsp;span1</span>
        <span id="span2" name="sp">span2</span>
        <span id="span3" name="sp">span3</span>
    </div>
</body>

</html>

(6)節點練習:表單校驗

<!DOCTYPE html>
<html lang="en">

<head>
    <title>css練習</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
       function checkForm() {
            //獲得用戶名對象
            var username = document.getElementById("username");
            //---獲得用戶名輸入框中的value值
            var usernamevalue = username.value;
            if (usernamevalue == "") {
                //爲span設置提示語
                document.getElementById("usernameSpan").innerHTML = "<font color='red'> 用戶名不能爲空<font>";
            }

            //獲得密碼value
            var password = document.getElementById("password").value;
            if (password == "") {
                document.getElementById("passwordSpan").innerHTML = "<font color='red'>密碼不能爲空</font>";
            }
        }
    </script>
</head>

<body>
    <div style="height:600px;background-color: pink; ">
        <div
            style="border:5px solid gray; background-color: white; width:600px; position: absolute;left:350px;top:100px">
            <form action="" methon="post" name="form" onsubmit="return checkForm()">

                <table width="100%" cellspacing="15">

                    <!-- 文本框中readonly="readonly"只讀 -->
                    <tr>
                        <td>用戶名</td>
                        <td>
                            <input type="text" id="username" name="username" value="" /><span id="usernameSpan"></span>
                        </td>
                    </tr>

                    <!-- 密碼框 -->
                    <tr>
                        <td>密碼</td>
                        <td><input type="password" id="password" name="password" value="" />
                            <span id="passwordSpan"></span>
                        </td>
                    </tr>


                    <!-- 確認密碼 -->
                    <tr>
                        <td>確認密碼</td>
                        <td><input type="password" id="repassword" name="repassword" value=""></td>
                    </tr>

                    <!-- 性別 -->
                    <tr>
                        <td>性別</td>
                        <td>
                            <input type="radio" name="sex" value="man" checked="checked" />男
                            <input type="radio" name="sex" value="woman" />女
                        </td>
                    </tr>

                    <!-- 郵箱 -->
                    <tr>
                        <td>郵箱</td>
                        <td><input type="email" name="email"></td>
                    </tr>

                    <!-- 愛好 -->
                    <tr>
                        <td>愛好</td>
                        <td>
                            <input type="checkbox" name="hobby" value="sing" checked="checked" /> 唱歌
                            <input type="checkbox" name="hobby" value="dancing" /> 跳舞
                            <input type="checkbox" name="hobby" value="skiing" /> 滑雪
                        </td>
                    </tr>

                    <!-- 籍貫 -->
                    <tr>
                        <td>籍貫</td>
                        <td>
                            <select name="province" value="">
                                <option>-請選擇-</option>
                                <option>-河南省-</option>
                            </select>
                            <select name="city" value="">
                                <option>-請選擇-</option>
                                <option>-鄭州市-</option>
                                <option>-新鄉市-</option>
                            </select>
                        </td>
                    </tr>

                    <!-- 頭像 -->
                    <tr>
                        <td>頭像</td>
                        <td></td>
                    </tr>

                    <!-- 文本域簡介 -->
                    <tr>
                        <td>簡介</td>
                        <td>
                            <textarea name="info" id="" cols="5" rows="5"></textarea>
                        </td>
                    </tr>

                    <!-- 註冊,重置,按鈕 -->
                    <tr>
                        <td colspan="2">
                            <input type="button" value="註冊" onclick="checkForm()" />
                        </td>

                        <!-- <input type="submit" value="提交">
                        <input type="reset" value="重置"> -->
                    </tr>

                </table>
            </form>
        </div>
    </div>

</body>

</html>

(7)節點練習:隔行換色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function () {
            //獲得表格節點
            var tab = document.getElementById("tab1");

            //獲得行
            var l = tab.rows.length;
            for (var i = 0; i < l; i++) {
                if (i % 2 == 0) {
                    tab.rows[i].style.backgroundColor = "yellow";
                } else {
                    tab.rows[i].style.backgroundColor = "pink";
                }
            }
        }
    </script>
</head>

<body>
    <center>
        <h1>Js實現隔行換色</h1>
    </center>
    <table id="tab1" border="1" align="center" width="700px" height="200px">
        <tr style ="background-color: yellow">
            <td>序號</td>
            <td>學科</td>
            <td>描述</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Java</td>
            <td>萬物皆對象</td>
            <td><a href="#">修改</a>|<a href="#">刪除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>php</td>
            <td>php是最好的語言</td>
            <td><a href="#">修改</a>|<a href="#">刪除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Golang</td>
            <td>Golang發展前景巨大</td>
            <td><a href="#">修改</a>|<a href="#">刪除</a></td>
        </tr>
    </table>
</body>

</html>

(8)節點練習:複選框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>複選框練習</title>
    <script>
        window.onload = function () {
            //獲得表格節點
            var tab = document.getElementById("tab1");

            //獲得行
            var l = tab.rows.length;
            for (var i = 0; i < l; i++) {
                if (i % 2 == 0) {
                    tab.rows[i].style.backgroundColor = "yellow";
                } else {
                    tab.rows[i].style.backgroundColor = "pink";
                }
            }
        }
        function checkAll() {
            //獲得表頭行的複選  框
            var selectAll = document.getElementById("selectAll");
            //獲得表格體中的所有複選框
            var ids = document.getElementsByName("ids");
            //判斷總複選框是否被選中
            if (selectAll.checked == true) {
                //獲得表格體集合,全選
                for (var i = 0; i < ids.length; i++) {
                    ids[i].checked = true;
                }
            } else {
                for (var i = 0; i < ids.length; i++) {
                    ids[i].checked = false;
                }
            }
        }
    </script>
</head>

<body>
    <center>
        <h1>Js實現隔行換色</h1>
    </center>
    <table id="tab1" border="1" align="center" width="700px" height="200px">

        <thead>
            <tr>
                <th><input type="checkbox" id="selectAll" onclick="checkAll()" /></th>
                <th>序號</td>
                <th>學科</td>
                <th>描述</td>
                <th>操作</td>
            </tr>
        </thead>

        <tbody>

            <tr>
                <td><input type="checkbox" name="ids" /></td>
                <td>1</td>
                <td>Java</td>
                <td>萬物皆對象</td>
                <td><a href="#">修改</a>|<a href="#">刪除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox" name="ids" /></td>
                <td>2</td>
                <td>php</td>
                <td>php是最好的語言</td>
                <td><a href="#">修改</a>|<a href="#">刪除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox" name="ids" /></td>
                <td>3</td>
                <td>Golang</td>
                <td>Golang發展前景巨大</td>
                <td><a href="#">修改</a>|<a href="#">刪除</a></td>
            </tr>

        </tbody>
    </table>
</body>

</html>

(9)節點操作

創建節點/屬性
新增節點
刪除節點
替換節點

            //創建節點
            var newelmt = document.createElement("input");
            //爲節點創建屬性
            newelmt.setAttribute("type", "text");
            newelmt.value = "mary";
            newelmt.style.color = "red";
            newelmt.id = "new";
            //創建文本節點
            var textnode = document.createTextNode("這裏是文本");

            //在某個節點前添加節點
            div1.insertBefore(newelmt, span1);
            //在div節點後面添加子節點
            div1.appendChild(textnode);
            //刪除子節點
            div1.removeChild(textnode);
            //替換節點
            div1.replaceChild(textnode, span1);

(10) 與下拉框有關的兩個對象select/option

①select對象

②option對象

③select/option練習:省市二級聯動

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>省市二級聯動</title>

    <script>
        function getShi(index) {
            //獲得市的下拉列表對象
            var shi = document.getElementById("shi");
            //清空市的選項
            if (index != "") {
                shi.options.length = 0;
            }
            //定義省市二維數組
            var arrs = new Array(3);
            arrs[0] = ["杭州市", "紹興市", "嘉興市", "義烏市"];
            arrs[1] = new Array("南京市", "蘇州市", "揚州市", "無錫市");
            arrs[2] = new Array("武漢市", "襄陽市", "荊州市", "宜昌市");

            for (var i = 0; i < arrs[index].length; i++) {
                var option = new Option(arrs[index][i], i);
                shi.add(option);
            }
        }
    </script>
</head>

<body>
    <h1>省市二級聯動</h1>
    籍貫:
    <select name="sheng" onchange="getShi(this.value)">
        <option value="">請選擇</option>
        <option value="0">浙江省</option>
        <option value="1">江蘇省</option>
        <option value="2">湖北省</option>
    </select>

    <select id="shi">
        <option>請選擇</option>
    </select>
</body>

</html>

Dom編程技術基礎總結

(1)dom概述

(2)常見dom對象

(3)練習:圖片輪播

(4)練習:定時彈出廣告...

(5)節點

(6)節點練習:表單校驗

(7)節點練習:隔行換色

(8)節點練習:複選框

(9)節點操作

(10) 與下拉框有關的兩個對象select/option

③select/option練習:省市二級聯動

Linux之JavaEE環境搭建 |JDK安裝 |Tomcat安裝 |Eclipse安裝 |MySQL安裝

Linux |網絡配置 |進程管理 |服務管理

Linux |定時任務調度 |磁盤分區和掛載

Linux |組管理與權限管理

碼住! 超實用的Linux指令大全

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結