API之DOM

時間 2019-11-18

標籤 api dom 欄目 HTML 简体版

原文原文鏈接

文檔對象模型（Document Object Model，簡稱DOM）；
是標準的編程接口
又被稱爲文檔樹模型
- 文檔：一個網頁能夠稱爲文檔
- 節點：網頁中的全部內容都是節點（標籤、屬性、文本、註釋等）
- 元素：網頁中的標籤
- 屬性：標籤的屬性
DOM常常進行的操做
- 獲取元素
- 對元素進行操做(設置其屬性或調用其方法)
- 動態建立元素
- 事件(什麼時機作相應的操做)

獲取頁面元素

獲取頁面元素的緣由

只有咱們獲取了頁面元素之後，咱們才能夠對它進行操做html

獲取頁面元素的方法

根據id名獲取頁面元素java

var box = document.getElementById('box');
        console.log(box);//返回 id爲box的div

根據標籤名獲取頁面元素編程

var msg = document.getElementsByTagName('div');
        console.log(msg); //返回 HTMLCollection(n)，html中有幾個div， n就爲多少   是一個僞數組，可遍歷

根據類名獲取頁面元素(有兼容性問題)數組

var mains = document.getElementsByClassName('main');
    for (var i = 0; i < mains.length; i++) {
    var main = mains[i];
    console.log(main);
}

根據name獲取頁面元素(有兼容性問題)dom

var inputs = document.getElementsByName('hobby');  //用於form中
    for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    console.log(input);

根據選擇器獲取元素(有兼容性問題)函數

var text = document.querySelector('#text');
        console.log(text);

        var boxes = document.querySelectorAll('.box');
        for (var i = 0; i < boxes.length; i++) {
        var box = boxes[i];
        console.log(box);
}

事件

什麼是事件

事件：觸發-響應機制3d

事件三要素

事件源:觸發(被)事件的元素 (.on事件名前面的就是事件源 )
事件名稱: click 點擊事件
事件處理程序:事件觸發後要執行的代碼(函數形式)

事件的基本使用

var box = document.getElementById('box');
    box.onclick = function() {
    alert('別點我，ok？');  
};

案例

點擊按鈕彈出提示框

<body>
    <input type="button" value="點我" id="btn">


    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            alert("Do not click again!");
        }
    </script>
</body>

點擊按鈕切換圖片

//獲取頁面元素
        var btn = document.getElementById('btn');
        var mv = document.getElementById('mv');
        //定義一個變量記錄照片的狀態
        flag = 1;
        //觸發事件
        btn.onclick = function() {
            if (flag === 1) {
                //mv是個僞數組，因此能夠用對象的方法改變mv內的屬性
                mv.src = 'images/b.jpg';
                flag = 2; // 讓下一次點擊時能夠切換回上一張
            } else if (flag === 2) {
                mv.src = 'images/a.jpg';
                flag = 1;
            }
        }