2020-4-18 前端達(dá)人
在了解了javascript的語言基礎(chǔ)和特性后
javascript真正大放光彩的地方來了——這就是javascript DOM
Javascript DOM
DOM(Document Object Model),文檔對(duì)象模型。
是W3C組織推薦的處理可擴(kuò)展標(biāo)記語言(HTML或者XML)的標(biāo)準(zhǔn)編程接口;W3C已經(jīng)定義了一系列DOM接口,通過這些DOM接口可以改變網(wǎng)頁的內(nèi)容、結(jié)構(gòu)和樣式。
簡(jiǎn)單的說就是一套操作文檔內(nèi)容的方法。
需要注意的是,我們需要把DOM當(dāng)作一個(gè)整體,不能分割看待,即DOM(文檔對(duì)象模型)是一套操作文檔內(nèi)容的方法。
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>
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頁面從上往下加載,所以先得有標(biāo)簽 所以我們script寫到標(biāo)簽的下面 // 2. get 獲得 element 元素 by 通過 駝峰命名法 // 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)打印的是什么
可以看到 console.log(timer)打印出來的是整個(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)頁面,而事件是可以被JavaScript偵測(cè)到的行為。
簡(jiǎn)單理解:觸發(fā)——>響應(yīng)機(jī)制
網(wǎng)頁中每個(gè)元素都可以產(chǎn)生某些可以觸發(fā)JavaScript的事件,例如,我們可以在用戶點(diǎn)擊某按鈕產(chǎn)生一個(gè)事件,然后去執(zhí)行某些操作
3.2 事件三要素
事件源 、事件類型、事件處理程序,我們也稱為事件三要素
(1) 事件源 事件被觸發(fā)的對(duì)象 誰
(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過 還是鍵盤按下
(3) 事件處理程序 通過一個(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ì)象 誰 按鈕 var btn = document.getElementById('btn'); //(2) 事件類型 如何觸發(fā) 什么事件 比如鼠標(biāo)點(diǎn)擊(onclick) 還是鼠標(biāo)經(jīng)過 還是鍵盤按下 //(3) 事件處理程序 通過一個(gè)函數(shù)賦值的方式 完成 btn.onclick = function() { alert('點(diǎn)秋香'); } </script> </body> </html>
運(yùn)行結(jié)果
1、獲取事件源
2、注冊(cè)事件(綁定事件)
3、添加事件處理程序(采取函數(shù)賦值形式)
代碼實(shí)戰(zhàn)
<!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事件---用用戶離開時(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)松開時(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
藍(lán)藍(lán)設(shè)計(jì)的小編 http://yvirxh.cn