【學習筆記】：DOM對象及事件綁定

時間 2020-02-29

標籤學習筆記 dom 對象事件綁定欄目 HTML 简体版

原文原文鏈接

1、DOM的概念

DOM的英文全稱是 Document Object Model，即文檔對象模型，是用以操做HTML文檔和XML文檔的API。數組

W3C將DOM分爲三個不一樣的部分，分別是：核心DOM，XML DOM，HTML DOM。瀏覽器

2、DHTML與HTML DOM

所謂DHTML即Dynamic HTML，是動態的HTML。app

這門技術可使用客戶端腳本語言，利用HTML DOM 控制HTML的元素，將靜態的HTML內容變成動態。dom

本篇主要是對HTML DOM的學習總結。函數

HTML DOM能夠把HTML文檔看做一棵節點樹，能夠利用DOM對象的屬性或方法對這些節點進行增刪改查的操做。學習

3、Document對象

Document對象表明載入瀏覽器的HTML文檔，能夠經過全局對象Window得到Document對象。code

獲取元素方法

getElementById（id值）：根據id值獲取一個元素。htm

getElementsByName（name值）：根據name值獲取一個元素數組。對象

getElementsByTagName（tagName值）：根據標籤名獲取一個元素數組。

在HTML DOM中，每一個部分都是節點：文檔自己，元素，屬性，註釋都是節點。

4、Element對象

Element對象表明文檔中的元素，能夠經過Document的許多方法獲取。

與屬性相關方法

setAttribute(屬性名，屬性值)：將第一個input標籤的type屬性設置爲button。

document.getElementByTagName("input")[0].setAttribute("type","button");

removeAttribute(屬性名)：將id爲"city"的元素的style屬性移除。

document.getElementById("city").removeAttribute("style");

5、對DOM對象的操做

增刪改查。

一、DOM對象的屬性

innerHTML：元素（節點）的文本值。

parentNode：元素（節點）的父節點。

childNodes：元素（節點）的子節點。

二、建立元素

document.createElement("節點類型");//爲指定的標籤建立一個元素的實例。

三、掛載元素

parentElement.appendChild(childElement);//在父元素最後位置添加子元素。
parentElement.insertBefore(newElement,oldElement);//將元素做爲父對象的子元素插入其中。

四、刪除元素

parentElement.removeChild(chileElement);//刪除父元素的指定子元素。

五、克隆元素

newElement = oldElement.cloneNode(boolean);//默認爲false，即不克隆節點中的子節點。

6、調整元素樣式的方式

直接利用元素的style屬性節點設置。

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function changeStyle() {
                document.getElementById("p1").style.border= "red 1px solid";
            }
        </script>
    </head>
    <body>
        <p id="p1">hello</p>
        <input type="button" onclick="changeStyle()" value="點擊更改樣式">
    </body>

實現定義類選擇器的樣式，點擊事件觸發時，更改其className值便可。

<head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            .change {
                border: red 1px solid;
            }
        </style>
        <script>
            function changeStyle() {
                document.getElementById("p1").className = "change";
            }
        </script>
    </head>
    <body>
        <p id="p1">hello</p>
        <input type="button" onclick="changeStyle()" value="點擊更改樣式">
    </body>

7、Event對象

Event對象表明事件的狀態：如鼠標的位置，鼠標是否點擊，鍵盤是否按下等等。

一般與函數結合使用，且函數不會再事件發生前執行。

一、常見的幾類事件

點擊事件

onclick：單擊事件
ondbclick：雙擊事件

焦點事件

onblur：失去焦點，通常用於表單校驗。
onfocus：得到焦點。

加載事件

onload：圖片或頁面加載完成。

鼠標事件

onmousedown：鼠標按下。
onmouseup：鼠標鬆開。
ommousemove：鼠標移動。
onmouseover：鼠標移到元素上。
onmouseout：鼠標從元素上移開。

鍵盤事件

onkeydown：鍵盤按下。
onkeyup：鍵盤松開。
onkeypress：鍵盤按下並鬆開。

選中和改變事件

onchange：域的內容被改變
onselect：文本被選中

表單事件

onsubmit ：提交表單按鈕被點擊。（事件綁定的函數返回false則表單將會被阻止提交）
onreset：重置按鈕被點擊。

二、綁定事件的幾種方法

直接在HTML標籤上，指定事件的屬性，屬性值即爲js代碼）。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function fun() {
                alert("!!");
            }
        </script>
    </head>
    <body>
        <p id="p1">hello</p>
        <input type="button" onclick="fun()" value="點擊觸發">
    </body>
</html>

經過DOM元素對象與匿名方法指定實現屬性。

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            window.onload = function () {
                var ele = document.getElementsByTagName("input")[0];
                ele.onclick = function () {
                    alert("!!");
                }
            }
        </script>
    </head>
    <body>
        <p id="p1">hello</p>
        <input type="button" value="點擊觸發">
    </body>
</html>

還有其餘的方法，之後遇到的時候再作總結。

參考：W3School