第五模組 WEB開發基礎之DOM

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

1. 快速認識DOM

<!DOCTYPE html>
<html>
<head>
    <title>DOM</title>
</head>
<body>
    DOM: document object model 文件物件模型
    js中物件分為三種:
    1. 使用者定義物件
    2. 內建物件 array date math
    3. 宿主物件 window

    將dom看做一顆樹.
    dom把文件看作一顆家譜樹.
    在html中, 標籤就是dom物件, 這些dom物件又構成了家譜樹(節點樹).
 
</body>
</html>

2. DOM中節點分類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02 節點</title>
</head>
<body>
    <p title="我是mjj" class="" id="">mjj</p>
    <ul>
        <li></li>
    </ul>
    <!-- 節點  node-->
    <!-- 1.元素節點(element node)  2.文字節點 (text node) 3.屬性節點 (attribue node)-->

    <!-- 沒有內容 的文件是沒有任何價值的，而大多數內容都是有文字提供-->
    
</body>
</html>

3. 獲取元素節點物件的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class list</title>
</head>
<body>
    <h2>你要買什麼課程？</h2>
    <p title='請您選擇購買的課程'>本課程是web全棧課程，期待你的購買！</p>
    <ul id='classList'>
        <li class 
='item'>JavaScript</li>
        <li class='item'>css</li>
        <li>DOM</li>
    </ul>

    <!-- 節點型別：
        1.元素節點
        2.屬性節點
        3.文字節點
     -->
     <script type="text/javascript">
         // 1.document.getElementById() 單個物件
         var eleNode = document.getElementById('classList');
         console.log(eleNode);
         console.log(typeof eleNode);
         // 2.document.getElementsByTagName()  獲取出來的是一個節點物件集合  有點像陣列  push()
         var olis = document.getElementsByTagName('li');
         var oTitle = document.getElementsByTagName('h2');
         console.log(oTitle[0]);
         console.log(olis.length);
         for(var i = 0; i < olis.length; i ++){
             console.log(olis[i]);
         }
         console.log(typeof olis);
         // 3.document.getElementsByClassName('item');獲取出來的是一個節點物件集合  
         var oItems = document.getElementsByClassName('item');
         console.log(oItems);
     </script>
</body>
</html>

4. setAttribute()和getAttribute()用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class list</title>
    <style type="text/css">
        #box{
            color: red;
        }
    </style>
</head>
<body>
    <h2>你要買什麼課程？</h2>
    <p title='請您選擇購買的課程'>本課程是web全棧課程，期待你的購買！</p>
    <ul id='classList'>
        <li class='item'>JavaScript</li>
        <li class='item'>css</li>
        <li>DOM</li>
    </ul>

    <!-- 
     -->
     <script type="text/javascript">
         var oP = document.getElementsByTagName('p')[0];
         // 獲取屬性值 有一個必需的引數，這個節點物件的名字
         var title = oP.getAttribute('title');
         var className  = oP.getAttribute('class');
         console.log(title);
         console.log(className);

         // 設定屬性值  setAttribute(name,value)
         oP.setAttribute('id', 'box');
　　　　// 通過js設定的屬性並不會反映在原始碼中

     </script>
</body>
</html>

5. 節點物件的三個屬性介紹

1. nodeName: 節點的名稱
2. nodeValue: 節點的值
3. nodeType: 節點的型別

1. nodeName屬性: 節點的名稱, 只讀
    1. 元素節點的nodeName與標籤名相同
    2. 屬性節點的nodeName與屬性的名稱相同
    3. 文字節點的nodeName永遠是 #text
    4. 註釋節點的nodeName永遠是 #comment
    5. 文件節點的nodeName永遠是#document

2. nodeValue屬性: 節點的值
    1. 元素節點的nodeValue是undefined或null
    2. 文字節點的nodeValue是文字自身
    3. 屬性節點的nodeValue是屬性的值

3. nodeType屬性: 節點的型別, 只讀(瀏覽器不同, 值可能不同)
    以下常用的幾種節點型別:
    元素型別     節點型別
    元素            1
    屬性            2
    文字            3
    註釋            8
    文件            9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>節點屬性</title>
</head>
<body>
    <!-- nodeName   nodeValue  nodeType -->
    <div id="box" title="我是文字">我是一個文字節點<!--我是註釋--></div>
    <script type="text/javascript">
        // 1.元素節點
        var oDiv =  document.getElementById('box');
        console.log(oDiv.nodeName + "| " + oDiv.nodeValue + "| " + 
            oDiv.nodeType);

        // 2.獲取屬性節點
        var attrNode = oDiv.attributes[0];
        console.log(attrNode.nodeName + "| " + attrNode.nodeValue + "| " + 
            attrNode.nodeType);

        // 3.獲取文字節點
        var textNode = oDiv.childNodes[0];
        console.log(textNode.nodeName + "| " + textNode.nodeValue + "| " + 
            textNode.nodeType);

        // 4.獲取註釋節點
        var commentNode = oDiv.childNodes[1];
        console.log(commentNode.nodeName + "| " + commentNode.nodeValue + "| " + 
            commentNode.nodeType);

        console.log(document.nodeType);

    </script>
</body>
</html>

6. 節點物件的常用屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>節點物件的其它常用屬性</title>
</head>
<body>
    <div class="previous">我是上個兄弟</div>
    <div id="father">
        <p>mjj</p>
        <p>mjj2</p>
    </div>
    <div class="sibling">我是下個兄弟</div>

    <script type="text/javascript">
        var oFather = document.getElementById('father');
        console.log(oFather.childNodes);
        // 在chrome瀏覽器上會獲取到text和p, 其中text指空格,在IE瀏覽器上只能獲取到p.
        // console.log(oFather.childNodes[0]);
        // console.log(oFather.firstChild);
        // console.log(oFather.childNodes[oFather.childNodes.length - 1]);
        // console.log(oFather.lastChild);
        // console.log(oFather.parentNode.parentNode);
        console.log(oFather.nextSibling);
        // console.log(oFather.previousSibling);
　　　　　
　　
　　　　// 節點物件屬性在各瀏覽器相容性處理
        function get_childNodes(fatherNode){
            var nodes = fatherNode.childNodes;
            var arr = [];//儲存已經獲取的元素節點物件
            for(var i = 0; i < nodes.length; i++){
                if (nodes[i].nodeType === 1) {
                    arr.push(nodes[i]);
                }
            }
            return arr;

        }
        var childnodes = get_childNodes(oFather);
        console.log(childnodes[0]);

        function get_nextSibling(n){
            var x = n.nextSibling;
            while(x  && x.nodeType != 1){
                x = x.nextSibling;
            }
            return x;
        }
        console.log(get_nextSibling(oFather));
        

    </script>
</body>
</html>

7. 元素節點物件的增刪改查方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07 節點方法</title>
    <style type="text/css">
        .active{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="box">

        <p id="active">mjj</p>

    </div>

    <!-- 
        動態的操作節點
        1.建立節點  createElement()
        2.插入節點 appendChild()
                   insertBefore(newNode,node)
        3.刪除節點 removeChild(childNode)
        4.替換節點 replaceChild(newNode,node)
        5.建立文字節點 createTextNode()
     -->
     <script type="text/javascript">
         var oDiv = document.getElementById('box');
         var oAtive = document.getElementById('active');

         var newNode = document.createElement('p');
         var newNode2 = document.createElement('p');
         var newNode3 = document.createElement('a');

         console.log(newNode === newNode2);// 兩個節點不同

         newNode.innerHTML = '<a href="#">[email protected]</a>';  //渲染標籤, 並插入文字
         newNode2.innerHTML = '<a href="#">[email protected]</a>';
         newNode3.setAttribute('href','http://www.baidu.com');
         newNode3.innerHTML = '百度一下';

         newNode.setAttribute('class', 'active');
         oDiv.appendChild(newNode);
         // 第一個引數是新插入的節點，第二個引數是參考的節點
         oDiv.insertBefore(newNode2,oAtive);

         
         /*
         var textNode = document.createTextNode('alex');
         newNode.appendChild(textNode);
         */
         // newNode = null;//釋放物件, 從記憶體中釋放掉,放在最後

         // oDiv.removeChild(oAtive); 刪除操作
         oDiv.replaceChild(newNode3, oAtive)


         // newNode.innerText = '<a href="#">[email protected]</a>'; 無法渲染標籤, 只是字串
     </script>
</body>
</html>

8. 樣式設定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態操作樣式</title>
    <style type="text/css">
        .highLight{
            background-color: black;
            color: white;
            width: 250px;
            height: 250px;
            line-height: 250px;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p id='box'>MJJ</p>
    <script type="text/javascript">
        // nodeObj.style
        var para = document.getElementById('box');
        /*
        1、直接操作樣式屬性
        console.log(para.style);  //獲取所有屬性, 屬性都採用駝峰體
        para.style.color = 'white';
        para.style.backgroundColor = 'black';
        para.style.width = '250px';
        para.style.height = '250px';
        para.style.textAlign = 'center';
        para.style.lineHeight  = '250px';
        para.style.fontSize  = '30px';
        // 通過這種方式設定的每個屬性都設定成了行內樣式style = 'color:red;'
        */

        // 2、通過控制屬性的類名來控制樣式(推薦使用這種方式)
        para.setAttribute('class', 'highLight');
        
    </script>
</body>
</html>

9. 常用事件

常用事件
onclick      滑鼠單擊事件
onmouseover  滑鼠經過事件
onmouseout   滑鼠移開事件
onchange     文字框內容改變事件(常用於表單事件)
onselect     文字框內容被選中事件(常用於表單事件, 如選中下拉選單中選項)
onfocus      游標聚焦事件(常用於表單事件, input輸入框中插入游標)
onblur       游標失焦事件(常用於表單事件)
onload       網頁載入事件

10. onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
     <!-- <div id="box" onclick="add();"></div> -->
     <div id="box" ></div>

     <script type="text/javascript">
         var oDiv = document.getElementById('box');

         var isBlue = true;
         // 方式1: 匿名函式
         oDiv.onclick = function(){
             if (isBlue) {
                 // this 指向了當前的元素節點物件
                 this.style.backgroundColor = 'red';
                 isBlue = false;
             }else{
                this.style.backgroundColor = 'blue';
                 isBlue = true;
             }
         };
         // 方式2: 宣告一個函式, 將函式名賦值給事件(推薦使用這種方式)
         /* var add = function(){
             alert(1111);
         }
         oDiv.onclick = add;*/

         // 方式3: 較繁瑣, 不推薦使用
         /*<div id="box" onclick='add();'></div>
         function add(){
             alert(1111);
         }*/
         
     </script>

</body>
</html>

11. 滑鼠懸浮事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onmouseover()和onmouseout()事件</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
    <script type="text/javascript">
        // 1.找開關   2.摁一下   3.燈亮了
        // 1.找到觸發的事件物件    
        var oDiv = document.getElementById('box');
        // 2.滑鼠滑過事件  
        oDiv.onmouseover = function(){
            console.log(111);
            // 3.事件處理程式
            this.style.backgroundColor = 'green';
        }
        // 2.滑鼠移開事件  
        oDiv.onmouseout = function(){
            // 3.事件處理程式
            this.style.backgroundColor = 'red';
        }

    </script>
    
</body>
</html>

12. 游標聚焦和失焦事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>游標聚焦和失焦事件</title>
    <style type="text/css">
        .text{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <form action="">
        <p class="name">
            <label for="username">使用者名稱：</label>
            <input type="text" name="user" id="username">

        </p>
        <p class="pwd">
            <label for="pwd">密碼：</label>
            <input type="password" name="wpd" id="pwd">
        </p>
        <input type="submit" name="">
    </form>
    <script type="text/javascript">
        var userName = document.getElementById('username');
        var newNode = document.createElement('span');
        userName.onfocus = function(){
            newNode.innerHTML = '請輸入使用者名稱';
            newNode.setAttribute('class', 'text')
            userName.parentNode.appendChild(newNode);
        }
        userName.onblur = function(){
            newNode.innerHTML = '請輸入正確的使用者名稱';
            newNode.setAttribute('class', 'text')
            userName.parentNode.appendChild(newNode);
        }
    </script>
</body>
</html>

13. 表單控制元件上內容選中和改變事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>內容選中事件和內容改變事件</title>
</head>
<body>
    <!-- onselect onchange -->
    <textarea cols="30" rows="10">請寫入個人簡介，字數不少於200字</textarea>
    <input type="text" name="" value="mjj">
    <script type="text/javascript">
        var textArea = document.getElementsByTagName('textarea')[0];
        var inputObj = document.getElementsByTagName('input')[0];

        textArea.onselect = function(){
            console.log('內容被選中');
        }
        inputObj.onchange = function(){
            console.log('內容被改變了');
        }
        /*
        inputObj.oninput = function(){
            console.log('內容被實時改變了');
            console.log(this.value);
        }
        */
    </script>
</body>
</html>

14. 視窗載入事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>視窗載入事件</title>
    <script type="text/javascript"> //多數寫在head中,但是程式碼載入順序是從左往右,從上往下
        /*
        setTimeout(function(){
            var oDiv = document.getElementById('box');
            console.log(oDiv);
            oDiv.onclick = function(){
                this.innerHTML = 'alex';
            }
        }, 0)
        */
        // 等待文件元素載入完成才會呼叫onload(), 如果在head中寫script, 則應使用window.load, 但是window.load存在事件覆蓋的問題.
        window.onload = function(){
            var oDiv = document.getElementById('box');
            console.log(oDiv);
            oDiv.onclick = function(){
                this.innerHTML = 'alex';
            }
        }
        // window.onload = function(){
        //     console.log(11111);
        // }

    </script>
</head>
<body>
    <div id="box">MJJ</div>
</body>
</html>