PHP全站開發工程師-第14章 JavaScript DOM物件和BOM物件
第一階段（A）（前端） 20天 120學時
第14章 JavaScript DOM物件和BOM物件（6）
[學習課時] 本章共需要學習 6 課時
[目的要求]
- 掌握JavaScript DOM物件
- 掌握JavaScript BOM物件
[教學內容]
瀏覽器物件模型 (BOM)
|
document |
對 Document 物件的只讀引用。 |
|
history |
對 History 物件的只讀引用。 |
|
innerHeight |
返回視窗的文件顯示區的高度。 |
|
innerWidth |
返回視窗的文件顯示區的寬度。 |
|
location |
用於視窗或框架的 Location 物件。 |
|
name |
設定或返回視窗的名稱。 |
|
navigator |
對 Navigator 物件的只讀引用。 |
|
outerHeight |
返回視窗的外部高度，包含工具條與滾動條。 |
|
outerWidth |
返回視窗的外部寬度，包含工具條與滾動條。 |
|
screen |
對 Screen 物件的只讀引用。 |
- Window 物件
所有 JavaScript 全域性物件、函式以及變數均自動成為 window 物件的成員。
全域性變數是 window 物件的屬性。
全域性函式是 window 物件的方法。
甚至 HTML DOM 的 document 也是 window 物件的屬性之一：
window.document.getElementById("header");
與此相同：
document.getElementById("header");
特殊方法
- setInterval() 按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
setInterval(function, milliseconds, param1, param2, ...)
- clearInterval() 取消由 setInterval() 設定的 timeout。
- setTimeout() 在指定的毫秒數後呼叫函式或計算表示式。
setTimeout(function, milliseconds, param1, param2, ...)
- clearTimeout() 取消由 setTimeout() 方法設定的 timeout。
Window 瀏覽器視窗的尺寸
有三種方法能夠確定瀏覽器視窗的尺寸。
- 對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 瀏覽器視窗的內部高度(包括滾動條)
window.innerWidth - 瀏覽器視窗的內部寬度(包括滾動條)
- 對於 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth
- 通用
document.body.clientHeight
document.body.clientWidth
混合
例項：demo01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
var w = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth;
var h = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
document.write("瀏覽器window寬度: " + w + ", 高度: " + h + "。");
</script>
</html>
效果圖
Window Screen顯示器尺寸
window.screen 物件在編寫時可以不使用 window 這個字首。
顯示器寬高屬性：
- screen.width - 返回螢幕的總寬度，（包括Windows底部工作列）
- screen.height - 返回螢幕的總高度，（包括Windows底部工作列）
- screen.availWidth - 返回螢幕的高度（不包括Windows底部工作列）
- screen.availHeight - 返回螢幕的寬度（不包括Windows底部工作列）
- screen.colorDepth - 色彩深度
- screen.pixelDepth - 色彩解析度
例項：demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script>
document.write("總寬度/高度: "+screen.width + "*" + screen.height);
document.write("<br>");
document.write("可用寬度/高度: "+screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("色彩深度: "+screen.colorDepth);
document.write("<br>");
document.write("色彩解析度: "+screen.pixelDepth);
</script>
</html>
效果圖
Window Location物件
window.location 物件在編寫時可不使用 window 這個字首。
如：
- location.hostname 返回 web 主機的域名
- location.pathname 返回當前頁面的路徑和檔名
- location.port 返回 web 主機的埠 （80 或 443）
- location.protocol 返回所使用的 web 協議（http:// 或 https://）
- location.href返回完整的 URL（http://127.0.0.1:8020 /demo02/index.html）
- location.hash 返回一個URL的錨部分
方法：
- location.assign(url) 跳轉到新文件【location.assign("http://www.baidu.com")】，可返回
- location.replace(url) 用新文件取代當前文【location.replace("http://www.baidu.com")】
- location.reload() 重新整理（重新載入）當前文件【location.reload()】
例項：demo03
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="location.assign('http://www.baidu.com')">
assign：跳轉到新文件（百度），可以返回前地址
</button>
<br/>
<button onclick="location.replace('http://www.baidu.com')">
replace：用新文件（百度）替換，不可以返回前地址
</button>
<br/>
<button onclick="location.reload()">
reload：重新載入當前文件（重新整理）
</button>
<br/>
</body>
<script>
location.href = 'http://127.0.0.1:8020/PHP/014-JS/demo03/index.html?id=1$class=c#test'
document.write("完整地址: "+location.href);
document.write("<br>");
document.write("協議: "+location.protocol);
document.write("<br>");
document.write("主機和埠: "+ location.host);
document.write("<br>");
document.write("主機地址: "+ location.hostname);
document.write("<br>");
document.write("埠: "+location.port);
document.write("<br>");
document.write("當前檔案路徑: "+location.pathname);
document.write("<br>");
document.write("搜尋（引數）: "+location.search);
document.write("<br>");
document.write("錨點: "+location.hash);
document.write("<br>");
</script>
</html>
效果圖
Window History物件
window.history物件在編寫時可不使用 window 這個字首。
如：
- history.back() - 與在瀏覽器點選後退按鈕相同
- history.forward() - 與在瀏覽器中點擊向前按鈕相同
- history.go(number|URL) - 載入某個具體頁面（正數：向前；負數：向後）
例項：demo04
檔案一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
頁面1
</div>
<a href="new_file1.html">跳轉到頁面1</a>
<button onclick="history.forward();">下一頁面</button>
</body>
</html>
檔案二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
頁面2
</div>
<a href="new_file2.html">跳轉到頁面3</a>
<button onclick="history.back();">上一頁面</button>
<button onclick="history.forward();">下一頁面</button>
</body>
</html>
檔案三
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
頁面3
</div>
<button onclick="history.back();">返回上一頁面</button>
<button onclick="history.go(-2);">返回第一頁</button>
</body>
</html>
Window Navigator 物件
Window navigator物件在編寫時可不使用 window 這個字首
如：
- navigator.appCodeName - 返回瀏覽器的程式碼名
- navigator.appName - 返回瀏覽器的名稱
- navigator.appVersion - 返回瀏覽器的平臺和版本資訊
- navigator.cookieEnabled - 返回指明瀏覽器中是否啟用 cookie 的布林值
- navigator.platform - 返回執行瀏覽器的作業系統平臺
- navigator.userAgent - 返回由客戶機發送伺服器的user-agent 頭部的值
- navigator.javaEnabled() - 指定是否在瀏覽器中啟用Java
- navigator.taintEnabled() - 規定瀏覽器是否啟用資料汙點(data tainting)
例項：demo05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
document.write("瀏覽器代號: " + navigator.appCodeName + "<br/><br/>");
document.write("瀏覽器名稱: " + navigator.appName + "<br/><br/>");
document.write("瀏覽器的平臺和版本資訊: " + navigator.appVersion + "<br/><br/>");
document.write("瀏覽器啟用cookie: " + navigator.cookieEnabled + "<br/><br/>");
document.write("HTTP 請求的使用者代理頭: " + navigator.userAgent + "<br/><br/>");
</script>
</html>
效果圖
文件物件（DOM）
- DOM Document 物件
|
屬性 / 方法 |
描述 |
|
document.addEventListener() |
向文件新增事件控制代碼 |
|
document.removeEventListener() |
移除文件中的事件控制代碼(由 addEventListener() 方法新增) |
|
document.body |
返回文件的body元素 |
|
document.cookie |
設定或返回與當前文件有關的所有 cookie。 |
|
document.createAttribute() |
建立一個屬性節點 |
|
document.createComment() |
createComment() 方法可建立註釋節點。 |
|
document.createElement() |
建立元素節點。 |
|
document.createTextNode() |
建立文字節點。 |
|
document.getElementsByClassName() |
返回文件中所有指定類名的元素集合，作為 NodeList 物件。 |
|
document.getElementById() |
返回對擁有指定 id 的第一個物件的引用。 |
|
document.getElementsByName() |
返回帶有指定名稱的物件集合。 |
|
document.getElementsByTagName() |
返回帶有指定標籤名的物件集合。 |
|
document.querySelector() |
返回文件中匹配指定的CSS選擇器的第一元素 |
|
document.querySelectorAll() |
document.querySelectorAll() 是 HTML5中引入的新方法，返回文件中匹配的CSS選擇器的所有元素節點列表 |
|
document.write() |
向文件寫 HTML 表示式 或 JavaScript 程式碼。 |
|
document.writeln() |
等同於 write() 方法，不同的是在每個表示式之後寫一個換行符。 |
- DOM 元素物件
|
屬性 / 方法 |
描述 |
|
element.addEventListener() |
向指定元素新增事件控制代碼 |
|
element.removeEventListener() |
移除由 addEventListener() 方法新增的事件控制代碼 |
|
element.appendChild(node) |
為元素新增一個新的子元素 |
|
element.removeChild(node) |
刪除一個子元素 |
|
element.insertBefore(node) |
現有的子元素之前插入一個新的子元素 |
|
element.attributes |
返回一個元素的屬性陣列 |
|
element.childNodes |
返回元素的一個子節點的陣列，包括空文位元組點 |
|
element.children |
返回元素的一個子節點的陣列，不包括空文位元組點 |
|
element.classList |
返回元素的類陣列，可用add(class1, class2, ...)、contains(class)、item(index)、remove(class1, class2, ...)、toggle(class) |
|
element.className |
設定或返回元素的class屬性值 |
|
element.id |
設定或者返回元素的 id。 |
|
element.innerHTML |
設定或者返回元素的內容。 |
|
element.getAttribute(name) |
返回指定元素的屬性值 |
|
element.getAttributeNode(name) |
返回指定屬性節點物件，name：屬性名；value：屬性值 |
|
element.hasAttribute(name) |
判斷元素中是否存在指定的屬性返回 true，否則返回false。 |
|
element.hasAttributes() |
判斷元素是否有任何屬性返回true，否則返回false。 |
|
element.hasChildNodes() |
判斷元素是否具有任何子元素 |
|
element.clientHeight |
在頁面上返回內容的可視高度（不包括邊框，邊距或滾動條） |
|
element.clientWidth |
在頁面上返回內容的可視寬度（不包括邊框，邊距或滾動條） |
|
element.offsetHeight |
返回，任何一個元素的高度包括邊框和填充，但不是邊距 |
|
element.offsetWidth |
返回元素的寬度，包括邊框和填充，但不是邊距 |
|
element.scrollHeight |
返回整個元素的高度（包括帶滾動條的隱蔽的地方） |
|
element.scrollLeft |
返回當前檢視中的實際元素的左邊緣和左邊緣之間的距離 |
|
element.scrollTop |
返回當前檢視中的實際元素的頂部邊緣和頂部邊緣之 |