關於DOM的增刪改那些事

DOM的瞭解

Dom是針對HTML和XML文檔的一個API(應用程序編程接口)，它秒回的是一個層次化的節點樹，允許開發人添加，移除，和修改某一部分。

Document

1.Document類型可以表示HTML頁面或基於XML的文檔，不過最常見的還是作爲HTMLDocument實例的document對象。

//所有瀏覽器都支持 document.documentElement和document.body
	var html =document.documentElement;
	alert(html === document.childNodes[0]);
	var body=document.body;

2.文檔信息

/*
	IE8和之前版本爲NULL,IE9+和Firefox如果存在文檔類型聲明，則將起作爲味道的第一個子節點，
	Safari,Chrome和Opera如果存在文檔類型則將其解析，但不作爲文檔的子節點
	*/
	var doctype=document.doctype;
	console.log(doctype);

	/* 獲取文檔標題 */
	var title=document.title;
	console.log(title)

	/*
	URL屬性中包含頁面完整的URL
	domain屬性中只包含頁面的域名
	referrer屬性中則保存這鏈接到當前頁面的那個頁面的URL
	*/
	var url =document.URL;
	var domain=document.domain;
	var referrer=document.referrer;
	console.log('url'+url);
	console.log('domain'+domain);
	console.log('referrer'+referrer);

3.document的其他屬性

<input type="text" name="box">
<div id="box">
	<div class="box1" name="name11">1</div>
	<div class="box2" name="name12">2</div>
	<div class="box3" name="name12">3</div>
	<div class="box4">4</div>
</div>

/* 
	getElementById:
	取得div元素的引用,IE7以及更早版本爲NULL。
	但是IE7以及低版本中，當name特效和id都是box的時候，會返回input元素。
	所以寫表單的name屬性的時候儘量別和其他ID相同*/
	var oDiv=document.getElementById("box");
	console.log(oDiv);


	/*
	getElementsByTagName,接受一個參數(元素的標籤名),
	返回一個HTMLCollection對象
	屬性和方法：
	length屬性獲取元素的數量
	item()方法訪問對象中的項
	namedItem()通過元素的name特性取得集合中的項
	【可以簡化爲[]，方括號傳入數值或字符串形式的所有值之後，會自動調用item和namedItem方法】

	*/
	var oDiv1=document.getElementsByTagName("div");
	console.log(oDiv1.length);//5
	console.log(oDiv1.item(1));//<div class="box1" name="name11">1</div>
	console.log(oDiv1.namedItem('name11'));//<div class="box1" name="name11">1</div>
	console.log(oDiv1[1]);//<div class="box1" name="name11">1</div>


	/*
	其他少用的
	getElementsByName()返回帶有給的name特性的所有元素
	document.anchors，所有帶name特性的<a元素>
	document.forms，所有的<form>元素
	document.images，所有的<img>元素
	*/

	/*
	文檔寫入
	write(),writeln()寫入到輸出流中的文本
	open()和close()分佈用於打開和關閉網頁的輸出流
	*/
	document.write("<strong>"+(new Date()).toString()+"</strong>")

Element類型

1.瞭解

Element類型用於表現XML或HTML元素，提供對元素標籤名、子節點及特性的訪問。

2.元素屬性

/*
	訪問元素的標籤名，可以用nodeName也可以用tagName
	*/
	var oDiv=document.getElementById("box");
	console.log(oDiv.tagName);//DIV
	console.log(oDiv.tagName ==oDiv.nodeName)//true
	//用於判斷是否這個元素【使用任何文檔】
	if(oDiv.tagName.toLowerCase() == "div"){
		console.log("對的")
	}

	/* 獲取類-className,title,lang等等*/
	console.log(oDiv.className);
	console.log(oDiv.title);
	console.log(oDiv.lang);

	/*
	因爲元素特性太多，一個個獲取太麻煩，雖有又出來三個新方法方便獲取
	getAttribute(),setAttribute(),removeAttribute()
	*/
	console.log(oDiv.getAttribute("id"));
	console.log(oDiv.getAttribute("class"));
	oDiv.setAttribute("title","editTitle")
	console.log(oDiv.getAttribute("title"));

3.元素的增刪

	/* 創建元素 */
	var pE=document.createElement("p");
	var oDiv=document.createElement("div");
	/*  創建文本節點*/
	var textNode=document.createTextNode("Hello World!");
	var otherText=document.createTextNode("petter Here");
	/*把元素添加到文檔樹
	appendChild()
	insertBefote()
	replaceChild()
	*/
	pE.appendChild(textNode);
	pE.appendChild(otherText);
	console.log(pE.childNodes.length);//2
	//normalize()將文本節點合併成一個節點
	pE.normalize();
	console.log(pE.childNodes.length);//2
	oDiv.appendChild(otherText);
	document.body.appendChild(pE);
	document.body.appendChild(oDiv);

	/* 刪除元素 */
	document.body.removeChild(oDiv)