JavaScript的DOM實例分析

這篇文章主要介紹了JavaScript的DOM實例分析的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript的DOM實例分析文章都會有所收獲，下面我們一起來看看吧。

一、DOM

文檔對象模型（簡稱DOM），是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口。W3C已經定義了一系列的DOM接口，通過這些DOM接口可以改變網頁的內容、結構和樣式。

二、DOM樹

DOM把以上內容都看做是對象，我們獲取過來的DOM元素是一個對象（object），所以稱為文檔對象模型。

文檔：一個頁面就是一個文檔，DOM中使用document表示。

元素：頁面中的所有標簽都是元素，DOM中使用element表示。

節點：網頁中的所有內容都是節點（標簽、屬性、文本、注釋等），DOM中使用node表示。

三、DOM操作

1·1 獲取元素

獲取頁面中元素可以使用以下幾種方式：

根據ID獲取，getElementById('ID名')；

根據標簽名獲取，getElementsByTagName('標簽名')；

通過HTML5新增的方法獲取，getElementsByClassName('類名)，document.querySelector('（./#）選擇器')，document.querySelectorAll（'（./#）選擇器')；

特殊元素獲取，document.body;（獲取body元素），document.documentElement;（獲取html元素）；

注意：

通過標簽名獲取：因為得到的是一個對象的集合，所以我們想要操作里面的元素就需要遍歷，得到元素對象是動態的。

根據ID獲取元素是唯一的。

H5新增方法：根據類名返回的是元素對象集合。根據指定選擇器返回的是第一個元素對象。

1·2 事件基礎

事件概述：JavaScript使我們有能力創建動態頁面，而事件是可以被JavaScript偵測到的行為。

簡單理解：觸發——響應機制。

網頁中的每個元素都可以產生某些可以觸發JavaScript的事件。

事件是有三部分組成 ：事件源 事件類型 事件處理程序 我們也稱為事件三要素

例如：

<script>

        //點擊一個按鈕，彈出對話框

        //1、事件是有三部分組成 事件源 事件類型 事件處理程序 我們也稱為事件三要素

        //(1)事件源 事件被觸發的對象 誰 按鈕

        var btn = document.getElementById('btn');

        //(2)事件類型 如何觸發 什么事件 比如鼠標點擊（onclick）還是鼠標經過 還是鍵盤按下

        //(3)事件處理程序 通過一個函數賦值的方式 完成

        btn.onclick = function() {

            alert('點秋香');

        }

</script>

執行事件的步驟：

 例如：

<script>

        //執行事件步驟

        //點擊div，控制臺輸出，我被選中了

        //1、獲取事件源

        var div = document.querySelector('div');

        //2、綁定事件 注冊事件

        //div.onclick

        //3、添加事件處理程序

        div.onclick = function() {

            console.log('我被選中了');

        }

</script>

1&middot;3 鼠標事件

 補充鼠標事件：

mouseenter：移入事件。

mouseleave：移出事件。

contextmenu：右鍵事件。

selectstart：禁止鼠標選中。

1&middot;4 鍵盤事件

 例如：

<script>

        // 常用的鍵盤事件

        //1. keyup 按鍵彈起的時候觸發 

        // document.onkeyup = function() {

        //         console.log('我彈起了');

        //     }

        document.addEventListener('keyup', function() {

            console.log('我彈起了');

        })

        //3. keypress 按鍵按下的時候觸發  不能識別功能鍵 比如 ctrl shift 左右箭頭啊

        document.addEventListener('keypress', function() {

                console.log('我按下了press');

            })

            //2. keydown 按鍵按下的時候觸發  能識別功能鍵 比如 ctrl shift 左右箭頭啊

        document.addEventListener('keydown', function() {

                console.log('我按下了down');

            })

            // 4. 三個事件的執行順序  keydown -- keypress -- keyup

</script>

1&middot;5 操作元素

JavaScript的DOM操作可以改變網頁內容、結構和樣式，我們可以利用DOM操作元素來改變元素里面的內容、屬性等。

1&middot;5&middot;1 改變元素內容

element.innerText;從起始位置到終止位置的內容，但它去除html標簽，同時空格和換行也會去掉

element.innerHTML;起始位置到終止位置的全部內容，包括html標簽，同時保留空格和換行

例如：

<script>

        //innerText 和 innerHTML的區別

        //1、innerText 不識別html標簽 非標準 去除空格和換行

        var div = document.querySelector('div');

        //div.innerText='<strong>今天是：</strong> 2019';

        //2、innerHTML 識別html標簽 W3C標準 保留空格和換行

        div.innerHTML = '<strong>今天是：</strong> 2019';

        //這兩個屬性是可讀寫的 可以獲取元素里面的內容

        var p = document.querySelector('p');

        console.log(p.innerText);

        console.log(p.innerHTML);

</script>

關于“JavaScript的DOM實例分析”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript的DOM實例分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。