DOM和BOM區別展示圖：
JAVAScript有三部分構成，ECMAScript，DOM和BOM，根據瀏覽器的不同，具體的表現形式也不盡相同。我們今天來談一談DOM和BOM這倆者之間的差異。
用百科上的來說：
1. DOM是 W3C 的標準; [所有瀏覽器公共遵守的標準]
2. BOM 是 各個瀏覽器廠商根據 DOM在各自瀏覽器上的實現;[表現為不同瀏覽器定義有差別,實現方式不同]
3. window 是 BOM 物件，而非 js 物件；
DOM（文件物件模型）是HTML和XML的應用程式介面（API）。
BOM主要處理瀏覽器視窗和框架，不過通常瀏覽器特定的JavaScript擴充套件都被看做 BOM 的一部分。而這些擴充套件則包括：
<1>彈出新的瀏覽器視窗<2>移動、關閉瀏覽器視窗以及調整視窗大小<3>提供 Web 瀏覽器詳細資訊的定位物件<4>提供使用者螢幕解析度詳細資訊的螢幕物件<5>對 cookie 的支援<6>IE 擴充套件了 BOM，加入了 ActiveXObject 類，可以通過 JavaScript 例項化 ActiveX 物件
javacsript是通過訪問BOM（Browser Object Model）物件來訪問、控制、修改客戶端(瀏覽器)，由於BOM的window包含了document，window物件的屬性和方法是直接可以使用而且被感知的，因此可以直接使用window
document屬性，通過document屬性就可以訪問、檢索、修改XHTML文件內容與結構。因為document物件又是DOM（Document
Object Model）模型的根節點。可以說，BOM包含了DOM(物件)，瀏覽器提供出來給予訪問的是BOM物件，從BOM物件再訪問到DOM物件，從而js可以操作瀏覽器以及瀏覽器讀取到的文件。其中
DOM包含：window
Window物件包含屬性：document、location、navigator、screen、history、framesDocument根節點包含子節點：forms、location、anchors、images、links
從window.document已然可以看出，DOM的最根本的物件是BOM的window物件的子物件。而他們之前的最大區別：DOM描述了處理網頁內容的方法和介面，BOM描述了與瀏覽器進行互動的方法和介面。
首先我們來仔細瞭解一下DOM：
在HTML中DOM的節點層次為：
DOM操作creatElement(element)建立一個新的元素節點creatTextNode建立一個包含給定文字的新文字節點appendChild指定節點的最後一個節點列表後新增一個新的子節insertBefore將一個給定節點插入到一個給定元素節點的給定子節點的前面removeChild從一個給定元素中刪除子節點replaceChild把一個給定父元素裡的一個子節點替換為另外一個節點，DOM通過建立樹來表示文件，描述了處理網頁內容的方法和介面，從而使開發者對文件的內容和結構具有空前的控制力，用DOM API可以輕鬆地刪除、新增和替換節點。
訪問節點的方法如下：
var oHtml = document.documentElement;//返回存在於 XML 以及 HTML 文件中的文件根節點oHtml包含了一個表示<html />的HTMLElement物件document.body //是對 HTML 頁面的特殊擴充套件，提供了對 <body> 標籤的直接訪問document.getElementById("ID") //通過指定的 ID 來返回元素，getElementById 無法工作在 XML 中，IE6還會返回name為指定ID的元素document.getElementByName("name")//獲取所有name特性等於指定值的元素，不過在IE6和Opera7.5上還會返回id為給定名稱的元素且僅檢查<input/>和<img/>var x=document.getElementsByTagName("p"); //使用指定的標籤名返回所有的元素列表NodeList，索引號從0開始。當引數是一個星號的時候，IE6並不返回所有的元素，必須用document.all來替代
獲取到節點之後就要對它進行操作，操作的方法我們用事件來實現，事件型別有：
滑鼠事件：click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove 鍵盤事件：keydown、keypress、keyup HTML事件：load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur
有人經常會把OUTHTML和innerText、innerHTML混淆開來，其實它們很好區分：
這樣就可以很清晰的看懂他們的劃分。
DOM基本操作思維導圖如下：
下面我們來了解一下BOM：
BOM的核心是window，而window物件又具有雙重角色，它既是通過js訪問瀏覽器視窗的一個介面，又是一個Global（全域性）物件。這意味著在網頁中定義的任何物件，變數和函式，都以window作為其global物件。
window.close;//關閉視窗 window.alert("message"); //彈出一個具有OK按鈕的系統訊息框，顯示指定的文字 window.confirm("Are you sure?"); //彈出一個具有OK和Cancel按鈕的詢問對話方塊，返回一個布林值 window.prompt("What's your name?", "Default"); //提示使用者輸入資訊，接受兩個引數，即要顯示給使用者的文字和文字框中的預設值，將文字框中的值作為函式值返回 window.status //可以使狀態列的文字暫時改變 window.defaultStatus //預設的狀態列資訊，可在使用者離開當前頁面前一直改變文字 window.setTimeout("alert('xxx')", 1000); //設定在指定的毫秒數後執行指定的程式碼，接受2個引數，要執行的程式碼和等待的毫秒數 window.clearTimeout("ID"); //取消還未執行的暫停，將暫停ID傳遞給它 window.setInterval(function, 1000); //無限次地每隔指定的時間段重複一次指定的程式碼，引數同setTimeout一樣 window.clearInterval("ID"); //取消時間間隔，將間隔ID傳遞給它 window.history.go(-1); //訪問瀏覽器視窗的歷史，負數為後退，正數為前進 window.history.back; //同上 window.history.forward; //同上 window.history.length //可以檢視歷史中的頁面數
document物件
document物件：實際上是window物件的屬性，document == window.document為true，是唯一一個既屬於BOM又屬於DOM的物件 document.lastModified //獲取最後一次修改頁面的日期的字串表示 document.referrer //用於跟蹤使用者從哪裡連結過來的 document.title //獲取當前頁面的標題，可讀寫 document.URL //獲取當前頁面的URL，可讀寫 document.anchors[0]或document.anchors["anchName"] //訪問頁面中所有的錨 document.forms[0]或document.forms["formName"] //訪問頁面中所有的表單 document.images[0]或document.images["imgName"] // 訪問頁面中所有的影象 document.links [0]或document.links["linkName"] //訪問頁面中所有的連結 document.applets [0]或document.applets["appletName"] //訪問頁面中所有的Applet document.embeds [0]或document.embeds["embedName"] //訪問頁面中所���的嵌入式物件 document.write; 或document.writeln; //將字串插入到呼叫它們的位置
location物件
location物件：表示載入視窗的URL，也可用window.location引用它 location.href //當前載入頁面的完整URL，如http://www.somewhere.com/pictures/index.htm location.portocol //URL中使用的協議，即雙斜槓之前的部分，如http location.host //伺服器的名字，如www.wrox.com location.hostname //通常等於host，有時會省略前面的www location.port //URL宣告的請求的埠，預設情況下，大多數URL沒有埠資訊，如8080 location.pathname //URL中主機名後的部分，如/pictures/index.htm location.search //執行GET請求的URL中的問號後的部分，又稱查詢字串，如?param=xxxx location.hash //如果URL包含#，返回該符號之後的內容，如#anchor1 location.assign("http:www.baidu.com"); //同location.href，新地址都會被加到瀏覽器的歷史棧中 location.replace("http:www.baidu.com"); //同assign，但新地址不會被加到瀏覽器的歷史棧中，不能通過back和forward訪問 location.reload(true | false); //重新載入當前頁面，為false時從瀏覽器快取中過載，為true時從伺服器端過載，預設為false
navigator物件
navigator物件：包含大量有關Web瀏覽器的資訊，在檢測瀏覽器及作業系統上非常有用，也可用window.navigator引用它 navigator.appCodeName //瀏覽器程式碼名的字串表示 navigator.appName //官方瀏覽器名的字串表示 navigator.appVersion //瀏覽器版本資訊的字串表示 navigator.cookieEnabled //如果啟用cookie返回true，否則返回false navigator.javaEnabled //如果啟用java返回true，否則返回false navigator.platform //瀏覽器所在計算機平臺的字串表示 navigator.plugins //安裝在瀏覽器中的外掛陣列 navigator.taintEnabled //如果啟用了資料汙點返回true，否則返回false navigator.userAgent //使用者代理頭的字串表示
screen物件
screen物件：用於獲取某些關於使用者螢幕的資訊，也可用window.screen引用它 screen.width/height //螢幕的寬度與高度，以畫素計 screen.availWidth/availHeight //視窗可以使用的屏���的寬度和高度，以畫素計 screen.colorDepth //使用者表示顏色的位數，大多數系統採用32位 window.moveTo(0, 0); window.resizeTo(screen.availWidth, screen.availHeight); //填充使用者的螢幕
window物件方法則有以下這幾種：
BOM和DOM的結構關係示意圖：
window物件思維導圖：
相關推薦
DOM和BOM區別展示圖：
JAVAScript有三部分構成，ECMAScript，DOM和BOM，根據瀏覽器的不同，具體的表現形式也不盡相同。我們今天來談一談DOM和BOM這倆者之間的差異。 用百科上的來說： 1. DOM是 W3C 的標準; [所有瀏覽器公共遵守的標準] 2. BOM 是 各個瀏覽器廠商根據 DOM在各自瀏覽器上的
DOM和BOM的區別
doc 區別 網頁 extern 不同 標準 自己的 需要 rip BOM 1. BOM是Browser Object Model的縮寫，即瀏覽器對象模型。 2. BOM沒有相關標準。 3. BOM的最根本對象是window。 從1可以看出來：BOM和瀏覽器關系密切。瀏覽器
DOM和BOM的區別與聯系
javascrip close 文檔 跳轉 bject 的區別 對象 html 屬性 文檔對象模型 （DOM）：處理網頁內容的方法和接口 瀏覽器對象模型（BOM）：與瀏覽器交互的方法和接口 1. DOM 是 W3C的標準；[所有瀏覽器公共遵守的標準] 2. BOM 是 各個
javascript的DOM和BOM
doc per 能力 key size 可用 輸出 attach 分享 通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。 JavaScript 能夠改變頁面中的所有 HTML 元素 JavaScript 能夠改變頁面中的所有 HTML
DOM和BOM
scree 瀏覽器 標準 對象模型 screen 交互 navig hist 不同的 1、BOM 1) BOM是瀏覽器對象模型，和瀏覽器關系密切，用來獲取或設置瀏覽器的屬性、行為，如新建窗口、打開新選項卡（標簽頁）、關閉頁面、把網頁設為主頁、加入收藏夾、獲取屏幕分辨率、瀏覽
關於DOM和BOM
DOM DOM 是 W3C（全球資訊網聯盟）的標準。 DOM 定義了訪問 HTML 和 XML 文件的標準： “W3C 文件物件模型 （DOM） 是中立於平臺和語言的介面，它允許程式和指令碼動態地訪問和更新文件的內容、結構和樣式。” W3C DOM 標準被分為 3 個不同的部分： 核心 DOM
JS DOM和BOM的差異
JAVAScript 有三部分構成，ECMAScript，DOM和BOM，根據瀏覽器的不同，具體的表現形式也不盡相同。我們今天來談一談DOM和BOM這倆者之間的差異。 用百科上的來說： 1. DOM是 W3C 的標準; [所有瀏覽器公共遵守的標準] 2. BOM 是 各個瀏覽器
【JAVA-S2】JavaScript的DOM和BOM
window window是bom的核心 在window物件中有常見的方法 方法 作用 prompt（） 顯示提示使用者輸入的對話款，在括號中放入兩個引數，第一個引數是給使用者的提示資訊（string），第二個引數是使用
【JavaScript】DOM和BOM之我的理解
2018年12月17日 一、我們能夠對html文件和瀏覽器做的操作 （一）html文件 增、刪、改。可以在html中增加、刪除、改動元素 （二）瀏覽器 位址列：輸入、修改地址 歷史記錄：前進、後退、跳轉到某條歷史記錄 瀏覽器：檢視瀏覽器資訊 二、DOM和BOM 我們對html文件和瀏覽器執行
JS DOM和BOM
1.DOM DOM就是文件物件模型，什麼是文件物件模型？這就需要好好說說了。 HTML的文件document頁面是一切的基礎，沒有它dom就無從談起。 當建立好一個頁面並載入到瀏覽器時，DOM就悄然而生，它會把網頁文件轉換為一個文件物件，主要功能是處理網頁內容。 在這個
DOM 和 BOM
1、DOM: Document Object Model 早起 js 操作不同瀏覽器的 API 沒有標準，有嚴重相容性問題，後來 W3C 制定了統一的操作網頁內容的 API 標準 DOM，使用 DOM API 操作網頁內容，幾乎 100%相容所有瀏覽器，它具有查詢, 修改(內容,屬性,樣式),
核心DOM和html DOM的區別
技術分享 row 標簽 node splay out mov ... tex DOM分為三部分： （1）核心DOM：遍歷DOM樹、添加新節點、刪除節點、修改節點 （2）HTML DOM：以一種簡便的方法訪問DOM樹 （3）XML DOM：準用於操作XML文檔 核心D
Maven：mirror和repository 區別
stat 3.1 space 架設 遠程 mave 無法 支持 http 1 Repository（倉庫） 1.1 Maven倉庫主要有2種： remote repository：相當於公共的倉庫，大家都能訪問到，一般可以用URL的形式訪問 local repo
mysql中varchar和char區別（思維導圖整理）
var 但是 系統 mysql 由於 varchar .html nbsp 了解 由於mysql一直是我的弱項（其實各方面我都是很弱的），所以最近在看msyql，正好看到varchar和char區別，所以整理一下，便於以後遺忘。 0.0圖片已經說明一切，但是系
js面試題-----DOM操作和BOM操作
dom 數據 prop 樹形 結構 獲取 protocol earch 部分 題目1：DOM是哪種基本的數據結構 答案：DOM是一種樹形結構的數據結構 題目2：DOM操作的常用API有哪些 答案：獲取DOM節點，以及節點的property和Attribute。獲取父節點，獲
makefile中=、：=和+=的區別
有感 分析 eight c語言 區別 all ont 總結 mil 經常有人分不清= 、：=和+=的區別 這裏我總結下做下詳細的分析： 首先你得清楚makefile的運行環境，因為我是linux系統，那麽我得運行環境是shell 在Linux的shell裏，shell
文件路徑：/和的區別
win dos系統 現在 repeat 操作 系統 ice style 能夠 Unix使用斜桿/ 作為路徑分隔符，而web應用最新使用在Unix系統上面，所以目前所有的網絡地址都采用 斜桿/ 作為分隔符。 Windows由於使用 斜桿/ 作為DOS命令提示符的參數標誌了，為
分享展示高度和寬度樣式優化問題：
控制 div 動態控制 分享 ID 一個 有時 doc 設置 1.HTML定義： <!--chart container--> <div id=‘chart_div‘ styl
教育思考：選擇編程是一場父母和孩子的和解[圖]
經歷 進一步 工程師 界面 科技 col 習慣 帶來 男孩子 教育思考：選擇編程是一場父母和孩子的和解[圖]：之前有個很熱的段子是這樣講的：深夜十點的時候，某小區一女子大聲喊叫“什麽關系？啊？！到底什麽關系？你說！”最後發現原來是一位媽媽陪孩子做作業時發出的吶喊！聽完，我們
DOM與BOM的區別
DOM是是文件物件模型，是一個使程式和指令碼有能力動態地訪問和更新文件的內容、結構以及樣式的平臺和語言中立的介面。是 HTML 和XML 的應用程式介面（API）。 而BOM瀏覽器物件模型，定義了JavaScript可以進行操作的瀏覽器的各個功能部件的介面。BOM 主