不妨這樣去理解JavaScript中的dom和bom

Colin_Mindset發表於2019-04-09
JavaScript

JavaScript是由三大部分組成：核心ECMAScript、文件物件模型-DOM、瀏覽器物件模型-BOM。
這裡我們主要來講解下BOM和DOM。

一. DOM

JavaScript可以通過DOM來獲取文件裡的標籤、屬性等內容，也可以用來操控文件內容

Document

文件，這裡的文件指的是XML和HTML的頁面。當你建立一個頁面並且載入到瀏覽器中，DOM就悄然而生。

Object

在學習JavaScript過程中，你一定頻繁地聽過這樣一句話“一切皆為物件”。我們可以把JavaScript中的物件分為三種：

  • 使用者自定義物件，如let o = {}
  • 內建物件，無需我們自己建立，如Array、String、Math等。
  • 宿主物件，這裡指的是瀏覽器提供的物件，如Document和Window。

Model

顧名思義，就是模型的意思。

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樹：
在這裡插入圖片描述

二. BOM

BOM提供了與瀏覽器互動的方法。如，

  • 移動、縮放和關閉瀏覽器視窗的功能
  • 提供瀏覽器詳細資訊的 navigator 物件
  • 提供瀏覽器所載入頁面的詳細資訊的 location 物件
  • 提供使用者顯示器解析度詳細資訊的 screen 物件
  • 對 cookies 的支援
  • 像 XMLHttpRequest 和 IE 的 ActiveXObject 這樣的自定義物件

W3C把瀏覽器中 JavaScript 最基本的部分標準化，已經將 BOM 的主要方面納入了 HTML5 的規範中。

三. 總結

JavaScript不光包括核心的ECMAScript，還包括用於操控文件的Dom和用於操控瀏覽器的Bom。

Dom主要用來操控（新增、刪除、修改、查詢）html文件標籤，而bom主要用來跟瀏覽器進行互動。此外，在學習DOM時，還應關注DOM事件傳遞機制，具體文章《從八道面試題看JavaScript DOM事件機制》

BOM可用來：

// navigator檢測瀏覽器型別
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)
// screen獲取螢幕大小
console.log(screen.width)
console.log(screen.height)
//location獲取url
console.log(location.href); //整個URL; http://www.jianshu.com/
console.log(location.host) // www.jianshu.com
console.log(location.protocol); //協議 http https
console.log(location.pathname); //域名之後的路徑; writer#/
console.log(location.search); // 問號後面的查詢字串
console.log(location.hash); // 雜湊
//history獲取瀏覽歷史
history.back();
history.forward();

四. 參考

https://blog.csdn.net/xiao__gui/article/details/8315148
https://juejin.im/post/5bf24cf851882511a852803d

相關文章