JavaScript的組成 | DOM/BOM

時間 2019-11-17

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

原文原文鏈接

往期回顧html

在上一期的《JavaScript的組成 | 核心-ECMAScript 》☜裏，咱們有說到JavaScript 是由三大部分組成，分別是：核心ECMAScript、文檔對象模型-DOM、瀏覽器對象模型-BOM前端

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

文檔對象模型（DOM）瀏覽器

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

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

Documentdom

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

Objectspa

中文翻譯：對象，學習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樹：