js中瀏覽器物件（BOM）

阿新 • • 發佈：2019-01-03

4.8 JS瀏覽器物件（BOM）

BOM (Browser Object Model )瀏覽器物件模型，它是由多個JS物件共同組成的， JS是一種動態語言，它可以在頁面上做很多動作性的東西，比如：驗證表單，動態給網頁新增內容，動態修改網頁，但是網頁的內容通常都是由瀏覽器來進行解析，所以JS針對瀏覽器中解析網頁的一些物件，就被它封裝起來，供我們程式設計師來進行呼叫。

BOM由很多物件組成：

4.8.1 BOM物件的主要功能

在瀏覽中彈出新窗體
2、移動、關閉和更改瀏覽器視窗大小
3、提供WEB瀏覽器詳細資訊的導航物件
4、提供瀏覽器載入頁面的頁面詳細資訊的本地物件

提供使用者螢幕解析度詳細的螢幕物件
5、支援cookie
6、BOM還支援擴充套件使用ActiveX物件類

4.8.2文件物件模型（DOM）

DOM (HTML Document Object Model )文件物件模型的簡寫，DOM針對HTML網頁提供了一系列的標準方法，可以讓我們去操作HTML標記。所以我們可以把DOM看作是操作HTML頁面的API。

在JS中通過DOM來操作HTML標記時，它會先在記憶體中構建一棵完整的HTML結構樹。然後就可以實現通過該結構樹對HTML檔案做動態的訪問，以及修改。

4.8.2.1 Document 物件集合

集合	描述
all[]	提供對文件中所有 HTML 元素的訪問。
anchors[]	返回對文件中所有 Anchor 物件的引用。
applets	返回對文件中所有 Applet 物件的引用。
forms[]	返回對文件中所有 Form 物件引用。
images[]	返回對文件中所有 Image 物件引用。
links[]	返回對文件中所有 Area 和 Link 物件引用。

var nodes = document.all;//獲得頁面所有的節點資訊
console.log(nodes);

var forms = document.forms;//獲得頁面所有的表單資訊
console.log(forms);
console.log(forms[0]);

var links = document.links;//獲得頁面的所有使用area標記定義的圖片連結資訊
console.log(links);

var imags = document.images;//獲得頁面所有的影象資訊
console.log(imags);

4.8.2.2 Document 物件屬性

屬性	描述
body	提供對 <body> 元素的直接訪問。對於定義了框架集的文件，該屬性引用最外層的 <frameset>。
cookie	設定或返回與當前文件有關的所有 cookie。
domain	返回當前文件的域名。
lastModified	返回文件被最後修改的日期和時間。
referrer	返回載入當前文件的文件的 URL。
title	返回當前文件的標題。
URL	返回當前文件的 URL。

例如：

console.log(document.URL);
console.log(document.title);
console.log(document.cookie);
console.log(document.domain);

4.8.2.3 Document 物件方法

方法	描述
close()	關閉用 document.open() 方法開啟的輸出流，並顯示選定的資料。
getElementById()	返回對擁有指定 id 的第一個物件的引用。
getElementsByName()	返回帶有指定名稱的物件集合。
getElementsByTagName()	返回帶有指定標籤名的物件集合。
open()	開啟一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
write()	向文件寫 HTML 表示式或 JavaScript 程式碼。
writeln()	等同於 write() 方法，不同的是在每個表示式之後寫一個換行符。

操作DOM最重要的就是在JS根據document物件去獲得HTML標記節點物件。最為重要的方法: getElementById()、getElementsByName()、getElementsByTagName()

4.8.2.3.1 從根節點逐層獲取標籤

//返回根節點物件（擁有子節點）
var root = document.documentElement;
console.info(root);
console.info(root.nodeName);//返回根節點的名稱
//獲得根節點的第一個子節點
var head = root.firstChild;
console.info(head);
//獲得根節點的最後一個一個子節點
console.info(root.lastChild);
//返回根節點的所有子節點
var nodes = root.childNodes;
console.info(nodes);

var body = document.body;//獲得body節點
console.info(body.childNodes);//返回body節點的所有子節點

4.8.2.3.2 針對性獲得標籤

//根據id獲得頁面中某一個特定的標籤
var center = document.getElementById("center");
console.info(center);

//根據名字將會獲得名字相同的一類標籤
var tagnames = document.getElementsByName("first");
console.info(tagnames);

// document.getElementsByClassName();或者使用這個

//根據標記的名稱獲得同類型的標籤
var tags = document.getElementsByTagName("div");
console.info(tags);

4.8.2.3.3 針對標記新增內容

獲得標記之後，如果需要針對標記進行內容新增，需要使用innerHTML

，innerText兩個屬性。

例如：

var left = document.getElementById("left");
console.info(left.innerText);//只返回文字內容
console.info(left.innerHTML);//返回標記和文字內容

//向left標記中新增子標記a
left.innerHTML =('<a href="http://www.baidu.com">百度一下</a>');

//向left標記中新增文字資訊[包括a標記的內容，也會變成文字]
left.innerText = ('<a href="http://www.baidu.com">百度一下</a>');

4.8.2.3.4 innerText和innerHTML的區別

innerText和innerHTML比較而言， innerHTML主要給標記新增子標記以及內容，而 innerText

只能給標記新增內容。

4.8.3 JS事件

4.8.3.1 事件驅動

JS是一個基於事件驅動架構模式下的面向物件的指令碼語言，基於物件的程式語言一般都採用事件驅動架構，在瀏覽器上面，通常滑鼠或熱鍵的動作稱之為"事件" ，而由事件產生的一系列連鎖反應，我們稱之為"事件驅動"。用通俗易懂的話來說：就是我們採用JS定義的函式，需要由滑鼠、熱鍵的動作來驅動

事件並非只有使用者才能觸發，實際上瀏覽器自己的一些動作也可以產生"事件"，比如：在載入頁面的時候，就會觸發load載入事件，而關閉頁面的事件，會觸發unload事件。

歸納一下：必須需要事件驅動的動作，可以分為以下3類
1、用來引起頁面之間跳轉的事件，主要是超連結事件，還有按鈕
2、瀏覽器自己引發的事件

3、表單內容驗證，表單與其他介面物件互動所產生的事件

4.8.3.2 Js中的事件

事件控制代碼：

屬性	此事件發生在何時...
onabort	影象的載入被中斷。
onblur	元素失去焦點。
onchange	域的內容被改變。
onclick	當用戶點選某個物件時呼叫的事件控制代碼。
ondblclick	當用戶雙擊某個物件時呼叫的事件控制代碼。
onerror	在載入文件或影象時發生錯誤。
onfocus	元素獲得焦點。
onkeydown	某個鍵盤按鍵被按下。
onkeypress	某個鍵盤按鍵被按下並鬆開。
onkeyup	某個鍵盤按鍵被鬆開。
onload	一張頁面或一幅影象完成載入。
onmousedown	滑鼠按鈕被按下。
onmousemove	滑鼠被移動。
onmouseout	滑鼠從某元素移開。
onmouseover	滑鼠移到某元素之上。
onmouseup	滑鼠按鍵被鬆開。
onreset	重置按鈕被點選。
onresize	視窗或框架被重新調整大小。
onselect	文字被選中。
onsubmit	確認按鈕被點選。
onunload	使用者退出頁面。

例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script type="text/javascript">

    /*針對文件物件，新增鍵盤事件*/
    document.onkeypress = function(e){
        var keynum
        var keychar
        var numcheck
        if(window.event) // IE
        {
            keynum = e.keyCode
        }
        else if(e.which) // Netscape/Firefox/Opera
        {
            keynum = e.which
        }
        keychar = String.fromCharCode(keynum)
        console.info(keynum+"----------------"+keychar);
    }

    /*針對某一個標記，新增鍵盤事件*/
    function keypress(e)
    {
        var keynum
        var keychar
        var numcheck
        if(window.event) // IE
        {
            keynum = e.keyCode
        }
        else if(e.which) // Netscape/Firefox/Opera
        {
            keynum = e.which
        }

        keychar = String.fromCharCode(keynum)
        console.info(keynum+"----------------"+keychar);

        if(keynum == 101){
            closeWindow();
        }
    }

    function closeWindow(){
        window.close();
    }

    /*改變超連結的樣式*/
    function removeUnderLine(obj){
        console.log(obj);
        obj.style.textDecoration="none";
    }
    /*改變超連結的樣式*/
    function addUnderLine(obj){
        console.log(obj);
        obj.style.textDecoration="underline";
    }

    /*改變編輯狀態*/
    function disable(obj){
        console.log(obj);
        obj.disabled = true;
    }
</script>

<form>
    <input type="text" onkeypress="keypress(event)" onmouseup="disable(this)"/>
</form>
<br/>
    <a href="#" onmouseover="removeUnderLine(this)" onmouseout="addUnderLine(this)" >百度一下</a>

</body>
<html>

4.8.4 Window物件

window物件可以說是在整個客戶端JS中，扮演著非常重要的角色。它是整個瀏覽器的全域性物件，它就代表著瀏覽器的某一個窗體。它是整個BOM物件中的根，它是JS中最大的一個物件。它的特點是:它提供了一系列針對窗體操作的屬性和行為，但是呼叫的時候，可以省略"window." ，而直接使用"屬性"以及“方法" 。

window物件就代表一個瀏覽器窗體或者一個框架！

4.8.4.1 物件屬性

屬性	描述
closed	返回視窗是否已被關閉。
defaultStatus	設定或返回視窗狀態列中的預設文字。
document	對 Document 物件的只讀引用。請參閱 Document 物件。
history	對 History 物件的只讀引用。請引數 History 物件。
innerheight	返回視窗的文件顯示區的高度。
innerwidth	返回視窗的文件顯示區的寬度。
length	設定或返回視窗中的框架數量。
location	用於視窗或框架的 Location 物件。請參閱 Location 物件。
name	設定或返回視窗的名稱。
Navigator	對 Navigator 物件的只讀引用。請引數 Navigator 物件。
opener	返回對建立此視窗的視窗的引用。
outerheight	返回視窗的外部高度。
outerwidth	返回視窗的外部寬度。
pageXOffset	設定或返回當前頁面相對於視窗顯示區左上角的 X 位置。
pageYOffset	設定或返回當前頁面相對於視窗顯示區左上角的 Y 位置。
parent	返回父視窗。
Screen	對 Screen 物件的只讀引用。請引數 Screen 物件。
self	返回對當前視窗的引用。等價於 Window 屬性。
status	設定視窗狀態列的文字。
top	返回最頂層的先輩視窗。
window	window 屬性等價於 self 屬性，它包含了對視窗自身的引用。
screenLeft screenTop screenX screenY	只讀整數。聲明瞭視窗的左上角在螢幕上的的 x 座標和 y 座標。IE、Safari 和 Opera 支援 screenLeft 和 screenTop，而 Firefox 和 Safari 支援 screenX 和 screenY。

4.8.4.2 物件方法

方法	描述
alert()	顯示帶有一段訊息和一個確認按鈕的警告框。
blur()	把鍵盤焦點從頂層視窗移開。
clearInterval()	取消由 setInterval() 設定的 timeout。
clearTimeout()	取消由 setTimeout() 方法設定的 timeout。
close()	關閉瀏覽器視窗。
confirm()	顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。
createPopup()	建立一個 pop-up 視窗。
focus()	把鍵盤焦點給予一個視窗。
moveBy()	可相對視窗的當前座標把它移動指定的畫素。
moveTo()	把視窗的左上角移動到一個指定的座標。
open()	開啟一個新的瀏覽器視窗或查詢一個已命名的視窗。
print()	列印當前視窗的內容。
prompt()	顯示可提示使用者輸入的對話方塊。
resizeBy()	按照指定的畫素調整視窗的大小。
resizeTo()	把視窗的大小調整到指定的寬度和高度。
scrollBy()	按照指定的畫素值來滾動內容。
scrollTo()	把內容滾動到指定的座標。
setInterval()	按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
setTimeout()	在指定的毫秒數後呼叫函式或計算表示式。

4.8.4.2.1 對話方塊

JS中為了和使用者進行資訊交流，也提供了3種不同型別的彈框，分別是最為常見的提示框、確認框、對話方塊。

alert()	顯示帶有一段訊息和一個確認按鈕的警告框。
prompt()	顯示可提示使用者輸入的對話方塊。返回輸入的內容
confirm()	顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。返回的是ture和false，ture是確認按鈕，false是取消按鈕。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function openAlert() {
            alert("我是提示框，或者警告框！");
        }

        function openConfirm(){
            var r = confirm("你確認需要刪除以下內容嗎？");
            if(r){
                console.log("恭喜你，你依舊刪除成功！");
            }else{
                console.log("浪子回頭，孺子可教！"<

相關推薦

js中瀏覽器物件（BOM）

4.8 JS瀏覽器物件（BOM） BOM (Browser Object Model )瀏覽器物件模型，它是由多個JS物件共同組成的， JS是一種動態語言，它可以在頁面上做很多動作性的東西，比如：驗證表單，動態給網頁新增內容，動態修改網頁，但是網頁的內容通常都是由瀏覽器來進行解析，所以JS針

深入理解JS中的物件（一）

**目錄** - 一切皆是物件嗎？ - 物件 - 原型與原型鏈 - 建構函式 - 參考 **1.一切皆是物件嗎？** 首先，“在 JavaScript 中，一切皆是物件”這種表述是不完全正確的。 JavaScript 的資料型別分為兩類：原始值型別和物件（Object型別）。原始值型別

深入理解JS中的物件（二）：new 的工作原理

**目錄** - 序言 - 不同返回值的建構函式 - 深入 new 呼叫函式原理 - 總結 - 參考 **1.序言** 在 [深入理解JS中的物件（一）：原型、原型鏈和建構函式](https://www.cnblogs.com/forcheng/p/12866827.html) 中，我們分析了JS中

深入理解JS中的物件（三）：class 的工作原理

**目錄** - 序言 - class 是一個特殊的函式 - class 的工作原理 - class 繼承的原型鏈關係 - 參考 **1.序言** ECMAScript 2015（ES6）中引入的 JavaScript 類實質上是 JavaScript 現有的基於原型的繼承的語法糖。類語法（cla

ARCEngine中的顏色瀏覽器物件（ColorBrowser），顏色選擇器物件（ColorSelector），顏色板物件（Colorpalatte）

目錄顏色瀏覽器物件（ColorBrowser）：顏色選擇器物件（ColorSelector）：顏色板物件（Colorpalatte）：名稱空間：ESRI.ArcGIS.Framework; GetRGB函式： private IColor GetR

node.js中的路由（url）初步

UC out root 目錄 port name login 方法是個 1、建立n4_root.js var http = require(‘http‘); var url = require(‘url‘); //這是node.

Cookie和Session在Node.JS中的實踐（二）

快速理解開發工具 ren 發揮超過 see 技術點用戶 img Cookie和Session在Node.JS中的實踐（二） cookie篇在作者的上一篇文章Cookie和Session在Node.JS中的實踐（一）已經是寫得算是比較詳細了，有興趣可以翻看，這篇是ses

從零開始的全棧工程師——js篇2.19（BOM）

一、BOM 瀏覽器物件模型 1.window.open（url，ways） url 是開啟的網頁地址ways 開啟的方式 _self 2.window.close（）關閉當前頁面 3.window.navigator（） .userAgent 瀏覽器使用者資訊 <

JS中DOM操作（一）

事件（行為，操作）-------------------- 觸發事件註冊事件

JavaScript之Navigator物件（BOM）

Navigator Navigator包含了瀏覽器的資訊：瀏覽器的程式碼名、瀏覽器的名字、瀏覽器的版本資訊和平臺、執行瀏覽器的作業系統、指明瀏覽器是否啟用了cookie等。 Navigator的屬性 appCodeName appCodeName是一個只讀字串，它返回

JS判斷瀏覽器iOS（iPhone）、Android手機移動端

通過判斷瀏覽器的userAgent，用正則來判斷手機是否是ios和Android客戶端。網上搜索來的，比較簡單： var u = navigator.userAgent;var isAndroid = u.indexOf('Android')>-1|| u.inde

js 中prototype運用（陣列）

/* * 方法:Array.removeAt(Index) * 功能:刪除陣列元素. * 引數:Index刪除元素的下標.&n

JS中arguments物件的常見用法（轉自https://www.cnblogs.com/LMJBlogs/p/6024148.html）

瞭解這個物件之前先來認識一下javascript的一些功能：其實Javascript並沒有過載函式的功能，但是Arguments物件能夠模擬過載。Javascrip中每個函式都會有一個Arguments物件例項arguments，它引用著函式的實參，可以用陣列下標的方式"[]"引用arguments的元素

JavaScript語法基礎使用JS操作網頁（DOM）使用JS操作瀏覽器（BOM）

JavaScript 體驗JavaScript <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

js中陣列（array）和物件（object）的區別

object 型別：建立方式： /*new 操作符後面Object建構函式*/ var person = new Object(); person.name = "lpove"; pers

JavaScript基礎——瀏覽器物件模型（BOM）

簡介 ECMAScript是JavaScript的核心，但如果要在Web中使用JavaScript，那麼BOM（瀏覽器物件模型）則無疑才是真正的核心。BOM提供了很多物件，用於訪問瀏覽器的功能，這些功能與任何網頁內容無關。多年來，缺少事實上的規範導致BOM及有意思又有問題，

JS中的常量（基本資料型別）和內建物件

JS中的基本資料型別： String 、number、null、boolean、undefined、object、symbol（ES6） 1、利用typeof運算子時其中只有null是異常的，typeof（null）=object，所以在判斷變數型別是否為null時要注意。同時利用typeof時對於沒有宣

Java Script 第06章瀏覽器對象模型（BOM）

block alt display play java pla .cn img script Java Script 第06章瀏覽器對象模型（BOM）

js中閉包（積累總結）

結果 ons 網頁不能創建 ner alert 子函數存在什麽是閉包: 當內部函數在定義它的作用域的外部被引用時,就創建了該內部函數的閉包 ,如果內部函數引用了位於外部函數的變量,當外部函數調用完畢後,這些變量在內存不會被釋放,因為閉包需要它們. 例子1 f

Js中常用知識點（typeof、動態屬性、變量作用域）

常用知識 sage 打印 bject 理解各類 swa clas java 1、Js中各類型的常量表示形式：Number：number String：string Object：objec 2、typeof運算符在Js中的使用：用於判斷某一對象是何種類型，返