DOM介紹(學(xué)習(xí)筆記)

DOM是什么?

  • DOM(文檔對(duì)象模型)是針對(duì) HTML 和 XML 文檔的一個(gè) API,通過(guò) DOM 可以去改變文檔。
  • 一個(gè) web 網(wǎng)頁(yè)就是一個(gè)文檔,使用 DOM 改變文檔就是使用 DOM 定義的一些方法操作具體的節(jié)點(diǎn)。
    eg:用getElementById 來(lái)根據(jù)元素 id 來(lái)查找元素節(jié)點(diǎn)
<html lang="en">
  <head>
    <title>我是title</title>
  </head>
  <body>
    <a href="#">我是文本鏈接</a>
    <p id="myId">我是p標(biāo)簽</p>
  </body>
</html>

對(duì)于一個(gè) HTML 來(lái)說(shuō),文檔節(jié)點(diǎn) Document (是看不到的)就是它的根節(jié)點(diǎn),這個(gè)根節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象就是 document ,我們可以通過(guò)根節(jié)點(diǎn)來(lái)訪問(wèn)它的子節(jié)點(diǎn)(Element 、Text)

Document 類型

Document 是整個(gè)文檔的根節(jié)點(diǎn),我們想要訪問(wèn)某個(gè)節(jié)點(diǎn)的時(shí)候都必須通過(guò) document 這個(gè)實(shí)例對(duì)象
常用屬性:

document.documentElement  // 可以直接拿到 html 節(jié)點(diǎn)的引用
document.title //  可以直接獲取 title 節(jié)點(diǎn)的文本 “我是title”
document.URL // 獲取 URL

常用方法:

ocument.getElementById // docment.getElementById('myId') 可以獲取到屬性 id 為 ‘myId’ 的節(jié)點(diǎn),在上面的代碼中獲取的也就是 p 節(jié)點(diǎn)
document.getElementsByTagName //docment.getElementByTagName('p') 可以獲取到節(jié)點(diǎn)為 p 的所有節(jié)點(diǎn)集

Element 類型

  • 使用 document 對(duì)象來(lái)獲取節(jié)點(diǎn)時(shí),返回的節(jié)點(diǎn)類型就是 Element 類型
  • 想要對(duì)獲取的節(jié)點(diǎn)進(jìn)行操作,我們只需要使用 Element 包含的屬性和方法

常用的屬性:

var myNode = document.getElementById('myId');
myNode.id // 獲取該節(jié)點(diǎn)的 id ,即 ‘myId‘
myNode.tagName // 獲取該節(jié)點(diǎn)的節(jié)點(diǎn)名,即 'P',大部分瀏覽器返回的標(biāo)簽名都是大寫(xiě)
myNode.className //獲取該節(jié)點(diǎn)的 class

操作節(jié)點(diǎn)屬性的常用方法:

//假如我們有一個(gè) input,我們想要獲取 input 的 type 屬性,并對(duì) type 屬性進(jìn)行操作
<input type='text' id='input'/>
  
var myNode = document.getElementById('input')
myNode.getAttribute('type') // 獲取屬性值,即 ‘text’
myNode.setAttribute('type','password') // 將 type 屬性值改為 password 類型
myNode.removeAttribute('type') // 移除 type 屬性
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??DOM(文檔對(duì)象模型)是針對(duì) HTML 和 XML 文檔的一個(gè) API(應(yīng)用程序編程接口)。 ??DOM 描繪...
    霜天曉閱讀 3,866評(píng)論 0 7
  • ??DOM 1 級(jí)主要定義的是 HTML 和 XML 文檔的底層結(jié)構(gòu)。 ??DOM2 和 DOM3 級(jí)則在這個(gè)結(jié)構(gòu)...
    霜天曉閱讀 1,599評(píng)論 1 3
  • 之前通過(guò)深入學(xué)習(xí)DOM的相關(guān)知識(shí),看了慕課網(wǎng)DOM探索之基礎(chǔ)詳解篇這個(gè)視頻(在最近看第三遍的時(shí)候,準(zhǔn)備記錄一點(diǎn)東西...
    微醺歲月閱讀 4,761評(píng)論 2 61
  • 第3章 基本概念 3.1 語(yǔ)法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡(jiǎn)單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,513評(píng)論 0 21
  • 今天,中國(guó)首部3D戰(zhàn)爭(zhēng)電影《鋼刀》上映。 評(píng)分,不出意外。 內(nèi)地市場(chǎng)在狂奔,但內(nèi)地戰(zhàn)爭(zhēng)片,一直停滯。 這十年,扒開(kāi)...
    Sir電影閱讀 1,081評(píng)論 2 21

友情鏈接更多精彩內(nèi)容