快捷導(dǎo)航

JavaScript中DOM和BOM原理詳析

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

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

前言

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

DOM

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

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

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

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

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

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

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

接下來我們重點(diǎn)講講DOM這個大家伙

DOM的家世

1.DOM為啥這么有必要？

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

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

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

3.注意注意??！

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

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

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

DOM的好兄弟BOM！

說完了DOM，咱們來看看BOM是個啥玩意，用腳想都知道，這玩意肯定跟瀏覽器脫不了干系~

簡單的來說，BOM主要針對的是瀏覽器窗口的問題，比如彈出新窗口，移動、縮放窗口，加載窗口信息等等~

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

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

小結(jié)

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

您可能感興趣的文章:

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

JavaScript中DOM和BOM原理詳析

目錄

前言

DOM

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