前端學習之JavaScript DOM以及DOM操作的基礎知識

 

在瞭解了javascript的語言基礎和特性後

javascript真正大放光彩的地方來了——這就是javascript DOM

 

Javascript DOM

DOM(Document Object Model),文檔對象模型。

是W3C組織推薦的處理可擴展標記語言(HTML或者XML)的標準編程接口;W3C已經定義了一系列DOM接口,通過這些DOM接口可以改變網頁的內容、結構和樣式。

簡單的說就是一套操作文檔內容的方法。

需要注意的是,我們需要把DOM當作一個整體,不能分割看待,即DOM(文檔對象模型)是一套操作文檔內容的方法。

這裏寫圖片描述

  • 文檔:一個頁面就是一個文檔,DOM中使用document表示
  • 元素:頁面中的所有標籤都是元素,DOM中使用element表示
  • 節點:網頁中的所有內容都是節點(標籤、屬性、文本、註釋等),DOM中使用node表示

DOM把以上內容看作都是對象

 

實例:

<!DOCTYPE html>
<html>
<head>
    <title>Shopping list</title>
    <meta charset="utf-8">
</head>
<body>
<h1>What to buy</h1>
<p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p>
<ul id="purchases">
    <li>A tin od beans</li>
    <li>Cheese</li>
    <li>Milk</li>
</ul>
</body>
</html>

用樹表示這個網頁的結構:

 

 

1、獲取DOM四種基本方法

1、getElementById()

2、getElementsByTagname()

3、getAttribute()

4、setAttribute()

 

常用的兩種解析:

1. getElementById():

參數:元素的ID值。 (元素節點簡稱元素) 
返回值:一個有指定ID的元素對象(元素是對象) 
注:這個方法是與document對象相關聯,只能由document對象調用。 
用法:document.getElementById(Id) 

例:

typeof document.getElementById("purchases");//object

代碼演練:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="time">2020-04-16</div>
    <script>
        // 1. 因爲我們文檔頁面從上往下加載,所以先得有標籤 所以我們script寫到標籤的下面
        // 2. get 獲得 element 元素 by 通過 駝峯命名法 
        // 3. 參數 id是大小寫敏感的字符串
        // 4. 返回的是一個元素對象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我們返回的元素對象 更好的查看裏面的屬性和方法
        console.dir(timer);
    </script>
</body>

</html>

看一下控制檯打印的是什麼

可以看到 console.log(timer)打印出來的是整個div標籤

timer類型是個對象

 

2. getElementsByTagName():

參數:元素名
返回值:一個對象數組。這個數組裏每個元素都是對象,每個對象分別對應着文檔裏給定標籤的一個元素。
注:這個方法可和一般元素關聯。這個方法允許我們把通配符當作它的參數,返回在某份html文檔裏總共有多少個元素節點。
用法:element.getElementsByTagName(TagName) 

例:

var items=document.getElementsByTagName("li");
items.length;//3
document.getElementsByTagName(“*”);//12

 

 

2、事件基礎

3.1 事件概述

JavaScript使我們有能力創建動態頁面,而事件是可以被JavaScript偵測到的行爲。

簡單理解:觸發——>響應機制

網頁中每個元素都可以產生某些可以觸發JavaScript的事件,例如,我們可以在用戶點擊某按鈕產生一個事件,然後去執行某些操作

3.2 事件三要素

事件源 、事件類型、事件處理程序,我們也稱爲事件三要素

(1) 事件源 事件被觸發的對象   誰  
(2) 事件類型  如何觸發 什麼事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下
(3) 事件處理程序  通過一個函數賦值的方式 完成

代碼實例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 點擊一個按鈕,彈出對話框
        // 1. 事件是有三部分組成  事件源  事件類型  事件處理程序   我們也稱爲事件三要素
        //(1) 事件源 事件被觸發的對象   誰  按鈕
        var btn = document.getElementById('btn');
        //(2) 事件類型  如何觸發 什麼事件 比如鼠標點擊(onclick) 還是鼠標經過 還是鍵盤按下
        //(3) 事件處理程序  通過一個函數賦值的方式 完成
        btn.onclick = function() {
            alert('點秋香');
        }
    </script>
</body>

</html>

運行結果

 

3.3 執行事件的步驟

1、獲取事件源

2、註冊事件(綁定事件)

3、添加事件處理程序(採取函數賦值形式)

 

代碼實戰

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>123</div>
    <script>
        // 執行事件步驟
        // 點擊div 控制檯輸出 我被選中了
        // 1. 獲取事件源
        var div = document.querySelector('div');
        // 2.綁定事件 註冊事件
        // div.onclick 
        // 3.添加事件處理程序 
        div.onclick = function() {
            console.log('我被選中了');

        }
    </script>
</body>

</html>

運行結果

鼠標點擊123—>控制檯打印

 

常用的DOM事件

  • onclick事件---當用戶點擊時執行
  • onload事件---當用戶進入時執行
  • onunload事件---用用戶離開時執行
  • onmouseover事件---當用戶鼠標指針移入時執行
  • onmouseout事件---當用戶鼠標指針移出時執行
  • onmousedown事件---當用戶鼠標摁下時執行
  • onmouseup事件---當用戶鼠標鬆開時執行

 

 後續~~~~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章