JavaScript中DOM和BOM原理詳析
前言
本系列用于撰寫作者在學習JavaScript及瀏覽JavaScript相關書籍時所遇到的一些問題及心得
DOM
首先我們要了解JavaScript里面一個非常重要的模型：文檔對象模型（DOM，全稱Document Object Model），這是一個應用編程的API接口，我們一般在HTML頁面中使用擴展的XML，提到DOM，我們就得想到節(jié)點，換句話說，HTML或者XML頁面是由不同的節(jié)點組成的頁面
<!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)在的重點不在如何寫代碼，本文重在講解html的結構分析
通過上圖我們可以看到，使用DOM節(jié)點對HTML的結構進行分解
HTML分為兩部分，head和body，head“分配”下去title（標題）和Sample Page；body分配下去則是段落標簽p及網(wǎng)頁內(nèi)容，看到這里，一些讀者會產(chǎn)生如下疑問
為什么要創(chuàng)建DOM節(jié)點或者畫一個類似于這樣的結構圖？
通過這個結構圖，我們能夠很清晰的看到文檔的結構，有助于我們快速開發(fā)前端HTML頁面，盡量減少后期代碼冗余帶來的不必要的麻煩，因此，我們使用DOM API可以輕松的刪除、添加、替換、修改節(jié)點從而更改文檔的結構
接下來我們重點講講DOM這個大家伙
DOM的家世
1.DOM為啥這么有必要？
首先我們得明白一個問題，世界上有諸多瀏覽器，如360、IE、Edge、Chrome等等，這些瀏覽器都不是同一家公司研發(fā)出來的，那么就意味著遵守的網(wǎng)頁規(guī)則也不一樣，瀏覽器軟件是無窮無盡的，但是咱們的技術得跟上呀，因此我們需要一個穩(wěn)定的結構去能夠兼容各大瀏覽器運行HTML，DOM應運而生。此處插個題外話，DOM標準是W3C制定的哦，也就是咱們熟悉的萬維網(wǎng)聯(lián)盟
2.DOM的迭代，有啥區(qū)別？
在1998年的10月，DOM Level 1成為了W3C的推薦標準，這個DOM Level 1是由DOM Core 和DOM HTML組成的。前者提供了上文說到的XML文檔（映射關系），后者在前者的基礎上進行擴增，增加了特定于HTML的對象和方法
3.注意注意??！
DOM并不是JavaScript的獨生子，其他的一些語言也可以實現(xiàn)DOM操作，對于瀏覽器來說，DOM就是使用ECMAScript實現(xiàn)的，現(xiàn)在已經(jīng)成為了JavaScript的一大組成部分（有種先入為主的感覺）
關于DOM Level 2嘛，估計大部分讀者不算太重視，畢竟誰學編程語言是專門來看DOM的定義和陳年舊事的對吧，簡單的來說，DOM Level 2通過對象借口支持了層疊樣式表，也就是咱們熟悉的CSS~
剩下的DOM資料講解不再在本文中贅述，有興趣的讀者可以買一本 《JavaScript高級程序設計（第四版）》 看看哦
DOM的好兄弟BOM！
說完了DOM，咱們來看看BOM是個啥玩意，用腳想都知道，這玩意肯定跟瀏覽器脫不了干系~
簡單的來說，BOM主要針對的是瀏覽器窗口的問題，比如彈出新窗口，移動、縮放窗口，加載窗口信息等等~
畢竟，你也不想因為瀏覽器窗口的問題被DOM知道吧？
還是那句話，剩下的BOM資料講解不再在本文中贅述，有興趣的讀者可以買一本 《JavaScript高級程序設計（第四版）》 慢慢摸索
小結
到此這篇關于JavaScript中DOM和BOM原理詳析的文章就介紹到這了,更多相關JS DOM和BOM內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)服務五星好評，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
微信小程序?qū)崙?zhàn)篇之購物車的實現(xiàn)代碼示例
本篇文章主要介紹了微信小程序?qū)崙?zhàn)篇之購物車的實現(xiàn)代碼示例，詳細的介紹了購物車的功能實現(xiàn)，具有一定的參考價值，有興趣的可以了解一下2017-11-11
JavaScript將字符串轉(zhuǎn)換為整數(shù)的方法
這篇文章主要介紹了JavaScript將字符串轉(zhuǎn)換為整數(shù)的方法,涉及javascript中parseInt函數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
Function.prototype.call.apply結合用法分析示例
昨天在網(wǎng)上看到一個很有意思的js面試題：var a = Function.prototype.call.apply(function(a){return a;}, [0,4,3]);alert(a); 分析步驟如下，感興趣的朋友可以參考下哈2013-07-07
webpack-url-loader 解決項目中圖片打包路徑問題
這篇文章主要介紹了webpack-url-loader 解決項目中圖片打包路徑問題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02![JavaScript 用Node.js寫Shell腳本[譯]](http://img.jbzj.com/images/xgimg/bcimg5.png)
JavaScript 用Node.js寫Shell腳本[譯]
你懂JavaScript嗎?你需要寫一個Shell腳本嗎?那么你應該試一下Node.js,它很容易安裝,而且很適合通過寫Shell腳本來學習它2012-09-09
這篇文章主要介紹了小程序兩種滾動公告欄的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
javascript是一門簡單的語言，也是一門復雜的語言。這篇文章主要介紹了溫習Javascript基礎語法之詞法結構的相關資料,需要的朋友可以參考下2016-05-05
下面小編就為大家?guī)硪黄猨s中用cssText設置css樣式的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
基于JavaScript Array數(shù)組方法(新手必看篇)
下面小編就為大家?guī)硪黄贘avaScript Array數(shù)組方法(新手必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08