DOM

概念：Docunment Object Model 文檔對象模型。
將標記語言文檔的各個組成部分，封裝爲對象，可以使用這些標記語言文檔進行CRUD的動態操作。

HTML DOM 樹：

（一）、核心：DOM - 針對任何結構化文檔的標準模型

1. Document：文檔對象

1.1 獲取Element對象：

`①、getElementById()：根據id屬性值來獲取元素對象。i的屬性值一般唯一`

`②、getElementsByTagName() ：根據元素名稱獲取元素對象們。返回值是一個數組`

<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>   

    <div class="cls1">div4</div>
    <div class="cls1">div5</div>

    <input type="text" name="username">
    <script>
        var divs = document.getElementsByTagName("div");
        document.write(divs.length);//5
    </script>
</body>

`③、getElementsByClassName()：根據Class屬性值獲取元素對象們。返回值是一個數組。`

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>   
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="text" name="username">
<script>
    var classes = document.getElementsByClassName("cls1");
    document.write(divs.length);//-----> 2
</script>

`④、getElementsByName()：根據name屬性值獲取元素對象們，返回值是一個數組。`

<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="text" name="username">
<script>
    var usernames = document.getElementsByName("username");
    document.write(usernames.length);//------> 1
</script>

1.2 創建其他DOM對象：

createAttribute(name) 創建擁有指定名稱的屬性節點，並返回新的 Attr 對象。
createComment() 創建註釋節點。
createElement() 創建元素節點。

var table = document.createElement("table");
alert(table);//----> [object HTMLTableElement]

createTextNode() 創建文本節點。

2. Element：元素對象

獲取 / 創建：通過document來獲取和創建。

`removeAttribute() 刪除指定的屬性。`

`setAttribute() 添加新屬性。`

首先創建一個a標籤，但是一開始沒有任何屬性，不能通過點擊跳轉頁面；我們通過一下方法來給a標籤設置屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element對象</title>
</head>

<body>
    <a>點我試一試</a>
    <input type="button" id="btn_set" value="設置屬性">
    <input type="button" id="btn_remove" value="刪除屬性">
    <script>
        //獲取btn
        var btn_set = document.getElementById("btn_set");
        btn_set.onclick = function () {
            //1.獲取a標籤
            var element_a = document.getElementsByTagName("a")[0];
            //添加屬性
            element_a.setAttribute("href", "https://www.baidu.com");
        }

        //獲取btn
        var btn_remove = document.getElementById("btn_remove");
        btn_remove.onclick = function () {
            //1.獲取a標籤
            var element_a = document.getElementsByTagName("a")[0];
            //刪除屬性
            element_a.removeAttribute("href", "https://www.baidu.com");
        }

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

效果如下：

3. Attribute：屬性對象

4. Text：文本對象

5. Comment：註釋對象

6. Node：節點對象，其他5個的父對象

特點：所有dom對象都可以被認爲是一個節點

方法：

CURD dom樹：

`appendChild()：向節點的子節點列表的結尾添加新的子節點。`

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

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

這裏我們通過使用按鈕的方式來刪除子節點。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node對象</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div> 
    
    <input type="button" id="del" value="刪除子節點">
    
    <script>
        //1.獲取超鏈接
        var element_a = document.getElementById("del");
        //2.綁定單擊事件
        element_a.onclick = function(){
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");

            div1.removeChild(div2);
        }
    </script>

</body>
</html>

效果如圖：

但是如果將上面的<input type="button" id="del" value="刪除子節點">的這一行代換爲<a href="" id="del">刪除子節點</a>，那麼不會顯示上面的效果，因爲href=" "的屬性一直爲空；指的是隻要一點擊按鈕，就會在本頁面內跳轉【相當於在本頁面內一直進行刷新操作】，因此看不到效果。

超鏈接的功能：
①、可以被點擊。
②、點擊後跳轉到href指定的url。

`如果我們想要保留①的功能，去掉②的功能，那麼需要填寫代碼爲href = " javascript: void(0)";`

修改後，效果如圖所示：

案例：添加div3。代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node對象</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div> 

    <a href = " javascript: void(0)" id="del">刪除子節點</a>
    <a href = " javascript: void(0)" id="add">添加子節點</a>

    <script>
        //1.獲取超鏈接
        var element_a = document.getElementById("del");
        //2.綁定單擊事件
        element_a.onclick = function(){
            var div1 = document.getElementById("div1");
            var div2 = document.getElementById("div2");

            div1.removeChild(div2);
        }

        //1.獲取超鏈接
        var element_add = document.getElementById("add");
        //2.綁定單擊事件
        element_add.onclick = function(){
            var div1 = document.getElementById("div1");
            
            //3.給div1添加子節點div3
            var div3 = document.getElementById("div");
            div3.setAttribute("id","div3");

            div1.appendChild(div3);
        }

    </script>

</body>
</html>

效果如圖所示：

屬性：

`parentNode：返回節點的父節點。`

var div2 = document.getElementById("div2");
var div1 = div2.parentNode;
alert(div1);//----> [object HTMLDivElement]

（二）、HTML DOM - 針對 HTML 文檔的標準模型

1.標籤體的設置和獲取：innerHtml

2.使用htm元素對象的屬性

<body>
    <div id="div1">
        div
    </div>
    
    <script>
        var div = document.getElementById("div1");
        var innerHTML = div.innerHTML;
        
        //div標籤中替換一個文本輸入框
        div.innerHTML = "<input type = 'text' >";
        //div標籤中追加一個文本輸入框
        div.innerHTML += "<input type = 'text' >";
    </script>

</body>

innerHTML 屬性
獲取元素內容最簡單的方法是使用 innerHTML 屬性。
innerHTML 屬性可用於獲取或替換 HTML 元素的內容。
innerHTML 屬性可用於獲取或改變任何 HTML 元素，包括 <html> 和 <body>。

3.控制樣式

3.1 使用元素的style屬性來設置

<script>
    var div1 = document.getElementById("div1");
    div1.onclick = function(){
        //修改樣式方式1
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size--->fontSize
        div1.style.fontSize = "20px";
    }
</script>

效果如圖所示：

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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="div2">
        div
    </div>

    <script>
        var div2 = document.getElementById("div2");
        div2.onclick = function(){
            div2.className = "d1";
        }
    </script>

</body>
</html>

效果如圖所示：

JavaScript之Dom對象

DOM

（一）、核心：DOM - 針對任何結構化文檔的標準模型

1. Document：文檔對象

1.1 獲取Element對象：

①、getElementById()：根據id屬性值來獲取元素對象。i的屬性值一般唯一

②、getElementsByTagName() ：根據元素名稱獲取元素對象們。返回值是一個數組

③、getElementsByClassName()：根據Class屬性值獲取元素對象們。返回值是一個數組。

④、getElementsByName()：根據name屬性值獲取元素對象們，返回值是一個數組。

1.2 創建其他DOM對象：

2. Element：元素對象

removeAttribute() 刪除指定的屬性。

setAttribute() 添加新屬性。

3. Attribute：屬性對象

4. Text：文本對象

5. Comment：註釋對象

6. Node：節點對象，其他5個的父對象

方法：

CURD dom樹：

appendChild()：向節點的子節點列表的結尾添加新的子節點。

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

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

如果我們想要保留①的功能，去掉②的功能，那麼需要填寫代碼爲href = " javascript: void(0)";

案例：添加div3。代碼如下

屬性：

parentNode：返回節點的父節點。

（二）、HTML DOM - 針對 HTML 文檔的標準模型

1.標籤體的設置和獲取：innerHtml

2.使用htm元素對象的屬性

3.控制樣式

3.1 使用元素的style屬性來設置

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

`①、getElementById()：根據id屬性值來獲取元素對象。i的屬性值一般唯一`

`②、getElementsByTagName() ：根據元素名稱獲取元素對象們。返回值是一個數組`

`③、getElementsByClassName()：根據Class屬性值獲取元素對象們。返回值是一個數組。`

`④、getElementsByName()：根據name屬性值獲取元素對象們，返回值是一個數組。`

`removeAttribute() 刪除指定的屬性。`

`setAttribute() 添加新屬性。`

`appendChild()：向節點的子節點列表的結尾添加新的子節點。`

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

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

`如果我們想要保留①的功能，去掉②的功能，那麼需要填寫代碼爲href = " javascript: void(0)";`

`parentNode：返回節點的父節點。`