JavaScript BOM學習

時間 2019-11-13

原文原文鏈接

Mirror王宇陽javascript

2019年11月13日 [首發]html

很多天沒有更新博文了，以爲很差意思了！這不是，整理了一下JavaScript的一下BOM筆記資料，今天貢獻出來！(HTML DOM也會隨後整理髮表)java

筆者在接觸Js以前就聽聞Js的「牛逼」，接觸後發現只要想法夠賊，Js就能給你的賊想法復現 ~瀏覽器

做者主頁：https://www.cnblogs.com/wangyuyang1016/服務器

BOM簡單的說就是瀏覽器對象模型，對BOM的操做就是對瀏覽器的功能和屬性的操做；app

BOM的核心是window,它是一個瀏覽器的功能實例，瀏覽器會爲HTML文檔建立一個專屬的window對象，併爲每個框架建立額外的window對象。
window對象是BOM的頂層，全部其餘對象都是經過window對象衍生的；可是在調用子對象的時候並不強制要求聲明
框架

DOM的document也是window的子對象之一；如下兩種寫法是相同的:工具

window.document.getElementById("herd")
    document.getElementById("herd")

window對象經常使用方法

彈窗

window.alert() 消息框；彈窗會直接顯示一段信息字段url

window.confirm() 確認框；彈窗顯示text字段的同時給出確認和取消兩個按鈕，返回true和false操作系統

window.prompt() 提示框；彈窗顯示字段和一個輸入框，並返回輸入框內容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="警告框" onclick="showalert()" />
        <input type="button" value="確認框" onclick="showconfirm()" />
        <input type="button" value="提示框" onclick="showprompt()" />
        <script>
            function showalert(){
                window.alert("這是一個警告框");
            }
            function showconfirm(){
                window.confirm("這是一個確認框");
            }
            function showprompt(){
                window.prompt("這是一個提示框");
            }
        </script>
    </body>
</html>

瀏覽器窗口信息

window.open() 打開新窗口

window.open( url , name , features , replace )

url：須要載入的網頁URL地址

name：爲新窗口命名

features：可選，窗體的特性定義

屬性特性

height 窗口高度

width 窗口寬度

left 左邊距

top 左上邊距

directories 是否顯示連接工具欄

location 是否顯示地址欄

menubar 是否顯示菜單欄

resizable 是否容許調整窗口尺寸

scrollbars 是否顯示滾動條

status 是否顯示狀態欄

toolbar 是否顯示工具欄

屬性	特性
height	窗口高度
width	窗口寬度
left	左邊距
top	左上邊距
directories	是否顯示連接工具欄
location	是否顯示地址欄
menubar	是否顯示菜單欄
resizable	是否容許調整窗口尺寸
scrollbars	是否顯示滾動條
status	是否顯示狀態欄
toolbar	是否顯示工具欄

window.close() 關閉當前實例化對象的窗口

window.moveTo() 移動當前窗口

window.resizeBy()/resizeTo() 調整窗口

window.focus() 得到當前對象窗口的焦點

window.blur() 釋放當前對象窗口的焦點

window.print() 打印當前窗口或Frame

window.scrollBy()/scrollTo() 滾動當前窗口總的HTML文檔

setInterval()/clearInterval() 設置定時器

setTimeout()/clearTimeout() 刪除定時器

瀏覽器窗口尺寸

IE、Chrome、Firefox、Opera、Safan

window.innerHeight 瀏覽器窗口的內部高度

window.innerWidth 瀏覽器窗口的內部寬度
IE8如下版本

document.documentElement.clientHeight 高度

document.documentElement.clientWidth 寬度

document.body.clientHeight 高度

document.body.clientWidth 寬度

一般在JavaScript中，一段較爲通用代碼以下：

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth ;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight ;

窗口頁面絕對居中

// 頁面絕對居中必須設置style屬性： position:absolute;
var left = (w-width)/2;
var top = (h-height)/2;
// 利用margin外邊距的top和left來「絕對居中」在瀏覽器中間
document.getElementById("cen").style.top =  top+"px";
document.getElementById("cen").style.left = left+"px";

瀏覽器信息:navigator

navigator.appCodeName 返回瀏覽器代碼名稱（網景 Mozilla）

navigator.appName 返回瀏覽器名稱

navigator.appVersion 返回瀏覽器版本號

navigator.Platform 返回瀏覽器操做系統

userAgent 返回包含內碼名稱、版本號；用於識別用戶

<input type="button" value="瀏覽器信息" onclick="showversion()"/>
function showversion(){
    // navigator 瀏覽器信息
    var put = document.getElementById("version");
    put.innerHTML = "代號:"+navigator.appCodeName+"<br/>";
    put.innerHTML+= "名稱:"+navigator.appName+"<br/>";
    put.innerHTML+= "版本:"+navigator.appVersion+"<br/>";
    put.innerHTML+= "系統:"+navigator.platform+"<br/>";
    put.innerHTML+= "信息:"+navigator.userAgent+"<br/>";              
}

屏幕對象:screen

屬性對象	特性
screen.height	回顯屏幕高度
screen.width	回顯屏幕寬度
screen.avaiHeight	回顯除任務欄的屏幕高度（可用的高度）
screen.avaiWidth	回顯除系統部件寬度的寬度（可用的深度）
screen.colorDepth	瀏覽器分配的顏色或顏色深度
screen.pixelDepth	返回屏幕的顏色分辨率（色彩分辨率）

<input type="button" value="屏幕信息" onclick="showscreen()" />
function showscreen() {
    document.getElementById("screen").innerHTML = "屏幕尺寸:"+screen.height+"*"+screen.width+"<br/>";
    document.getElementById("screen").innerHTML+= "窗口尺寸:"+screen.availHeight+"*"+screen.availWidth+"<br/>";
    document.getElementById("screen").innerHTML+= "色彩深度:"+screen.colorDepth+"/色彩分辨率:"+screen.pixelDepth+"<br/>";
}

地址對象:location

地址對象整理的是當前的URL信息

屬性	特性
location.href	整個URL字符串
location.protocol	URL的通訊協議部分的字符子串
location.hostname	URL中服務器名、域名子域名或IP地址
location.port	URL中端口號
location.host	hostname + port
location.pathname	URL中的文件或路徑名
location.hash	URL中的錨點名稱
location.search	URL中表示變量的字符子串
location.reload(true/false)	刷新頁面(true/false選擇是否從服務器刷新)
location.replace(url)	經過url網址刷新當前網頁

歷史對象:history

歷史對象保存着用戶上網的歷史記錄

屬性方法	特性
history.back()	顯示瀏覽器的歷史列表中後退一個網址的網頁
history.forward()	顯示瀏覽器的歷史列表中前進一個網址的網頁
history.go(n)/go(url)	顯示瀏覽器的歷史列表中的第n個網址網頁，大於0表示前進，小於0表示後退，等於0表示刷新當前頁

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。