01三、BOM對象的應用

時間 2019-11-11

標籤 bom 對象應用简体版

原文原文鏈接

BOM結構圖以下：

DOM結構圖以下：

BOM和DOM

BOM，Bowser Object Model瀏覽器對象模型。提供了訪問和操做瀏覽器各組件的途徑或方法。javascript

好比：Navigator對象：瀏覽器的名稱、版本號、客戶端操做系統、系統語言等html

Window：彈出一個廣告窗口、窗口的尺寸；java

History：獲取到你瀏覽器的歷史記錄；瀏覽器

DOM，Document Object Model文檔對象模型。提供了訪問和操做網頁中各標記的途徑和方法。ide

好比：<div>、<a>、<form>、<input>、<p>函數

BOM和DOM是兩個標準(規範)，是第三方開發的功能，不是Netscape(網景公司)開發的。但BOM和DOM以對象的形式，在瀏覽器進行了實現。BOM模型對應一組對象、DOM模型在瀏覽器中，也是對應一組對象。工具

BOM中對象的結構圖：網頁中的全部元素，均可以當作一個對象ui

BOM對象

Window窗口對象：是全部其它對象的最頂層對象，表明當前瀏覽器窗口。url

History歷史對象：用戶瀏覽器的歷史記錄spa

Location地址欄對象：能夠取出地址中地址的不一樣部分。好比：主機名、查詢字符串、錨點

Navigator瀏覽器對象：取得瀏覽器的軟件名稱、版本號、用戶使用的操做系統

Screen屏幕對象：能夠取出顯示器相關信息。好比：顯示的分辨率、色位

Document文檔對象，表明當前網頁。一個網頁中包含N多個HTML元素。這些HTML元素對象，都是document對象的子對象。

Window對象

Window對象的屬性

Closed：判斷一個窗口是否關閉；

Name：獲取當前窗口的名稱；

innerWidth：指窗口的淨寬，不含：菜單欄、地址欄、狀態欄、工具欄；

在IE中不支持 IE中可使用body元素的clientWidth和clientHeight來代替。

innerHeight：指窗口的淨高，不含：菜單欄、地址欄、狀態欄等；在IE中不支持

outerWidth：指窗口的總寬度，包含：菜單欄、地址欄、狀態欄等。IE不支持

outerHeight：指窗口的總高度，同上。IE不支持

注意：document.body.clientWidth爲何沒有值？

由於<body>中沒有內容，也就是沒有寬和高。

Document.documentElement.clientWidth是什麼？

documentElement表明<HTML>標記，也就是指網頁。

top：表明最頂層的窗口

parent：表明父級窗口

self：表明當前窗口

示例代碼：

<script type="text/javascript">

var str = "<h2>當前窗口的尺寸</h2>";
str += "innerWidth："+(window.innerWidth ? window.innerWidth : document.documentElement.clientWidth);
str += "<br>innerHeight："+(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight);
str += "<br>outerWidth："+window.outerWidth;
str += "<br>outerHeight："+window.outerHeight;
document.write(str);


</script>

View Code

Window對象的方法

Window.alert(str)：彈出一個警告對話框；

Window.prompt()：彈出一個輸入對話框

Window.confirm()：彈出一個確認對話框

Window.close()：關閉窗口

Window.print()：打印窗口中的網頁

Window.open()：建立或打開一個新窗口。

語法格式：var win = window.open(URL,name,options)

參數：

URL：指打開的新窗口中，要顯示的網頁的地址；能夠爲空，不打開任何網頁；

name：指定打開的窗口的名稱，通常用於超級連接。

Options：設置打開窗口的外觀

Toolbar：工具欄是否顯示，取值：yes和no

Menubar：菜單欄是否顯示

Status：狀態欄是否顯示

Scrollbars：是否滾動條

Location：是否顯示地址欄

Width：指定打開窗口的寬度

Height：指定打開窗口的高度

Top：距離屏幕頂端多遠

Left：距離屏幕左端多遠

返回值：返回一個窗口對象

舉例：var win = window.open(「http://www.sina.com.cn」,」win2」,」width=400,height=300,left=300,top=100,menubar=no」)

示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript">
//實例：彈出一個新窗口
//（1）變量初始化
var url = "";
var name = "win2"; //新窗口的名稱
var width = 300;
var height = 200;
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
var left = (winWidth - width)/2;
var tops = (window.innerHeight - height)/2;
var options = "width="+width+",height="+height+",left="+left+",top="+tops;
//（2）根據參數，打開一個新窗口
var win = window.open(url,name,options);
//構建新窗口中的內容
var str = "<img src='images/icon.png' />";
//將字符串寫入新窗口
win.document.write(str);
//10秒鐘後關閉新窗口
setTimeout("win.close()",10000);


</script>
</head>

<body>
<a href="window.html" target="win2">#</a>
</body>
</html>

View Code

setTimeout()方法

含義：在指定的時間到了之後，執行一次JS代碼。就執行一次，不會重複執行。

語法：var timer = window.setTimeout(code,millisec);

參數：

Code：要執行的JS代碼；

Millisec：毫秒數

返回值：這個返回值timer，可使用clearTimeout()進行清除，清除延遲時間設置。

注意：setTimeout()只能執行一次，若是要實現重複執行，必須在函數中再次調用本身。

clearTimeout()方法

含義：清除setTimeout()設置的延遲器

語法：clearTimeout(timer)

示例代碼：

<script type="text/javascript">
//全局變量
var i = 0;//計時器
var timer; //設置延時器
function start()
{
    //獲取id=result的對象
    var obj = document.getElementById("result");
    //計時器自增
    i++;
    //構建要在按鈕上顯示的文本
    var str = "程序已經運行了"+i+"秒！";
    //將id=result對象的value的值換掉
    obj.value = str;
    //建立定時器
    timer = window.setTimeout("start()",10);
}
function stop()
{
    clearTimeout(timer);
}
</script>
</head>

<body>
<input type="button" id="result" value="程序已經運行了0秒！" /><br />
<input type="button" value="開始" onclick="start()" />
<input type="button" value="中止" onclick="stop()" />


</body>

View Code

setInterval()方法

含義：是真正意義上的定時器，每隔指定時間，就會執行一次代碼，並重複執行。

語法： var timer = window.setInterval(code,millisec);

返回值：返回一個定時器的變量timer，timer可使用clearInterval()進行清除。

clearInterval()方法

含義：清除setInterval()設置的定時器。

語法：clearInterval(timer);

完成圖片的切換

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript">
//實例：圖片自動切換
/*
分析結果：
    （1）網頁加載完成後，圖片切換開始
    （2）初始化顯示第一張圖片
    （3）JS函數中，要從第二張圖片開始顯示，第二篇後都從第一張開始
*/
var i= 1;
function ppt()
{
    //變量i自增
    i++;
    //若是i>6，則將i＝0
    if(i>6)
    {
        i = 1;
    }
    //獲取圖片對象
    var obj = document.getElementById("img");
    obj.src = "images/dd_scroll_"+i+".jpg";
}
function start()
{
    //定時器：1秒鐘調用ppt()函數一次
    setInterval("ppt()",1000);
}
</script>
</head>

<body onload="start()">
<img id="img" src="images/dd_scroll_1.jpg" />
</body>
</html>

View Code

相關標籤/搜索

每日一句

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