前端學(xué)習(xí)之JavaScript DOM以及DOM操作的基礎(chǔ)知識(shí)

2020-4-18    前端達(dá)人

在了解了javascript的語(yǔ)言基礎(chǔ)和特性后

javascript真正大放光彩的地方來(lái)了——這就是javascript DOM


Javascript DOM
DOM(Document Object Model)，文檔對(duì)象模型。

是W3C組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言（HTML或者XML）的標(biāo)準(zhǔn)編程接口；W3C已經(jīng)定義了一系列DOM接口，通過(guò)這些DOM接口可以改變網(wǎng)頁(yè)的內(nèi)容、結(jié)構(gòu)和樣式。

簡(jiǎn)單的說(shuō)就是一套操作文檔內(nèi)容的方法。

需要注意的是，我們需要把DOM當(dāng)作一個(gè)整體，不能分割看待，即DOM（文檔對(duì)象模型）是一套操作文檔內(nèi)容的方法。


  • 文檔：一個(gè)頁(yè)面就是一個(gè)文檔，DOM中使用document表示
  • 元素：頁(yè)面中的所有標(biāo)簽都是元素，DOM中使用element表示
  • 節(jié)點(diǎn)：網(wǎng)頁(yè)中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽、屬性、文本、注釋等），DOM中使用node表示

DOM把以上內(nèi)容看作都是對(duì)象 

<!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>



用樹(shù)表示這個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)：

aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2ktYmV0YS8xODQ2ODAyLzIwMTkxMi8xODQ2ODAyLTIwMTkxMjIzMTcxMDI5MTY1LTExNTE0OTgxMDMucG5n.jpg

1、獲取DOM四種基本方法
1、getElementById()

2、getElementsByTagname()

3、getAttribute()

4、setAttribute()

 

常用的兩種解析：

1. getElementById()：

參數(shù)：元素的ID值。 （元素節(jié)點(diǎn)簡(jiǎn)稱元素） 
返回值：一個(gè)有指定ID的元素對(duì)象（元素是對(duì)象） 
注：這個(gè)方法是與document對(duì)象相關(guān)聯(lián)，只能由document對(duì)象調(diào)用。 
用法：document.getElementById(Id) 

例：

<!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. 因?yàn)槲覀兾臋n頁(yè)面從上往下加載，所以先得有標(biāo)簽 所以我們script寫到標(biāo)簽的下面
        // 2. get 獲得 element 元素 by 通過(guò) 駝峰命名法 
        // 3. 參數(shù) id是大小寫敏感的字符串
        // 4. 返回的是一個(gè)元素對(duì)象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5. console.dir 打印我們返回的元素對(duì)象 更好的查看里面的屬性和方法
        console.dir(timer);
    </script>
</body>

</html>




看一下控制臺(tái)打印的是什么

20200416221227181.png


可以看到 console.log(timer)打印出來(lái)的是整個(gè)div標(biāo)簽

timer類型是個(gè)對(duì)象

 

2. getElementsByTagName():

參數(shù)：元素名
返回值：一個(gè)對(duì)象數(shù)組。這個(gè)數(shù)組里每個(gè)元素都是對(duì)象，每個(gè)對(duì)象分別對(duì)應(yīng)著文檔里給定標(biāo)簽的一個(gè)元素。
注：這個(gè)方法可和一般元素關(guān)聯(lián)。這個(gè)方法允許我們把通配符當(dāng)作它的參數(shù)，返回在某份html文檔里總共有多少個(gè)元素節(jié)點(diǎn)。
用法：element.getElementsByTagName(TagName) 

例：

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

 

2、事件基礎(chǔ)
3.1 事件概述
JavaScript使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面，而事件是可以被JavaScript偵測(cè)到的行為。

簡(jiǎn)單理解：觸發(fā)——>響應(yīng)機(jī)制

網(wǎng)頁(yè)中每個(gè)元素都可以產(chǎn)生某些可以觸發(fā)JavaScript的事件，例如，我們可以在用戶點(diǎn)擊某按鈕產(chǎn)生一個(gè)事件，然后去執(zhí)行某些操作

3.2 事件三要素
事件源 、事件類型、事件處理程序，我們也稱為事件三要素

(1) 事件源 事件被觸發(fā)的對(duì)象   誰(shuí)  
(2) 事件類型  如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過(guò) 還是鍵盤按下
(3) 事件處理程序  通過(guò)一個(gè)函數(shù)賦值的方式 完成

代碼實(shí)例

<!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>
        // 點(diǎn)擊一個(gè)按鈕，彈出對(duì)話框
        // 1. 事件是有三部分組成  事件源  事件類型  事件處理程序   我們也稱為事件三要素
        //(1) 事件源 事件被觸發(fā)的對(duì)象   誰(shuí)  按鈕
        var btn = document.getElementById('btn');
        //(2) 事件類型  如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過(guò) 還是鍵盤按下
        //(3) 事件處理程序  通過(guò)一個(gè)函數(shù)賦值的方式 完成
        btn.onclick = function() {
            alert('點(diǎn)秋香');
        }
    </script>
</body>

</html>


運(yùn)行結(jié)果

20200416223238828.png

3.3 執(zhí)行事件的步驟

1、獲取事件源

2、注冊(cè)事件（綁定事件）

3、添加事件處理程序（采取函數(shù)賦值形式）

 

代碼實(shí)戰(zhàn) 


        
    

            
  1. 

                
    

                
    

            
    2. 

        




<!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>
        // 執(zhí)行事件步驟
        // 點(diǎn)擊div 控制臺(tái)輸出 我被選中了
        // 1. 獲取事件源
        var div = document.querySelector('div');
        // 2.綁定事件 注冊(cè)事件
        // div.onclick 
        // 3.添加事件處理程序 
        div.onclick = function() {
            console.log('我被選中了');

        }
    </script>
</body>

</html>



常用的DOM事件
onclick事件---當(dāng)用戶點(diǎn)擊時(shí)執(zhí)行
onload事件---當(dāng)用戶進(jìn)入時(shí)執(zhí)行
onunload事件---用用戶離開(kāi)時(shí)執(zhí)行
onmouseover事件---當(dāng)用戶鼠標(biāo)指針移入時(shí)執(zhí)行
onmouseout事件---當(dāng)用戶鼠標(biāo)指針移出時(shí)執(zhí)行
onmousedown事件---當(dāng)用戶鼠標(biāo)摁下時(shí)執(zhí)行
onmouseup事件---當(dāng)用戶鼠標(biāo)松開(kāi)時(shí)執(zhí)行
 
————————————————
版權(quán)聲明：本文為CSDN博主「那是我吶」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42402867/article/details/105567787

分享本文至：

日歷

鏈接

個(gè)人資料

存檔