javaWeb（四）----- DOM

每天都要努力的小頹廢呀發表於2020-12-03
JavaWeb

DOM的簡單學習

✔  功能：控制html文件的內容

✔  獲取頁面標籤(元素)物件Element：document.getElementById("id值") ； ---  通過元素的id獲取元素物件

✔  操作Element物件：

（1） 修改屬性值

         ①  明確獲取的物件是哪一個？

         ②  檢視API文件，找其中有哪些屬性可以設定

（2）修改標籤體內容：屬性 innerHTML

         ①  獲取元素物件

         ②  使用innerHTML屬性修改標籤體內容

 

DOM

✔  概念： Document Object Model 文件物件模型

     DOM將標記語言文件的各個組成部分封裝為物件，可以使用這些物件對標記語言文件進行CRUD的動態操作

 

✔  W3C DOM 標準被分為 3 個不同的部分：

（1）核心 DOM - 針對任何結構化文件的標準模型

        * Document：文件物件

        * Element：元素物件

        * Attribute：屬性物件

        * Text：文字物件

        * Comment：註釋物件

        * Node：節點物件，其他5個的父物件

（2）XML DOM - 針對 XML 文件的標準模型

（3）HTML DOM - 針對 HTML 文件的標準模型

 

✔  核心DOM模型：

（1）Document：文件物件

         ☛  建立（獲取）：在html dom模型中可以使用window物件來獲取

              ①  window.document

              ②  document

         ☛  方法：

              ①  獲取Element物件：

                   getElementById() ---  根據id屬性值獲取元素物件。id屬性值一般唯一

                   getElementsByTagName() ---  根據元素名稱獲取元素物件們。返回值是一個陣列

                   getElementsByClassName() ---  根據Class屬性值獲取元素物件們。返回值是一個陣列

                   getElementsByName() ---  根據name屬性值獲取元素物件們。返回值是一個陣列

              ②  建立其他DOM物件：

                   createAttribute(name)

                   createComment()

                   createElement()

                   createTextNode()

         ☛  屬性

（2）Element：元素物件

         ☛  建立（獲取）：通過document來獲取和建立

         ☛  方法：

                     removeAttribute() ---  刪除屬性

                     setAttribute() ---  設定屬性

（3）Node：節點物件，其他5個的父物件

         ☛  特點：所有dom物件都可以被認為是一個節點

         ☛  方法：

              ①  CRUD dom樹：

                    appendChild() ---  向節點的子節點列表的結尾新增新的子節點

                    removeChild() ---  刪除（並返回）當前節點的指定子節點

                    replaceChild() ---  用新節點替換一個子節點。

         ☛  屬性：parentNode 返回節點的父節點

 

▶ 案例：動態表格

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>動態表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>




</head>
<body>

<div>

    <input type="text" id="num" placeholder="輸入編號">
    <input type="text" id="name" placeholder=輸入姓名">
    <input type="text" id="gender" placeholder="輸入性別">
    <input type="button" id="btn" value="增加">
</div>

<table>
   <caption>學生資訊表</caption>
    <tr>
        <td>編號</td>
        <td>姓名</td>
        <td>性別</td>
        <td>操作</td>
    </tr>

    <tr>
        <td>1</td>
        <td>陳阿花</td>
        <td>女</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">刪除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>池小強</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">刪除</a></td>
    </tr>

   <tr>
       <td>3</td>
       <td>張大華</td>
       <td>女</td>
       <td><a href="javascript:void(0);" onclick="delTr(this)">刪除</a></td>
   </tr>
</table>

<script>
    /*
      分析：
      1.新增：
        ① 給新增按鈕繫結單擊事件
        ② 獲取文字框的內容
        ③ 建立td，設定td的文字為文字框的內容
        ④ 建立tr
        ⑤ 將td新增到tr中
        ⑥ 獲取table，將tr新增到table中
      2.刪除
        ① 確定點選的是哪一個"刪除"的超連結
        ② 怎麼刪除？ removeChild() ---  通過父節點刪除子節點

     */
    document.getElementById("btn").onclick = function(){
        // 獲取文字框的內容
        var num =document.getElementById("num").value;
        var name =document.getElementById("name").value;
        var gender =document.getElementById("gender").value;

        var td_num = document.createElement("td");
        var text_id = document.createTextNode(num);
        td_num.appendChild(text_id);

        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);

        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);

        var td_a = document.createElement("td");
        var ele_a = document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this)");
        var text_a = document.createTextNode("刪除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);


        var tr = document.createElement("tr");
        tr.appendChild(td_num);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);

        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);

    }
    
    // 刪除方法
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode ;
        table.removeChild(tr) ;
    }


</script>



</body>
</html>

 

✔  HTML DOM

（1）標籤體的設定和獲取：innerHTML

也可以用 innerHTML 來實現動態表格新增一行，只需要將上面程式碼中 script 標籤體中的部分內容做如下修改即可實現一樣的功能。

<script>
    /*
      分析：
      1.新增：
        ① 給新增按鈕繫結單擊事件
        ② 獲取文字框的內容
        ③ 建立td，設定td的文字為文字框的內容
        ④ 建立tr
        ⑤ 將td新增到tr中
        ⑥ 獲取table，將tr新增到table中
      2.刪除
        ① 確定點選的是哪一個"刪除"的超連結
        ② 怎麼刪除？ removeChild() ---  通過父節點刪除子節點

     */
    // 使用innerHTML新增一行（這個方法新增不是物件導向的）
    document.getElementById("btn").onclick = function(){

        var num =document.getElementById("num").value;
        var name =document.getElementById("name").value;
        var gender =document.getElementById("gender").value;
        var table = document.getElementsByTagName("table")[0];

        table.innerHTML += "<tr>\n" +
            "<td>"+num+"</td>\n" +
            "<td>"+name+"</td>\n" +
            "<td>"+gender+"</td>\n" +
            "<td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >刪除</a></td>\n" +
            "</tr>";
    }


    
    // 刪除方法
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode ;
        table.removeChild(tr) ;
    }


</script>

（2）使用html元素物件的屬性

（3）控制元素樣式

         ①  使用元素的style屬性來設定
            如：
                  div1.style.border = "1px solid red"；

                  div1.style.width = "200px"；

                  //font-size--> fontSize

                  div1.style.fontSize = "20px"；

          ②   提前定義好類選擇器的樣式，通過元素的className屬性來設定其class屬性值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>樣式控制</title>

    <style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;


        }
        .d2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
        
    </style>
</head>
<body>
    <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div>

    <script>
        var div1 = document.getElementById("div1");
        div1.onclick = function() {

            // 樣式1
            div1.style.border = "1px solid red" ;
            div1.style.width = "200px";
            div1.style.fontSize = "20px";
        }

        var div2 = document.getElementById("div2");
        div2.onclick = function() {
            // 樣式2
            div2.className = "d2" ;
        }



    </script>

</body>
</html>

 

相關文章