快捷導(dǎo)航

JavaScript中DOM和BOM原理詳析

更新時(shí)間：2022年09月29日 08:33:32 作者：心動(dòng)重災(zāi)區(qū)

這篇文章主要介紹了JavaScript中DOM和BOM原理詳析，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

前言

本系列用于撰寫(xiě)作者在學(xué)習(xí)JavaScript及瀏覽JavaScript相關(guān)書(shū)籍時(shí)所遇到的一些問(wèn)題及心得

DOM

首先我們要了解JavaScript里面一個(gè)非常重要的模型：文檔對(duì)象模型（DOM，全稱(chēng)Document Object Model），這是一個(gè)應(yīng)用編程的API接口，我們一般在HTML頁(yè)面中使用擴(kuò)展的XML，提到DOM，我們就得想到節(jié)點(diǎn)，換句話(huà)說(shuō)，HTML或者XML頁(yè)面是由不同的節(jié)點(diǎn)組成的頁(yè)面

<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>Title</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

上圖是一個(gè)很明顯的HelloWorld的界面，也是大多數(shù)程序員“夢(mèng)”開(kāi)始的地方，我們現(xiàn)在的重點(diǎn)不在如何寫(xiě)代碼，本文重在講解html的結(jié)構(gòu)分析

通過(guò)上圖我們可以看到，使用DOM節(jié)點(diǎn)對(duì)HTML的結(jié)構(gòu)進(jìn)行分解

HTML分為兩部分，head和body，head“分配”下去title（標(biāo)題）和Sample Page；body分配下去則是段落標(biāo)簽p及網(wǎng)頁(yè)內(nèi)容，看到這里，一些讀者會(huì)產(chǎn)生如下疑問(wèn)

為什么要?jiǎng)?chuàng)建DOM節(jié)點(diǎn)或者畫(huà)一個(gè)類(lèi)似于這樣的結(jié)構(gòu)圖？

通過(guò)這個(gè)結(jié)構(gòu)圖，我們能夠很清晰的看到文檔的結(jié)構(gòu)，有助于我們快速開(kāi)發(fā)前端HTML頁(yè)面，盡量減少后期代碼冗余帶來(lái)的不必要的麻煩，因此，我們使用DOM API可以輕松的刪除、添加、替換、修改節(jié)點(diǎn)從而更改文檔的結(jié)構(gòu)

接下來(lái)我們重點(diǎn)講講DOM這個(gè)大家伙

DOM的家世

1.DOM為啥這么有必要？

首先我們得明白一個(gè)問(wèn)題，世界上有諸多瀏覽器，如360、IE、Edge、Chrome等等，這些瀏覽器都不是同一家公司研發(fā)出來(lái)的，那么就意味著遵守的網(wǎng)頁(yè)規(guī)則也不一樣，瀏覽器軟件是無(wú)窮無(wú)盡的，但是咱們的技術(shù)得跟上呀，因此我們需要一個(gè)穩(wěn)定的結(jié)構(gòu)去能夠兼容各大瀏覽器運(yùn)行HTML，DOM應(yīng)運(yùn)而生。此處插個(gè)題外話(huà)，DOM標(biāo)準(zhǔn)是W3C制定的哦，也就是咱們熟悉的萬(wàn)維網(wǎng)聯(lián)盟

2.DOM的迭代，有啥區(qū)別？

在1998年的10月，DOM Level 1成為了W3C的推薦標(biāo)準(zhǔn)，這個(gè)DOM Level 1是由DOM Core 和DOM HTML組成的。前者提供了上文說(shuō)到的XML文檔（映射關(guān)系），后者在前者的基礎(chǔ)上進(jìn)行擴(kuò)增，增加了特定于HTML的對(duì)象和方法

3.注意注意??！

DOM并不是JavaScript的獨(dú)生子，其他的一些語(yǔ)言也可以實(shí)現(xiàn)DOM操作，對(duì)于瀏覽器來(lái)說(shuō)，DOM就是使用ECMAScript實(shí)現(xiàn)的，現(xiàn)在已經(jīng)成為了JavaScript的一大組成部分（有種先入為主的感覺(jué)）

關(guān)于DOM Level 2嘛，估計(jì)大部分讀者不算太重視，畢竟誰(shuí)學(xué)編程語(yǔ)言是專(zhuān)門(mén)來(lái)看DOM的定義和陳年舊事的對(duì)吧，簡(jiǎn)單的來(lái)說(shuō)，DOM Level 2通過(guò)對(duì)象借口支持了層疊樣式表，也就是咱們熟悉的CSS~

剩下的DOM資料講解不再在本文中贅述，有興趣的讀者可以買(mǎi)一本 《JavaScript高級(jí)程序設(shè)計(jì)（第四版）》 看看哦

DOM的好兄弟BOM！

說(shuō)完了DOM，咱們來(lái)看看BOM是個(gè)啥玩意，用腳想都知道，這玩意肯定跟瀏覽器脫不了干系~

簡(jiǎn)單的來(lái)說(shuō)，BOM主要針對(duì)的是瀏覽器窗口的問(wèn)題，比如彈出新窗口，移動(dòng)、縮放窗口，加載窗口信息等等~

畢竟，你也不想因?yàn)闉g覽器窗口的問(wèn)題被DOM知道吧？

還是那句話(huà)，剩下的BOM資料講解不再在本文中贅述，有興趣的讀者可以買(mǎi)一本 《JavaScript高級(jí)程序設(shè)計(jì)（第四版）》 慢慢摸索

小結(jié)

到此這篇關(guān)于JavaScript中DOM和BOM原理詳析的文章就介紹到這了,更多相關(guān)JS DOM和BOM內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中DOM和BOM原理詳析

目錄

前言

DOM

為什么要?jiǎng)?chuàng)建DOM節(jié)點(diǎn)或者畫(huà)一個(gè)類(lèi)似于這樣的結(jié)構(gòu)圖？