JavaScript對象之HTML DOM對象

前面提到過的JavaScript的String對象、Date對象、Array對象、Boolean對象、Math對象、RegExp對象等都是JavaScript的内置對象。JavaScript可以使用HTML DOM（HTML Document Object Mode 文檔對象模型）動态修改網頁。

HTML DOM定義了通路和操作HTML文檔的标準方法。他把HTML文檔呈現為帶有元素、屬性和文本的樹結構。在層次圖中，每個對象是它的父對象的屬性，如Window對象是Document對象的父對象，是以在引用Document對象就可以使用Window.Document，相當于document是window對象的屬性。對于每一個頁面，浏覽器都會自動建立Window對象、Document對象、Location對象、Navigator對象、History對象。

1.浏覽器對象

（1）.Window對象

Window對象的屬性

1）Close屬性，傳回一個布爾值，聲明了視窗是否已經關閉，為隻讀屬性。

2）defaultStatus屬性，設定或傳回視窗狀态欄中的預設文本，隻讀屬性。

3)status屬性，是一個可讀可寫的字元串，在視窗狀态欄顯示一條消息，當擦除status聲明的消息時，狀态欄恢複成defaultstatus設定的值。

[sql] view plain copy

<html>
<head>
<script type="text/javascript">
function checkWin()
{
if(myWindow.closed)
document.write("'myWindow' has been closed!")
else
document.write("'myWindow' has not been closed!")
}
</script>
</head>
<body>
<script type="text/javascript">
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.defaultStatus("this is my first Window")
</script>
<input type="button" value="Has 'myWindow' been closed?" οnclick="checkWin()"/>
</body>
</html>

4)opener屬性傳回建立該視窗的Window對象的引用，是一個可讀可寫的屬性。

注意：隻有表示頂層視窗的Window對象的opener屬性才有效，表示架構的Window對象的opener屬性無效。

[sql] view plain copy

<html>
<body>
<script type="text/javascript">
myWindow=window.open('','myName','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
myWindow.focus();
myWindow.opener.document.write("this is the parent window")
</script>
</body>
</html>

5）self屬性，可傳回視窗自身的引用，相當于Window屬性。

6）top屬性，傳回最頂層的父視窗，改屬性對一個頂級視窗的隻讀引用，如果視窗本身就是一個頂級視窗，top屬性存放對視窗自身的引用，如果視窗是一個架構，那麼top屬性引用包含架構的頂層視窗。

[sql] view plain copy

<html>
<head>
<script type="text/javascript">
function checkTopSel()
{
if(window.top==window.self)
{
alert(window.location)
}
}
</script>
</head>
<body>
<input type="button" οnclick="checkTopSel()" value="判斷目前窗體是否是頂層窗體"/>
</body>
</html>

7）doucment屬性：對Document對象的隻讀引用。

8）history屬性：對History對象的隻讀引用。

9）location屬性：用于視窗或架構的Location對象。

10）Navigator屬性：對Navigator對象的隻讀引用。

11）Screen屬性：對Screen對象的隻讀引用

Window對象的方法

1）alert()方法：用于顯示帶有一條制定消息和一個OK按鈕的警告框。 alert（message）

2）confirm()方法：用于顯示一個帶有制定消息和OK及取消按鈕的對話框。 alert（message）

3）prompt（）方法：用于顯示可可是使用者進行輸入的對話框。 prompt（text，defaultText）

[html] view plain copy

<html>
<head>
<script language=javascript>
function display_alert()
{
alert("I am an alert box!")
}
function display_confirm()
{
var r=confirm("press a button")
if(r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed Cancel!")
}
}
function display_prompt()
{
var name=prompt("please enter your name","")
if(name!=null&&name!="")
{
document.write("Hello "+name+"!")
}
}
</script>
</head>
<body>
<input type="button" onclick="display_alert()" value="Display alert box"/>
<br/>
<input type="button" onclick="display_confirm()" value="Display a confirm box"/>
<br/>
<input type="button" onclick="display_prompt()" value="Display a prompt box"/>
</body>
</html>

4）createPopup（）方法：用于建立一個pop-up視窗。 window.createPopup（）

[html] view plain copy

<html>
<head>
<script type="text/javascript">
function show_popup()
{
var p=window.createPopup()
var pbody=p.document.body
pbody.style.backgroundColor="lime"
pbody.style.border="solid black 1px"
pbody.innerHTML="this is a pop-up!Click outside to close."
p.show(150,150,200,50,pbody)
}
</script>
</head>
<body>
<input type="button" onclick="show_popup()" value="show pop-up"/>
</body>
</html>

5）setInterval（）方法：按照指定的周期（以毫秒計）來調用函數或計算表達式。它會不停的調用函數，直到clearInterval（）被調用或視窗被關閉。由setInterval傳回的ID值作為clearInterval（）方法的參數。

6）clearInterval（）方法：取消由setInterval（）設定的timeout。 clearInterval(id_of_setinterval)

[html] view plain copy

<html>
<body>
<script type="text/javascript">
var num =self.setInterval("clock()",50)
function clock()
{
var t=new Date();
document.getElementById("clock").value=t;
}
</script>
<input type="text" id="clock" size="35"/>
<input type="button" onclick="window.clearInterval(num )" value="stop interval"/>
</body>
</html>

7)setTimeout()方法：用于在指定的毫秒數後調用函數或計算表達式。

注意：setTimeout（）隻執行code一次。如果要多次調用，就要用setInterval（），或讓code自身調用setTimeout（）。

8)clearTimeout()方法：取消setTimeout（）方法設定的timeout。 clearTimeout（id_of_setTimeout）

[html] view plain copy

<html>
<head>
<script type="text/javascript">
var t;
var c=0;
function startTime()
{
document.getElementById("txt").value=c;
c=c+1;
t=setTimeout("startTime()",1000);
}
function stopTime()
{
clearTimeout(t)
}
function alert_msg()
{
var v=setTimeout("alert('5 seconds')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="開始計時！" onclick="startTime()"/>
<input type="text" id="txt"/>
<input type="button" value="停止計時！" onclick="stopTime()"/>
</br>
<input type="button" value="display timeout alert" onclick="alert_msg()"/>
</form>
</body>
</html>

Window對象表示浏覽器中打開的視窗，如果文檔包含frame或iframe标簽，浏覽器會為HTML文檔建立一個Window對象，并為每個架構建立一個額外的window對象。在用戶端JavaScript中，window對象是全局對象，所有的表達式都在目前環境中計算，是以可以把視窗的屬性作為全局變量來使用，例如可以隻寫doucment,而不必寫window.document。

同樣可以把視窗對象的方法當中函數使用，如隻寫alert()，而不必寫window.alert()。

（2）.Document對象

每個載入浏覽器的HTML文檔都會成為Document對象。Document對象使我們可以從腳本中對HTML頁面中的所有元素進行通路。它是Window對象的屬性。

Document對象屬性

1）body：提供對<body>元素的直接通路。對于定義了架構集的文檔，該屬性引用最外層的<frameset>

2）cookie：設定或傳回與目前文檔有關的所有的cookie

3）domain：傳回目前文檔的域名

4）lastModified：傳回文檔最後被修改的日期和時間

5）referrer：傳回載入目前文檔的文檔的URL

6）URL：傳回目前文檔的URL

7）title：傳回目前文檔的标題

[html] view plain copy

<html>
<body>
<script type="text/javascript">
document.write("與目前文檔有關的所有的cookie:"+document.cookie+"</br>")
document.write("目前文檔的域名:"+document.domain+"</br>")
document.write("文檔最後被修改的日期和時間:"+document.lastModified+"</br>")
document.write("載入目前文檔的文檔的URL:"+document.referrer+"</br>")
document.write("目前文檔的标題:"+document.title+"</br>")
document.write("目前文檔的URL:"+document.URL+"</br>")
</script>
</body>
</html>

Document對象方法

1）open（）方法：打開一個新的文檔，并擦除目前文檔的内容。 open("text/html",replace) replace：當此參數設定後，可引起新文檔從父文檔繼承曆史條目

注意：調用open（）方法打開一個新文檔并且用write（）方法設定文檔内容後，必須用close方法關閉文檔，并迫使其内容顯示出來。

2）close（）方法：關閉一個由document.open（）方法打開的輸出流，并顯示標明的資料。

注意：一旦調用了close（），就不應該再次調用write（），因為這會隐式地調用open（）來擦除目前文檔并開始一個新的文檔。

[html] view plain copy

<html>
<head>
<script type="text/javascript">
function newDocument()
{
var newdoc=document.open("text/html")
var txt="<html><body>Hello world</body></html>"
newdoc.write(txt);
newdoc.close()
}
function testWin()
{
var newWin=window.open('','','width=200,height=200')
newWin.document.open("text/html")
newWin.document.writeln("this is a new window hello world")
newWin.document.close()
}
</script>
</head>
<body>
<input type="button" onclick="newDocument()" value="new Document"/>
</br>
<input type="button" onclick="testWin()" value="new Win"/>
</body>
</html>

3）getElementById()方法：傳回對擁有指定ID的第一個對象的引用 document.getElementById(id)

4)getElementsByName()方法：傳回帶有指定名稱對象的集合。因為文檔中name的屬性不可能唯一，是以getElementsByName（）方法傳回的是元素的數組，而不是一個元素。

5)getElementsByTagName()方法：傳回帶有指定标簽名的對象的集合。傳回元素的順序是它們在文檔中的順序。getElementsByTagName（"*"）表示傳回文檔中所有元素的清單。

注：可以用getElementsByTagName（）方法擷取任何類型的HTML元素的清單，如 var tables = document.getElementByTagName("table")可以擷取文檔中所有的表。

HTML DOM定義了多種查找元素的方法，有getElementById()、getElementsByName（）、getElementsByTagName（），不過如果要查找文檔中一個特定的元素，就要用getElemtnById（）

[html] view plain copy

<html>
<head>
<script type="text/javascript">
function getBtnValue()
{
var m=document.getElementById("btn")
alert(m.value)
}
function getHeaderValue()
{
var m=document.getElementById("header")
alert(m.innerHTML)
}
function count()
{
var x=document.getElementsByName("mytext")
alert(x.length)
}
function countElements()
{
var x=document.getElementsByTagName("Input")
alert(x.length)
}
</script>
</head>
<body>
<input type="button" id="btn" value="Click me" onclick="getBtnValue()"/>
<h1 id="header" onclick="getHeaderValue()">This is my header</h1></br>
<input type="text" name="mytext" id="txt1" /></br>
<input type="text" name="mytext" id="txt2" /></br>
<input type="text" name="mytext" id="txt3" /></br>
<input type="button" id="btn2" value="名為 mytext 的元素一共有多少個？" onclick="count()"/></br>
<input type="button" id="btn3" value="How many input elements?" onclick="countElements()"/>
</body>
</html>

6）write（）方法：向文檔寫HTML表達式或javaScript代碼。

7）writeln()方法：等同于write（）方法，不同的是在每個表達式之後寫一個換行符。

（3）Navigator對象

Navigator對象包含有關浏覽器的資訊。

Navigator的屬性和方法

[html] view plain copy

<html>
<head>
<script type="text/javascript">
document.write("<p>浏覽器的代碼名為："+navigator.appCodeName+"</p>")
document.write("<p>浏覽器的次級版本為："+navigator.appMinorVersion+"</p>")
document.write("<p>浏覽器的名稱為："+navigator.appName+"</p>")
document.write("<p>浏覽器的平台和版本資訊為："+navigator.appVersion+"</p>")
document.write("<p>浏覽器的語言為："+navigator.browserLanguage+"</p>")
document.write("<p>浏覽器是否啟用cookie的布爾值："+navigator.cookieEnabled+"</p>")
document.write("<p>浏覽器的CUP等級："+navigator.cpuClass+"</p>")
document.write("<p>系統是否處于脫機模式的布爾值："+navigator.onLine+"</p>")
document.write("<p>浏覽器的作業系統平台："+navigator.platform+"</p>")
document.write("<p>OS使用的預設語言："+navigator.systemLanguage+"</p>")
document.write("<p>客戶機發送伺服器的 user-agent 頭部的值："+navigator.userAgent+"</p>")
document.write("<p>OS 的自然語言設定："+navigator.userLanguage+"</p>")
document.write("<p>目前浏覽器是否啟用java："+navigator.javaEnabled()+"</p>")
document.write("<p>目前浏覽器是否啟用資料污點（data tainting）："+navigator.taintEnabled()+"</p>")
</script>
</head>
</html>

Navigator對象包含的屬性描述了正在使用的浏覽器，可以使用這些屬性進行平台的專用配置，這個執行個體是唯一的，可以通過window.navigator屬性來應用它。

（4）Location對象

Loaction對象包含有關目前URL的資訊。

[html] view plain copy

<html>
<head>
<script type="text/javascript">
document.write("<p>設定或傳回從井号 (#) 開始的 URL（錨)："+location.hash+"</p>")
document.write("<p>設定或傳回主機名和目前 URL 的端口号："+location.host+"</p>")
document.write("<p>設定或傳回目前 URL 的主機名："+location.hostname+"</p>")
document.write("<p>設定或傳回完整的 URL："+location.href+"</p>")
document.write("<p>設定或傳回目前 URL 的路徑部分："+location.pathname+"</p>")
document.write("<p>設定或傳回目前 URL 的端口号："+location.port+"</p>")
document.write("<p>設定或傳回目前 URL 的協定："+location.protocol+"</p>")
document.write("<p>設定或傳回從問号 (?) 開始的 URL（查詢部分）："+location.search+"</p>")
function newDoc()
{
window.location.assign("http://www.baidu.com")
}
function repalceDoc()
{
window.location.replace("http://www.hao123.com")
}
</script>
</head>
<body>
<input type="button" value="assign()加載新文檔" onclick="newDoc()"/><br/>
<input type="button" value="replace()用新的文檔替代目前文檔" onclick="repalceDoc()"/>
</body>
</html>

JavaScript對象之HTML DOM對象

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條