1. 程式人生 > >JavaScript(2)---DOM詳解

JavaScript(2)---DOM詳解

JavaScript(2)---DOM詳解

一、DOM概念

什麼是DOM

DOM全稱為文字物件模型(Document Object Model),它定義了所有HTML元素的物件和屬性,以及訪問他們的方法。它的主要作用包括:

改變HTML 元素 , 改變HTML屬性 , 改變CSS 樣式,對頁面中的所有事件做出反應。

1、DOM 節點樹

概念 DOM模型將整個HTML文件看成一個樹形結構,並用document物件表示該文件,樹的每個子節點表示HTM檔中的不同內容。

如圖

上圖對應的html程式碼如下

<!DOCTYPE html>
<html>
<head>
    <title>標題</title>
</head>
<body>
    <h1>小小</h1>
    <a href="www.xx.com">連結</a>
</body>
</html>

通過這幅圖也可以看出節點樹中有以下幾種關係

1、父級關係(圖中 html 是 head 的父親,head是title的父親。)
2、子級關係(圖中 head 是 html 的兒子,title是head的兒子。)
3、兄弟關係 (圖中 head 和 body是兄弟關係。p 和 h1 是兄弟關係。)

2、DOM 節點型別

從上圖部分,我用四種顏色區分了不同節點的型別,每個節點對應的nodeType也是不一致的。

3、DOM 節點操作

節點查詢操作

節點增刪操作

節點屬性操作


二、查詢示例

這裡通過舉例去更好的理解上面的一些操作。

1、查詢子元素

children : 可以獲取當前元素的所有子元素,它是不包含空白的。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="father">
        <p>今天時間</p>
        <p>2019.12.09</p>
        <p>22:15分</p>
    </div>
</body>
<script>
    window.onload = function () {
        var father = document.getElementById("father");
        var all = father.children; // 獲取 father 下邊所有的子元素
        console.log("陣列的長度為:" + all.length);
    };
</script>
</html>

輸出

陣列的長度為:3

2、查詢父元素

parentNode :獲取當前元素的父節點(父元素)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="father">
        <p id="childNode">我是子節點</p>
    </div>
</body>
<script>
    window.onload = function () {
        var p = document.getElementById("childNode");  //獲取p元素
        var parent = p.parentNode;  // 獲取父元素
        console.log(parent);
    };
</script>
</html>

輸出

<div id="father">
        <p id="childNode">我是子節點</p>
 </div>

3、查詢兄弟元素

previousElementSibling 獲取當前元素的前一個兄弟元素(哥哥元素)
nextElementSibling 獲取當前元素的後一個兄弟元素(弟弟元素)

示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p id="previous" name="1111">哥哥元素</p>
    <p id="my">本元素</p>
    <p id="next">弟弟元素</p>
</body>
<script>
    window.onload = function () {
        var my = document.getElementById("my");   // 獲取我的元素
        var previous = my.previousElementSibling; // 獲取哥哥元素
        var next = my.nextElementSibling;         // 獲取弟弟元素
        console.log(previous);
        console.log("---------------------");
        console.log(next);
    };
</script>
</html>

輸出

<p id="previous" name="1111">哥哥節點</p>
---------------------
<p id="next">弟弟節點</p>


三、增刪改示例

1、增加子節點

appendChild() : 向一個父節點中新增一個新的子節點 父節點.appendChild(子節點);

程式碼示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script>
    window.onload = function () {
        // 獲取到 btn
        var btn01 = document.getElementById("btn");
        // 新增點選事件
        btn01.onclick = function () {
            // 建立一個 p 標籤
            var p = document.createElement("p");
            // 建立一個文字節點
            var txt = document.createTextNode("我是新建立p標籤中的內容...");
            // 把文字節點新增到 p 標籤中
            p.appendChild(txt);
            // 把 p 標籤新增到 body 中
            var body = document.body; // 獲取body
            body.appendChild(p);
        };
    };
</script>

<body>
    <button id="btn">建立一個p標籤</button>
</body>
</html>

執行

2、移除子節點

removeChild() :刪除一個子節點 父節點.removeChild(子節點);

程式碼示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="btn">刪除一個子節點</button>
    <ul id="uls">
        <li>我是第一個子節點</li>
        <li>我是第二個子節點</li>
        <li>我是第三個子節點</li>
        <li>我是第四個子節點</li>
    </ul>
</body>
<script>
    window.onload = function () {
        // 獲取到 btn
        var btn = document.getElementById("btn");
        // 新增點選事件,刪除第三個子節點
        btn.onclick = function () {
            //獲取第三個子節點
            var node = document.getElementsByTagName("li")[2];
            // 獲取父節點
            var ul = document.getElementById("uls");
            ul.removeChild(node); // 刪除子節點
        };
    };
</script>
</html>

執行

3、替換子節點

replaceChild() : 可以使用指定的子節點來替換已有的子節點 父節點.replaceChild(新節點,舊節點);

程式碼示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="btn">替換按鈕</button>
    <p id="pNode">我是舊節點 p </p>
</body>
<script>
    window.onload = function () {
        // 獲取到 btn01
        var btn = document.getElementById("btn");
        // 新增點選事件
        btn.onclick = function () {
            // 獲取p標籤
            var p = document.getElementById("pNode");
            // 獲取父節點
            var body = document.body;

            //建立一個新的節點,用於替換舊節點
            var a = document.createElement("a");
            var txt = document.createTextNode("我是新的節點 a 哦~");
            a.appendChild(txt);

            // 替換節點
            body.replaceChild(a, p);
        };
    };
</script>
</html>

執行

4、替換指定位置節點

insertBefore() : 可以在指定的子節點前插入一個新的子節點 父節點.insertBefore(新節點,舊節點);

程式碼示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="btn01">替換子節點</button>
    <p id="pNode">我是舊節點 p </p>
</body>
<script>
    window.onload = function () {
        // 獲取到 btn01
        var btn01 = document.getElementById("btn01");
        // 新增點選事件
        btn01.onclick = function () {
            // 獲取p標籤
            var p = document.getElementById("pNode");
            // 獲取父節點
            var body = document.body;

            //建立一個新的節點,用於插入到 p 元素前面
            var a = document.createElement("a");
            var txt = document.createTextNode("我是新的節點 a 哦~");
            a.appendChild(txt);

            // 插入一個新的節點 a 
            body.insertBefore(a, p);

        };
    };
</script>
</html>

執行


四、樣式示例

語法

元素.style.樣式名 = 樣式值

這裡有關修改樣式注意的點有

1、 如果 CSS 樣式名中含有 - 這種名稱在JS 中是不合法的,例如: background-color我們需要將這種樣式名,修改為 駝峰命名法backgroundColor

2、通過 style 屬性設定的樣式都是內聯樣式,而內聯樣式有較高的優先順序,所以通過JS 修改的樣式往往會立即顯示。
3、但是如果在樣式中寫了 !important 則此時樣式會有最高的優先順序,即使通過 JS 也不能覆蓋這個樣式。此時將會導致 JS 修改的樣式失效,所以儘量 不要給樣式新增 !important
4、通過 style 讀取也都是內聯樣式、無法讀取樣式表中的樣式。

1、設定樣式

程式碼示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
    /* 設定一個基本的樣式 */
    #box{
        width: 100px;  
        height: 100px;
        background-color: darkcyan;
    }
</style>
</head>
<body>
    <button id="btn">更換樣式</button>
    <br>
    <br>
    <div id="box"></div>
</body>
<script>
    window.onload = function () {
        // 獲取到 btn
        var btn = document.getElementById("btn");
        // 新增點選事件
        btn.onclick = function () {
            // 獲取 box
            var box = document.getElementById("box");
            box.style.width = "150px";  // 修改寬度
            box.style.height = "150px";  // 修改高度
            box.style.backgroundColor = "deeppink";  // 修改背景顏色
        };
    };
</script>
</html>

執行


五、綜合示例

1、霓虹燈特效示例

先看效果

程式碼示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body></body>
<script>
        var  tName="北京首都歡迎您";
        var  tLen=tName.length; 
        document.write("<div id='a'  style='font-size:50px;'>"+tName+"</div>" );
        var color=new Array("#FFCC00","#3333FF","FFCCAA","#FF0000","#FFCC33","#CC33FF");
        var ic=0;  //這裡很關鍵,一定要設定全域性變數
        function  DColor(){
             var StrName="";  //這個很有必要,不然無法疊加單個漢字
             
             for(var i=0;i<tLen;i++){  //下面一步才是精髓,設定每一個漢子不同顏色,然後拼接起來
                var StrName=StrName+"<font color="+color[ic]+">"+tName.substring(i,i+1)+"</font>";
                ic=ic+1;    //下一個字下一個顏色
                if(ic==color.length){
                  ic=0;  //不設定為零,因為他是全域性變數,那麼會一直加到陣列越界
                }   
             }
             
             a.innerHTML=StrName;  //可以通過id.innerHTML改變介面的字的顏色
                //設定時間的變化 改變情況
            setTimeout("DColor()",200);  //setTimeout代表每隔200毫秒執行一次函式
        }   
        DColor();    //這個代表直接開始執行這個函式,而不用通過觸發事件
    </script>
</html>

核心點

核心點一 : 是ic=0寫成全域性變數,假如寫在方法裡,那麼每一次初始化結果都一樣,那麼也不會有霓虹燈效果

核心點二 : color.length和tName.length如果相等同樣也不會產生效果,因為每一次結束ic還是=0,而這裡第一次DColor(),ic=0,第二次呼叫ic初始值=1,所以會有效果。

2、顯示系統時間,秒一直動

效果

程式碼

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body onload="showTime()">  <!-- 當載入時就執行 -->
    <label id="show">顯示系統時間</label>   <!-- 將系統時間顯示在這個位置 -->
</body>
<script type="text/javascript">  
    function showTime(){
      var objDate =new Date(); //得到系統時間物件
      var year =objDate.getFullYear(); //獲取年份
      var month=objDate.getMonth()+1;//獲取月份
      var date =objDate.getDate();//獲取日期
      var hours=objDate.getHours();//小時
      var minutes=objDate.getMinutes();//分鐘
      var seconds=objDate.getSeconds();//秒
      var day =objDate.getDay();   //獲取星期幾
        
        show.innerHTML=""+year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds +"&nbsp;周"+day;   //通過id改變介面顯示內容 
        //每隔1秒重新整理一次
        var  timeId=setTimeout(showTime,1000);
        }
    </script>
</html>


參考

1、前端學習記錄之Javascript-DOM

2、JavaScript DOM




你如果願意有所作為,就必須有始有終。(21)