Document 對象
1. 概述
每個載入浏覽器的 HTML 文檔都會成為 Document 對象。
即, Document對象 代表 整個HTML文檔.
Document 對象使我們可以從腳本中對HTML頁面中的所有元素進行通路。
提示：
Document 對象是 Window 對象的一部分，
可通過 window.document 屬性對其進行通路。
參考: http://www.w3school.com.cn/htmldom/dom_obj_document.asp
2. 集合
3. 屬性
body 屬性和方法
- appendChild()
- removeChild()
- getElementByTagName()
- bgColor 文檔背景色
- background 文檔背景圖
- innerText
- innerHTML
- onload事件
- onunload事件 (用于關閉頁面後, 向伺服器發請求消除session)
- onbeforeunload事件
- onselectstart 事件 , 選擇body内的内容時
- onscroll事件, 拉動滾動條時, (浮動廣告跟着滾動條走)
① 說明
提供對 <body> 元素的直接通路。
對于定義了架構集的文檔，該屬性引用最外層的 <frameset>。
② 參考
http://www.w3school.com.cn/htmldom/htmldom_reference.asp
http://www.w3school.com.cn/htmldom/dom_obj_body.asp
③ innerText 與 innerHTML的差別
innerText 把字元串原樣顯示
innerHTML 字元串會被JavaScript引擎解析
④ 跟着滾動條跑的浮動廣告 - onscroll事件
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
var ad;
window.onload = function() {
ad = document.getElementById("ad");
}
window.onscroll = function() {
ad.style.top = document.body.scrollTop + 50;
}
</script>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<div id="ad">我是讨厭的廣告</div>
<textarea rows="1000">
.......
</textarea>
</body>
</html>
4. 方法
1) write() / writeln()
向文檔寫 HTML 表達式 或 JavaScript 代碼。
writeln()等同于 write() 方法，
不同的是在每個表達式之後寫一個換行符("\n\r")。
2) open(mimetype,replace)
該方法将擦除目前 HTML 文檔的内容，開始一個新的文檔，
新文檔用 write() 方法或 writeln() 方法編寫。
3) close()
可關閉一個由 document.open 方法打開的輸出流，
并顯示標明的資料。
4) 擷取文檔中元素
① document.getElementById(id)
傳回對擁有指定 id 的 第一個對象的引用。
② document.getElementsByName(name)
傳回帶有指定名稱的 對象集合。
③ element.getElementsByTagName(tagname)
傳回帶有指定标簽名的 對象集合。
<div id="links">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >1</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >1</a>
</div>
<script type="text/javascript">
var links = document.getElementById("links");
console.info( links.getElementsByTagName("a") );
</script>
5. 節點操作
元素(節點)的 建立/添加/删除.
注:
HTML DOM 和 XML DOM 都遵循相同的DOM規範
是以, 可參看 XML DOM
1) 動态建立 HTML元素
① document.createElement(tagName)
② parentElement.appendChild(newChild)
③ parentElement.removeChild(oldChild)
<body>
<input type="button" value="動态建立超連結" οnclick="createLink()"/>
<input type="button" value="删除超連結" οnclick="removeLink()"/>
<div id="showArea"
style="background-color: gray;
height: 200px;
width: 200px;" >
1
</div>
</body>
<script type="text/javascript">
var showArea;
window.onload = function() {
showArea = document.getElementById("showArea");
}
function createLink() {
// 建立 超連結元素
var linkElement = document.createElement("a");
// 給 超連結元素 添加屬性
linkElement.href = "http://www.baidu.com";
linkElement.innerHTML = "baidu";
// 指定位置
// 将超連結 挂載到div上 -- 添加節點
showArea.appendChild(linkElement);
}
function removeLink() {
var bodyElement = document.getElementsByTagName("body")[0];
bodyElement.removeChild(showArea);
}
</script>