JavaScript基礎(13_宿主物件DOM)

阿新 • • 發佈：2020-09-20

宿主物件DOM

DOM

Document Object Model 文件物件模型
常用節點分為四類：
- 文件節點：整個HTML文件
  - nodeName：#document
  - nodeType：9
  - nodeValue：null
- 元素節點：HTML文件中的HTML標籤
  - nodeName：標籤名
  - nodeType：1
  - nodeValue：null
- 屬性節點：元素的屬性
  - nodeName：屬性名
  - nodeType：2
  - nodeValue：屬性值
- 文字節點：HTML標籤中的文字內容
  - nodeName：#text
  - nodeType：3
  - nodeValue：文字內容

文件的載入

onload事件會在整個頁面載入完成之後才會觸發
- 為window繫結onload事件
- 該事件對應的響應函式將會在頁面載入完成之後執行
- 這樣可以確保程式碼執行時，所有的DOM物件已經載入完畢了

瀏覽器在載入一個頁面時，是按照自上向下的順序進行載入的。
- 讀取到一行就執行一行，如果將script標籤寫到頁面上邊
- 在程式碼執行時，頁面還沒有完成載入，所以在js程式碼中可能還沒有找到這個元素/節點

window.onload = function () {
  var btn = document.getElementById("btn");
  btn.onclick  
= function () {
    alert("這樣就行了！");
  };
}

DOM物件呼叫的方法

獲取元素(標籤)節點
通過document物件呼叫的方法
- getElementById() 通過id屬性獲取一個元素點物件
- getElementsByTagName() 通過標籤名獲取一組元素節點物件
  - 返回一個類陣列物件，所有查詢到的元素都會封裝到物件中
- getElementsByName() 通過name屬性獲取一組元素節點物件
- innerHTML 通過這個屬性可以獲取到元素內部的html程式碼（不適合自結束標籤）
- 讀取元素的屬性，直接可以用語法：元素.屬性名來進行獲取屬性值
  - 元素.id
  - 元素.name
  - 元素.value
  - 唯獨class屬性不能採用這種方式讀取，讀取class屬性時需要使用：元素.className
- childNodes屬性會獲取包含文字節點在內的所有節點個數
  - 根據DOM標籤之間空白換行文字也會當成文字節點
  - 注意:IE8及以下的瀏覽器中，不會將空白文本當成子節點
- children屬性可以獲取當前元素的所有子元素
  - firstChild屬性，表示當前節點的第一個子節點（包括空白文字）
- 父節點+兄弟節點
  - parentNode屬性表示獲取當前節點的父節點
  - previousSiblling屬性表示獲取當前節點的前一個兄弟節點
  - nextSibling屬性表示獲取當前節點的後一個兄弟節點

DOM查詢方法

//案例頁面
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>
<body>
    <div class="box1">
        我是第一個box1
        <div>我是box1中的div</div>
    </div>

    <div class="box1">
        我是第二個box1
        <div>我是第二個box1中的div</div>
    </div>

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

</body>
</html>

案例頁

<script>
  // DOM查詢
  window.onload = function () {
    // 獲取body標籤
    // var body = document.getElementsByTagName("body")[0];
    var body = document.body; //效果同上
    console.log(body)

    // 獲取html根標籤
    var html = document.documentElement;
    console.log(html)

    // 代表頁面中所有的元素
    var all = document.all;

    // 根據元素的class屬性值查詢一組元素節點物件
    // IE9以上才支援，IE8及以下版本不支援
    var box1 = document.getElementsByClassName("box1");

    // 獲取頁面中所有的div
    var divs = document.getElementsByTagName("div");

    // 獲取頁面中class=box1中的所有div
    // css選擇器選擇的方法：.box1 div
    var div1 = document.querySelector(".box1 div");
    var box2 = document.querySelector(".box1");
    // 選擇class=box1的所有元素中的第二個
    var box3 = document.querySelectorAll(".box1")[1];

    // 選擇id=box2的所有元素中的第一個
    var box4 = document.querySelectorAll("#box2")[0];
}

</script>

DOM查詢

DOM增刪改

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      @CHARSET "UTF-8";
      body {
        width: 800px;
        margin-left: auto;
        margin-right: auto;
      }

      button {
        width: 300px;
        margin-bottom: 10px;
      }

      #btnList {
        float:left;
      }

      #total{
        width: 450px;
        float:left;
      }

      ul{
        list-style-type: none;
        margin: 0px;
        padding: 0px;
      }

      .inner li{
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        margin: 5px;
        background-color: #99ff99;
        float:left;
      }

      .inner{
        width:400px;
        border-style: solid;
        border-width: 1px;
        margin-bottom: 10px;
        padding: 10px;
        float: left;
      }

    </style>
    
</head>
<body>
    <div id="total">
      <div class="inner">
        <p>
          你喜歡哪個城市?
        </p>

        <ul id="city">
          <li id="bj">北京</li>
          <li>上海</li>
          <li>東京</li>
          <li>首爾</li>
        </ul>
      </div>
    </div>
    <div id="btnList">
      <div><button id="btn01">建立一個"廣州"節點,新增到#city下</button></div>
      <div><button id="btn02">將"廣州"節點插入到#bj前面</button></div>
      <div><button id="btn03">使用"廣州"節點替換#bj節點</button></div>
      <div><button id="btn04">刪除#bj節點</button></div>
      <div><button id="btn05">讀取#city內的HTML程式碼</button></div>
      <div><button id="btn06">設定#bj內的HTML程式碼</button></div>
      <div><button id="btn07">建立一個"廣州"節點,新增到#city下</button></div>
    </div>
  </body>
</html>

頁面案例

<script type="text/javascript">
  window.onload = function() {
  //需求1：建立一個“廣州”節點，新增到#city下
  myClick("btn01",function () {
    // 1、建立廣州節點
    var li = document.createElement("li");
    // console.log(li);
    
    var gzText = document.createTextNode("廣州");
    // console.log(gzText);

    /* document.appendChild()
       可以向一個父節點中新增一個新的子節點
       用法：父節點.appendChild(子節點)
    */
    li.appendChild(gzText);

    // 2、新增到city下

    // 獲取id=city的節點
    var city = document.getElementById("city");

    city.appendChild(li);
  });



  //需求2：將“廣州”節點插入到#bj前面
  myClick("btn02",function () {
    var li = document.createElement("li");
    var gzText =  document.createTextNode("廣州");
    var bj = document.getElementById("bj");
    var city = document.getElementById("city");

    li.appendChild(gzText);

    // 父節點呼叫insertBefore()方法
    // 引數：第一個為需要插入的新元素，第二個為指定位置
    city.insertBefore(li,bj);
  });


  //需求3：使用“廣州”節點替換#bj節點
  myClick("btn03",function () {
    var li = document.createElement("li");
    var gzText =  document.createTextNode("廣州");
    var bj = document.getElementById("bj");
    var city = document.getElementById("city");

    li.appendChild(gzText);

    // 父節點.replaceChild(新節點, 舊節點)
    // 舊節點將被替換為新節點
    if(bj){
      city.replaceChild(li, bj);
    };
  });




  //需求4：刪除#bj節點
  myClick("btn04",function () {
    var bj = document.getElementById("bj");
    var city = document.getElementById("city");

    // 刪除子節點
    // 父節點.removeChild(需要刪除的子節點物件)
    // 方法1：
    // if(bj){
    //  city.removeChild(bj);
    // };


    // 獲取子節點的父元素
    // parent = bj.parentNode;
    // console.log(parent);

    // 方法2：好處是不用眼睛去判斷bj的父節點是誰
    if(bj){
      // 子節點.parentNode.removeChild(子節點)
      bj.parentNode.removeChild(bj)
    };


  });


  //需求5：讀取#city內的HTML程式碼
  myClick("btn05",function () {
    var city = document.getElementById("city");
    alert(city.innerHTML);
  });



  //需求6：設定#bj內的HTML程式碼
  myClick("btn06",function () {
    var bj = document.getElementById("bj");
    bj.innerHTML = "昌平";
  });


  // 使用innerHTML屬性，向#city中新增廣州
  // 結合appendChild() + innerHTML 搭配使用
  myClick("btn07",function () {
    var city = document.getElementById("city")  ;

    var li = document.createElement("li");
    li.innerHTML = "廣州";
    city.appendChild(li);
  });

};
function myClick(idStr, fun) {
  var btn =  document.getElementById(idStr);
  btn.onclick = fun;
}
</script>

js操作　　　　

使用DOM操作css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style>
      #box1{
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
    <script type="text/javascript">
      window.onload = function () {
        /*
        點選按鈕以後，修改box1的大小
        */
        // 獲取box1
        var box1 = document.getElementById("box1");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
 
          /*
          通過js修改元素的樣式；
          語法: 元素.style.樣式名 = 樣式值
          注意: 如果css樣式名中含有 中橫線-
            - 這種名稱在js中是不合法的，比如background-color
            - 需要將這種樣式名修改為駝峰命名法
            - 比如background-color ,應該改為backgroundColor
            - 我們通過style屬性設定的樣式為 內聯樣式
                - 內聯樣式有較高的優先順序
                - 如果再樣式中寫了!important 則此時js就無效了
          */
          box1.style.width = "300px";
          box1.style.height = "300px";
          box1.style.backgroundColor = "green";

        };
        // 點選按鈕2以後，讀取元素的樣式
        // 通過style屬性設定和讀取的都是內斂樣式的資訊
        //  樣式表中的樣式無法讀取
        var btn02 = document.getElementById("btn02");
        btn02.onclick = function () {
          alert(box1.style.width);
        }
      };
    </script>
  </head>
  <body>
    <button id="btn01" >點我一下</button>
    <button id="btn02" >點我一下2</button>
    <div id="box1"></div>
  </body>
</html>

View Code

使用DOM讀取元素的樣式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style>
      *{
        margin: 0;
      }
      #box1{
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
    <script type="text/javascript">
      window.onload = function () {
        /*
        點選按鈕以後，修改box1的大小
        */
        var box1 = document.getElementById("box1");
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
          /*
          獲取元素當前顯示的樣式
          語法：元素.currentStyle.樣式名
            讀取當前元素顯示的樣式
            只有IE8支援，其他瀏覽器都不支援
            讀取到的樣式是隻讀
          */

          // alert(box1.currentStyle.backgroundColor);
          // 在其他瀏覽器中可以 使用 getComputedStyle()方法來獲取元素當前的樣式
          // 需要兩個引數，第一個要獲取樣式的元素，第二個可以傳遞一個偽元素，一般都為null
          // 該方法會返回一個物件，物件中封裝了當前元素對應的樣式；
          // 該方法不支援持ie8 及以下瀏覽器
          // 讀取到的樣式是隻讀
          // var obj = getComputedStyle(box1,null);
          // alert(obj.width);


          /* 
          自定義一個通用函式，用來獲取指定元素的當前樣式
          提高相容性
          引數：
            obj 要獲取樣式的元素
            name 要獲取樣式名
          */

          function getstyle(obj,name) {
            // 變數沒有找到會報錯，屬性沒有找到會返回Undefined，所以需要使用window
            if(window.getComputedStyle){
              // 正常瀏覽器
              return getComputedStyle(obj,null)[name];
            }else{
              // IE8的獲取方式
              return obj.currentStyle[name];
            }
          };
          console.log(getstyle(box1,"height"));

        }
      };
    </script>
  </head>
  <body>
    <button id="btn01">點我一下</button>
    <div id="box1"></div>
  </body>
</html>