JavaScript的組成 | DOM/BOM

時間 2019-11-09

標籤 javascript 組成 dom bom 欄目 JavaScript 简体版

原文原文鏈接

往期回顧html

在上一期的《JavaScript的組成 | 核心-ECMAScript前端

》☜裏，咱們有說到JavaScript 是由三大部分組成，分別是：核心ECMAScript、文檔對象模型-DOM、瀏覽器對象模型-BOM面試

那麼本期就讓咱們繼續往下說說DOM、BOM這兩大部分吧：瀏覽器

文檔對象模型（DOM）cookie

面試官很喜歡問的：「你知道什麼是文檔對象模型嗎？」，那今天咱們一個個來解釋一下吧：框架

DOM：Document Object Model（文檔對象模型）dom

Document學習

中文翻譯：文檔，這裏的文檔指的是XML和HTML的頁面，當你建立一個頁面而且加載到Web瀏覽器中，DOM就在幕後悄然而生，它會把你編寫的網頁文檔轉換成一個文檔對象。翻譯

Object設計

中文翻譯：對象，學習js的同窗必定對「一切皆對象」這句話不會陌生；

在JavaScript語言的類型大體能夠分爲如下三種：

用戶定義對象自行建立的對象，例如： var obj = {}
內置對象內置在JavaScript中的對象，無需咱們建立，能夠直接使用，例如：Array、Math和Data等
宿主對象上期咱們知道了什麼是宿主環境之後，應該對宿主對象是什麼有了必定的瞭解，在這裏咱們指的是瀏覽器提供的對象，例如:window、document。

DOM中主要關注的就是document，document對象的主要功能就是處理網頁內容。

Model

中文翻譯：模型，若是你把這個詞從DOM中抽離出來，看下面的圖片~是否是就很好理解。

打個比方，如圖：是一套小區建築模型，基本上任何售樓處都會有它的身影，買房的人只須要根據這套模型就能夠了解建設完成後的小區長什麼樣子，有哪些公共設施，植被面積又有多少………

而DOM也像一個這樣的模型，但它表明着加載到瀏覽器窗口的當前網頁，咱們能夠利用JavaScript對它進行讀取。

有了模型以後，咱們一樣須要能看懂模型（能夠理解爲我須要知道這個模型是幹什麼用的）；

若是沒有看懂模型，那就像跟一個盲人說，太陽是會發光發熱的，對於盲人來講，他是沒有這個概念的，由於他看不到太陽；

因此，雖然咱們能夠經過JavaScript對DOM進行讀取，可是咱們要必須先能看懂模型。

DOM把一份文檔表示爲一顆樹，有一個主幹支以及無數的分干支，其實我我的以爲，更像是族譜。由於在描述標籤之間關係的時候，咱們常常用「父級」、「子級」、「兄弟」這樣的詞來代表並列標籤和嵌套標籤。

例如如下圖片：

具體代碼以下：

<!DOCTYPE html>
<html>
<head>

	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>Hello World!</h1>
	<p>歡迎觀看本次文章，包含如下內容：</p>
	<ul>
		<li>ECMAScript</li>
		<li>DOM</li>
		<li>BOM</li>
	</ul>
</body>
</html>

咱們把上面的結構抽象成DOM樹：

從上面的圖，咱們能夠清晰的看到根元素是html，下面有兩個子元素，一個是head，另外一個是body，而head和body之間是兄弟關係，以此類推，用這樣的方式咱們能夠把頁面中的全部元素都用模型抽象成一棵樹。

因此，DOM簡單來講就是：一套對文檔的內容進行抽象和概念化的方法，提供訪問和操做網頁內容的方法和接口。

DOM的級別

不要覺得只有ECMAScript有版本哦，DOM也是有不同級別的。

W3C官方網址：

https://www.w3.org/standards/techs/dom#w3c_all

DOM分爲如下：