JavaScript的DOM與BOM的介紹-js教程-PHP中文網

JavaScript的DOM與BOM的介紹

不言

發布： 2018-11-20 14:53:57

轉載

2343 人瀏覽過

這篇文章帶給大家的內容是關於JavaScript的DOM和BOM的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

文件物件模型（DOM）

面試官很喜歡問的：“你知道什麼是文件物件模型嗎？”，那今天我們一個個來解釋一下：

DOM：Document Object Model（文檔物件模型）

Document

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

Object

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

在JavaScript語言的類型大致可以分為以下三種：

使用者定義對象
自行建立的對象，例如：
```
var obj = {}
```
登入後複製
內建物件
內建在JavaScript中的對象，無需我們創建，可以直接使用，例如：Array、Math和Data等
宿主物件
上期我們知道了什麼是宿主環境以後，應該對宿主對像是什麼有了一定的了解，在這裡我們指的是瀏覽器提供的對象，例如:window、document。

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

Model

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

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

而DOM也像一個這樣的模型，但它代表著加載到瀏覽器視窗的當前網頁，我們可以利用JavaScript對它進行讀取。

有了模型之後，我們同樣需要能看懂模型（可以理解為我需要知道這個模型是乾什麼用的）；

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

所以，雖然我們可以透過JavaScript對DOM進行讀取，但是我們要必須先能看懂模型。

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

例如以下圖片：

JavaScript的DOM與BOM的介紹

#具體程式碼如下：

<!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樹：

JavaScript的DOM與BOM的介紹