您當前位置：首頁 > php開源 > php教程 > BOM和DOM

BOM和DOM

來源：程序員人生發布時間：2016-06-06 16:14:12 閱讀次數：2425次

BOM和DOM

BOM對象

甚么是BOM

BOM(Brower Object Model，閱讀器對象模型)，主要用來訪問和操作閱讀器各組件的1種方法。
BOM對象有：window、location、history、screen、navigator、document、frames[]

windows對象

Window 對象是 JavaScript 層級中的頂層對象。

Window 對象代表1個閱讀器窗口或1個框架。

Window 對象會在 <body> 或 <frameset> 每次出現時被自動創建。

document 對 Document 對象的只讀援用
location 用于窗口或框架的 Location 對象
history 對 History 對象的只讀援用。
document.tilte 設置網頁的標題
moveto() 將窗口左上角的屏幕位置移動到指定的 x 和 y 位置。
moveby() 相對目前的位置移動。
resizeTo() 調劑當前閱讀器的窗口。
open() 打開新窗口顯示指定的URL（有的閱讀器中是打1個新的選項卡）
setTimeout(vCode, iMilliSeconds) 超時后履行代碼。
setInterval(vCode, iMilliSeconds) 定時履行代碼，第1次也是先待，到時再履行。

onchange事件：當內容(值)產生改變時，去調用1個JS函數

onload事件：當網頁內容(<body>中所有數據)加載終了時，去調用1個JS函數所有數據：指網頁中的內容、圖片、視頻等都算。因此產生1個jQuery。

onclick事件：當點擊元素時

screen屏幕對象

width：指屏幕的寬度，含任務欄
height：指屏幕的高度，是屏幕分辨率
availWidth：有效寬度，不含任務欄
availHeight：有效高度，不含任務欄

navigator閱讀器軟件對象

appName：指閱讀器軟件的名稱
appVersion：指閱讀器版本號
platform：操作平臺
systemLanguage：系統語言
userLanguage：用戶語言

Location地址欄對象

href：是指完全的URL地址，常常用于“網頁跳轉”
protocol：訪問的協議如：http://
host：主機名稱，如：www.sina.com.cn
pathname：路徑和文件名，如：about/index.html
search：查詢字符串，如：?username=yao&password=123456
hash：錨點名稱，如：#top 注意：以上各個屬性，可以直接賦值。當賦1個新值時，將自動刷新網頁。
reload()：重載網頁，相當于“刷新”按鈕

history閱讀歷史對象

length：有多少條歷史記錄
back()：相當于“返回”按鈕
forward()：相當于“前進”按鈕
go(n)：跳轉到n指定的歷史記錄，n可以是0，⑴代表上1頁、1下1頁
history.go(1)：前進
history.go(⑴)：后退
history.go(0)：刷新

Dom對象

甚么是Dom

dom: document object model 文檔對象模型
js語言與 html/xml標簽之間溝通的1個橋梁
為了方便javascript語言通過dom操作html比較方便，把html標簽的內容劃分為各種節點：

文檔節點(document),元素節點,文本節點,屬性節點,注釋節點

dom就是學習利用javascript如何實現對html標簽內容的增、刪、改、查等操作
document

代表當前頁面的全部文檔樹。

訪問屬性

all
forms
images
links
body

訪問方法(最經常使用的DOM方法)

<html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript">// 獲得dom 樹, 獲得document 對象.var dom = window.document;
// all 獲得頁面中所有的標簽節點 ,注釋和文檔類型束縛.functiontestAll() {
	var allArr = dom.all;
	alert(allArr.length);
	for (var i = 0; i < allArr.length; i++) {
		//獲得節點名稱
		alert(allArr[i].nodeName);
	}
}
// anchors 獲得頁面中的所有的錨連接.functiontestAnchors() {
	var anArr = dom.anchors;
	alert(anArr.length);
}
// froms  獲得所有的form 表單對象functiontestForms() {
	var formArr = dom.forms;
	alert(formArr.length);
	alert(formArr[0].nodeName);
}
// imagesfunctiontestImages() {
	var imageArr = dom.images;
	alert(imageArr.length);
}
// links  獲得頁面的超鏈接.functiontestLinks() {
	var linkArr = dom.links;
	//alert(linkArr.length);for (var i = 0; i < linkArr.length; i++) {
		//alert(linkArr[i].nodeName);
	}
	for (var i in linkArr) {
		alert(i);
	}
}
//testLinks();// 獲得頁面的Bodyvar body = dom.body;
alert(body.nodeName);
</script><meta http-equiv="Content-Type"content="text/html; charset=utf⑻" /><title>javascript</title></head><body onmousemove="test(this)"><img src="xxx"alt="這是1個美女"/><img src="xxx"alt="這是1個美女"/><img src="xxx"alt="這是1個美女"/><a href="http://www.baidu.com">百度1下</a><a href="http://www.google.com">百度兩下</a><a href="http://www.baigu.com">百谷1下</a><a name="one"></a><a name="two"></a><form><label>姓名:</label><!--默許不寫type 就是文本輸入框--><input  type="text"/></form></body></html>

獲得節點對象案例

Var dom = window.document;
functiontestByTagName() {
	var iptArr = dom.getElementsByTagName("input");
	for (var i = 0; i < iptArr.length; i++) {
		alert(iptArr[i].value);
	}
}
// window 對象提供了1個事件, onload 事件 onload(頁面加載終了履行該代碼) 是1個事件, 給事件1個方法,//window.onload = testByTagName;//2，得到所有標簽id為"username"的結果。獲得舊value值并設置value值functiontestById() {
	var user = dom.getElementById("username");
	alert(user.value);
	user.value = "rose";
}
//testById();//3. 獲得所有標簽name 為like的元素.獲得value值.functiontestByName() {
	var likeArr = dom.getElementsByName("like");
	for (var i = 0; i < likeArr.length; i++) {
		alert(likeArr[i].value);
	}
}
testByName();

!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⑻" /><title>無標題文檔</title><script type="text/javascript">functiongetSum()
{
	/*
	需求：通過點擊總金額按鈕獲得被選中的條目的金額的總和，并將總金額顯示在按鈕右側。
	思路：
	1，先獲得所有的checkbox對象。
	2，對這些對象進行遍歷。判斷哪一個對象被選中。
	3，對被選中對象的金額進行累加。
	4，顯示在按鈕右側。
	*/var items = document.getElementsByName("item");
	var sum = 0;
	for(var x=0; x<items.length; x++)
	{
		if(items[x].checked)
		{
			sum += parseInt(items[x].value);
		}
	}
	var str = sum+"元";
	document.getElementById("sumid").innerHTML = str.fontcolor('red');
}

functioncheckAll(node)
{
	/*
	需求：通過全選checkbox，將其他條目都選中。
	思路：
	只要將全選checkbox的checked狀態賦值給其他的item checked狀態便可。
	
	
	*///var allNode = document.getElementsByName("all")[index];var items = document.getElementsByName("item");
	for(var x=0; x<items.length; x++)
	{
		items[x].checked = node.checked;
	}
}
</script></head><body><div>商品列表</div><input type="checkbox"name="all"onclick="checkAll(this)"  /> 全選<br /><input type="checkbox"name="item"value="3000" />筆記本電腦3000元<br /><input type="checkbox"name="item"value="3000"  />筆記本電腦3000元<br /><input type="checkbox"name="item"value="3000"  />筆記本電腦3000元<br /><input type="checkbox"name="item"value="3000"  />筆記本電腦3000元<br /><input type="checkbox"name="item"value="3000"  />筆記本電腦3000元<br /><input type="checkbox"name="item"value="3000"  />筆記本電腦3000元<br /><input type="checkbox"name="all"onclick="checkAll(this)"  /> 全選<br /><input type="button"value="總金額："onclick="getSum()" /><span id="sumid"></span></body></html>

通過節點關系查找節點

從1個節點動身開始查找：

parentNode 獲得當前元素的父節點。

childNodes 獲得當前元素的所有下1級子元素。

firstChild 獲得當前節點的第1個子節點。

lastChild 獲得當前節點的最后1個子節點。

nextSibling 獲得當前節點的下1個節點。（兄節點）

previousSibling 獲得當前節點的上1個節點。（弟節點）

<!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><script type="text/javascript">//節點和節點之間的關系.//獲得dom樹var dom = window.document;
//獲得指定id 的標簽節點.functiontest() {
	var form = dom.getElementById("form1");
	//獲得父節點.//alert(form.parentNode.nodeName);// 獲得子節點(Node 包括 文本,注釋,標簽)var childArr = form.childNodes;
	//alert(childArr.length);/*
	for (var i = 0; i < childArr.length; i++) {
	alert(childArr[i]);
	}
	*/// 獲得第1個孩子.var first = form.firstChild;
	//alert(first);//最后1個孩子.var last = form.lastChild;
	//alert(last);// 獲得下兄弟(獲得弟弟)var sibling = form.nextSibling;
	//alert(sibling.nodeName);// 獲得大哥var previous = form.previousSibling;
	alert(previous.nodeName);
}
test();
</script><meta http-equiv="Content-Type"content="text/html; charset=utf⑻" /><title>javascript</title></head><body onmousemove="test(this)"><a>哈哈</a><form id="form1"><label>姓名:</label><input type="text" /></form></body></html>

創建新節點

<!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><script>/*
創建節點：
document.createElement("標簽名")		創建新元素節點
elt.setAttribute("屬性名", "屬性值")	設置屬性
添加節點到文檔樹上:
elt.appendChild(e)						添加元素到elt中最后的位置  把元素添加最后1個子節點的后面。
elt.insertBefore(new, child);			添加到elt中，child之前。
								// 參數1：要插入的節點  參數2：插入目標元素的位置	 
														
*//*
function add(){
	//
	var inputNode = document.createElement("input"); // 創建1個節點的對象
	inputNode.setAttribute("type","file"); //給新節點設置type的屬性值。
	var body = document.getElementsByTagName("body")[0];
	body.appendChild(inputNode);	//把新節點添加到body體中。
}
*/var count = 1;
functionadd(){
	var trNode  = document.createElement("tr");
	var tdNode  = document.createElement("td");
	var inputNode  = document.createElement("input");
	inputNode.setAttribute("type","button");
	inputNode.setAttribute("value",count+"");
	count++;
	tdNode.appendChild(inputNode);
	trNode.appendChild(tdNode);
	//trNode添加 到指定 的位置上。var tbodyNode = document.getElementsByTagName("tbody")[0];
	//tableNode.appendChild(trNode);var button1 = document.getElementById("b1");
	tbodyNode.insertBefore(trNode,button1); // 注意： 使用obj.insertBefore(o1,o2)這個方法的時候//obj必須是o1,o2的直接父節點。//alert(button1.nodeName+"~~"+trNode.nodeName+"~~"+tableNode.nodeName);
}
</script><meta http-equiv="Content-Type"content="text/html; charset=utf⑻" /><title>無標題文檔</title></head><body><table><tr><td><input type="button"value="0"></td></tr><tr id="b1"><td><input type="button"value="添加"onclick="add()"></td></tr></table><!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><script>functionaddFile(){
		var trNode = document.createElement("tr");
		var td1  = document.createElement("td");
		var td2  = document.createElement("td");
		td1.innerHTML="<input type='file'/>";
		td2.innerHTML="<a href='#' onclick='deleteFile(this)'>刪除附件</a>"
		trNode.appendChild(td1);
		trNode.appendChild(td2);
		//把trNode添加 到添加按鈕上面var addButton = document.getElementById("addButton");
		var tbody = document.getElementsByTagName("tbody")[0];
		tbody.insertBefore(trNode,addButton);
	}


	functiondeleteFile(deleteNode){
		//找到要刪除的tr  a---->td---->trvar trNode  = deleteNode.parentNode.parentNode;  //獲得到了要刪除的tr節點。// 找 到trNode的父節點var tbodyNode  =document.getElementsByTagName("tbody")[0];
		tbodyNode.removeChild(trNode);
		//trNode.removeNode(true); // removeNode() 在firefox上不 支持，在ie支持。
	}


</script><meta http-equiv="Content-Type"content="text/html; charset=utf⑻" /><title>無標題文檔</title></head><body><table><tr><td><input type="file"></td><td><a  href="#"onclick="deleteFile(this)">刪除附件</a></td></tr><tr id="addButton"><td><input type="button"value="添加附件"onclick="addFile()"/></td></tr></table></body></html>