JS事件、Bom對象和Dom對象（3）（樂字節架構）

時間 2020-07-14

原文原文鏈接

若是你想成爲一名優秀的java架構師，看這裏 → 樂字節免費公開課（騰訊課堂）javascript

如須要跟多資料請點擊右側（記住入羣暗號：66） → 這是一條不歸路，有禿頭風險，請慎重選擇！html

DOM對象

DOM：Document Object Model 文檔對象模型java

要實現頁面的動態交互效果，bom 操做遠遠不夠，須要操做 html 纔是核心。如何操做 htm，就是 DOM。簡單的說，dom 提供了用程序動態控制 html 接口。DOM即文檔對象模型描繪了一個層次化的節點樹，運行開發人員添加、移除和修改頁面的某一部分。dom 處於javascript 的核心地位上。數組

每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。Document 對象是 Window 對象的一部分，可經過 window.document 屬性對其進行訪問。瀏覽器

節點

加載 HTML 頁面時，Web 瀏覽器生成一個樹型結構，用來表示頁面內部結構。DOM 將這種樹型結構理解爲由節點組成，組成一個節點樹。對於頁面中的元素，能夠解析成如下幾種類型的節點：架構

節點類型	HTML內容	例如
文檔節點	文檔自己	整個文檔 document
元素節點	全部的HTML元素	<a>、<div>、<p>
屬性節點	HTML元素內的屬性	id、href、name、class
文本節點	元素內的文本	hello
註釋節點	HTML中的註釋	<!-- -->

html --> 文檔節點app

div --> 元素節點dom

title --> 屬性節點ide

測試 Div --> 文本節點測試

<html>
    <head>
        <title>樹!樹!處處都是樹!</title>
    </head>
    <body>
      <div title="屬性節點">測試 Div</div>
    </body>
</html>

操做元素的節點

當HTML文檔在被解析爲一顆DOM樹之後，裏面的每個節點均可以看作是一個一個的對象，咱們稱爲DOM對象，對於這些對象，咱們能夠進行各式各樣的操做，查找到某一個或者一類節點對象，能夠建立某種節點對象，能夠在某個位置添加節點對象，甚至能夠動態地刪除節點對象，這些操做可使咱們的頁面看起來有動態的效果，後期結合事件使用，就能讓咱們的頁面在特定時機、特定的事件下執行特定的變換。

獲取節點

在進行增、刪、改的操做時，都須要指定到一個位置，或者找到一個目標，此時咱們就能夠經過Document對象提供的方法，查找、定位某個對象（也就是咱們說的節點）。

注意：操做 dom 必須等節點初始化完畢後，才能執行。

處理方式兩種:

（1）把 script 調用標籤移到html末尾便可；

（2）使用onload事件來處理JS，等待html 加載完畢再加載 onload 事件裏的 JS。

window.onload = function () { //預加載 html 後執行};

獲取方式以下：

方法	描述
getElementById()	根據id獲取dom對象，若是id重複，那麼以第一個爲準
getElementsByTagName()	根據標籤名獲取dom對象數組
getElementsByClassName()	根據樣式名獲取dom對象數組
getElementsByName()	根據name屬性值獲取dom對象數組，經常使用於多選獲取值

<body>
    <p id="p1" class="para">這是一個段落<span>文本</span></p>
    <p id="p1" class="para">這又是一個段落</p>
    <input type="text" name="txt" />
    <input type="checkbox" name="hobby" value="游泳" />游泳
    <input type="checkbox" name="hobby" value="籃球" />籃球
    <input type="checkbox" name="hobby" value="足球" />足球
    <hr />
    <a href="javascript:void(0)" onclick="testById()">按照id獲取</a>
    <a href="javascript:void(0)" onclick="testByName()">按照name獲取</a>
    <a href="javascript:void(0)" onclick="testByTagName()">按照標籤名獲取</a>
    <a href="javascript:void(0);" onclick="testByClass();">按照class獲取</a>
</body>

說明：href="javascript:void(0)"：僞協議，表示不執行跳轉，而執行指定的點擊事件。

<script type="text/javascript">
    // 按照id獲取元素
    function testById() {
        // 返回單個對象
        var p = document.getElementById("p1");
        console.log(p);
        // 表示獲取元素開始標籤和結束標籤之間的html結構
        console.log(p.innerHTML);           
        console.log(p.innerText); // 表示獲取標籤之間的普通文本
    }

    // 按照name獲取元素
    function testByName() {
        // 對象數組
        var ho = document.getElementsByName("hobby");
        console.log(ho);
        for(var i = 0; i <= ho.length - 1; i++) {
            console.log(ho[i].value);
        }
    }

    // 按照標籤名獲取元素
    function testByTagName() {
        // 對象數組
        var inputArr = document.getElementsByTagName("input");
        for(var i = 0; i < inputArr.length; i++) {
            if(inputArr[i].type == "text") {
                console.log("text類型");
            } else if(inputArr[i].type == "checkbox") {
                if(inputArr[i].checked) {
                    console.log(inputArr[i].value);
                }
            }
        }
    }

    // 按照class屬性獲取元素
    function testByClass() {
        // 對象數組
        var ps = document.getElementsByClassName("para");
        console.log(ps[0].innerHTML);
        ps[0].innerHTML += "這是一段新的文本";
    }
</script>

建立節點和插入節點

不少時候咱們想要在某個位置插入一個新的節點，此時咱們首先須要有一個節點存在，能夠經過如下幾種方式建立新節點。

建立節點

方法	描述
createElement()	建立一個新的節點，須要傳入節點的標籤名稱，返回建立的元素對象
createTextNode()	建立一個文本節點，能夠傳入文本內容
innerHTML	也能達到建立節點的效果，直接添加到指定位置了

插入節點

方法	描述
write()	將任意的字符串插入到文檔中
appendChild()	向元素中添加新的子節點，做爲最後一個子節點
insertBefore()	向指定的已有的節點以前插入新的節點newItem：要插入的節點exsitingItem：參考節點須要參考父節點

<button onclick="add()">添加段落</button>
<div id="container"></div>

<script type="text/javascript">
    function add(){
        var container = document.getElementById('container')
        var paragraph = document.createElement('p');
        var txt = document.createTextNode('hello')
        paragraph.appendChild(txt)
        container.appendChild(paragraph)
}
</script>

添加 "段落、圖片、文本框、選項"

<body>
    <button onclick="addPara();">添加段落</button>
    <button onclick="addImg();">添加圖片</button>
    <button onclick="addTxt();">添加文本框</button>
    <button onclick="addOptions()">添加選項</button> 
    <select name="music">
        <option value="-1">你心內的一首歌</option>
        <option value="0">南山南</option>
        <option value="1">喜歡你</option>
    </select>
    <hr />
    <div id = "container"></div>
</body>

<script type="text/javascript"> 
    // 添加p節點
    function addPara(){
        // 獲取容器
        var container =document.getElementById("container");
        // 建立段落<p></p>
        var p =document.createElement('p');     
        // 第一種方式
        // 建立文本節點
        var txt=document.createTextNode("之後的你會感謝如今努力的你");
        // 將txt節點追加到p節點中
        p.appendChild(txt);
        // 將p節點追加到container節點中
        container.appendChild(p);       
        /*
        // 第二種方式
        // 向p節點中添加內容
        p.innerHTML = "之後的你會感謝如今努力的你";
        // 將p節點追加到container節點中
        container.appendChild(p);
        */  
        /*
        // 第三種方式
        // 將字符串類型的p標籤內容添加到container中，不會添加屢次
        var str = "<p>之後的你會感謝如今努力的你</p>";
        container.innerHTML = str;
        */
    }   

    // 添加圖片
    function addImg(){
        // 建立圖片
        var img = document.createElement("img") ;           
        /*
        // 設置屬性第一種方式
        // 設置img標籤的src屬性
        // img.src ="http://www.baidu.com/img/bd_logo1.png";
        */      
        // 設置屬性第二種方式
        // setAttribute() 方法添加指定的屬性，併爲其賦指定的值。
        // 設置img的src屬性
        img.setAttribute('src','http://www.baidu.com/img/bd_logo1.png');
        img.style.width = '300px';      
        img.style.height = '200px';         
        // 獲取容器
        var container =document.getElementById("container");
        // 將img節點追加到container中。
        container.appendChild(img);
    }   

    // 添加文本框
    function addTxt(){
        // 建立文本框
        var txt =document.createElement("input");   
        /*
        // 設置類型第一種方式
        txt.type = "text"; 
        txt.value = "添加成功";
        */
        // 設置類型第二種方式
        txt.setAttribute('type', 'text');
        txt.setAttribute('value', '添加成功');
        /*
         * txt.type = 'password'
         * txt.value = '123'
         */
        // 獲取容器
        var container =document.getElementById("container");
        // 將txt節點追加到container中。
        container.appendChild(txt);
    }

    // 添加下拉框的選項         
    function addOptions(){
        // 第一種方式
        /*
        // 建立下拉項
        var option = document.createElement("option") ;
        option.value = "2" ;
        option.text = "油菜花" ;
        // 獲取下拉框
        var sel = document.getElementsByTagName("select")[0];
        // 添加 下拉項 
        sel.appendChild(option);
        */                  
        // 第二種方式:
        var option = document.createElement("option") ;
        option.value = "2" ;
        option.text = "不應" ;
        // 獲取下拉框
        var sel = document.getElementsByTagName("select")[0];
        // 添加下拉項
        sel.options.add(option);        
        // 第三種方式: 添加下拉項
        var sel = document.getElementsByTagName("select")[0];
        sel.innerHTML += "<option value = '2'>英雄</option>" ;
    }           
</script>

間接查找節點

**方法\	屬性**	描述
childNodes	返回元素的一個子節點的數組
firstChild	返回元素的第一個子節點
lastChild	返回元素的最後一個子節點
nextSibling	返回元素的下一個兄弟節點
parentNode	返回元素的父節點
previousSibling	返回元素的上一個兄弟節點

刪除節點

**方法\	屬性**	描述
removeChild()	從元素中移除子節點

<script type="text/javascript">
    function delNode(){
        var programmer =document.getElementById("programmer");
        // 從父元素中刪除節點，獲取要刪除對象的父元素，而後從父元素中刪除該對象
        programmer.parentNode.removeChild(programmer);
    }
</script>
<body>
    <span id="programmer">程序猿</span>
    <a href="javascript:void(0)" onclick="delNode();">刪除</a>
</body>

ipt type="text/javascript">function delNode(){var programmer =document.getElementById("programmer");// 從父元素中刪除節點，獲取要刪除對象的父元素，而後從父元素中刪除該對象programmer.parentNode.removeChild(programmer);}</script><body>程序猿<a href=javascript:void(0) onclick="delNode();">刪除</a></body>