操做DOM

操做DOM
	DOM是什麼
        DOM：是樹狀的html
		document：是DOM的根節點     
		HTML文檔被瀏覽器解析後就是一棵DOM樹，要改變HTML的結構，能夠經過JavaScript來操做DOM。
　　　　始終記住DOM是一個樹形結構。
 	
	對DOM操做
		操做一個DOM節點實際上就是這麼幾個操做：
		更新：更新該DOM節點的內容，至關於更新了該DOM節點表示的HTML的內容；
		遍歷：遍歷該DOM節點下的子節點，以便進行進一步操做；
		添加：在該DOM節點下新增一個子節點，至關於動態增長了一個HTML節點；
		刪除：將該節點從HTML中刪除，至關於刪掉了該DOM節點的內容以及它包含的全部子節點。

查找節點
		document.getElementById()//返回
		document.getElementsByTagName()
		document.getElementsByClassName()
        document.querySelector();
		document.querySelectorAll()
   
		//根據id找元素
		var test = document.getElementById('test')
		var trs = document.getElementById('test-table').getElementsByTagName('tr');
		// 獲取節點test下的全部直屬子節點:
		var cs = test.children;
		// 獲取節點test下第一個、最後一個子節點：
		var first = test.firstElementChild;
		var last = test.lastElementChild;
		

		// 經過querySelector獲取ID爲q1的節點：
		var q1 = document.querySelector('#q1');
		// 經過querySelectorAll獲取q1節點內的符合條件的全部節點：
		var ps = q1.querySelectorAll('div.highlighted > p');
			
更新DOM
	更新DOM元素的內容
		一種是修改innerHTML屬性，這個方式很是強大，不但能夠修改一個DOM節點的文本內容，還能夠直接經過HTML片斷修改DOM節點內部的子樹：
			var p = document.getElementById('p-id');
			//更新文本
			p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
			//修改HTML的結構
			p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
			// <p>...</p>的內部結構已修改
			用innerHTML時要注意，是否須要寫入HTML。若是寫入的字符串是經過網絡拿到了，要注意對字符編碼來避免XSS攻擊
		第二種是修改innerText或textContent屬性，這樣能夠自動對字符串進行HTML編碼，保證沒法設置任何HTML標籤：
			var p = document.getElementById('p-id');
			p.innerText = '<script>alert("Hi")</script>';
			二者的區別在於讀取屬性時，innerText不返回隱藏元素的文本，而textContent返回全部文本。另外注意IE<9不支持textContent。
		

插入DOM
	若是這個DOM節點是空的，例如，<div></div>，那麼，直接使用innerHTML = '<span>child</span>'就能夠修改DOM節點的內容，至關於「插入」了新的DOM節點	
	有兩個辦法能夠插入新的節點。
	  方法1：使用appendChild，把一個子節點添加到父節點的最後一個子節點
		js = document.getElementById('js'),
		list = document.getElementById('list');
		list.appendChild(js);
		更多的時候咱們會從零建立一個新的節點，而後插入到指定位置
			var d = document.createElement('style');
			d.setAttribute('type', 'text/css');
			d.innerHTML = 'p { color: red }';
			document.getElementsByTagName('head')[0].appendChild(d);
			
	insertBefore
		若是咱們要把子節點插入到指定的位置怎麼辦？
			可使用parentElement.insertBefore(newElement, referenceElement);
				子節點會插入到referenceElement以前
		
刪除DOM
	父元素刪除
		這是經常使用的解決方案：找到您但願刪除的子元素，而後使用其 parentNode 屬性來找到父元素：
		var child=document.getElementById("p1");
		child.parentNode.removeChild(child);	
	本身刪掉
		// 拿到待刪除節點:
		var self = document.getElementById('to-be-removed');
		// 拿到父節點:
		var parent = self.parentElement;
		// 刪除:
		var removed = parent.removeChild(self);
 		self.remove();
		removed === self; // true
		注意到刪除後的節點雖然不在文檔樹中了，但其實它還在內存中，能夠隨時再次被添加到別的位置。
		所以，刪除多個節點時，要注意children屬性時刻都在變化

複製節點
	var self = document.getElementById('to-be-removed');
	self .cloneNode(true);

修改節點屬性7
	節點對象.屬性，只能訪問節點固有的屬性，訪問不到自定義的屬性
	節點對象.getAttribute()能訪問全部的屬性，之後經常使用
		div.getAttribute('msg')
	節點對象.setAttribute()
		div.setAttribute("class","zhangss12112312312");
	節點對象.removeAttribute()
		div.removeAttribute("class");

DOM 定義了訪問和操做 HTML 文檔的標準
	在 HTML DOM 中，全部事物都是節點。
	
	HTML 文檔中的全部內容都是節點：
		文檔節點:整個文檔
		元素節點:每一個 HTML 元素
		文本節點:HTML 元素內的文本
		屬性節點:每一個 HTML 屬性
		註釋是註釋節點
		
	節點樹中的節點彼此擁有層級關係
		父（parent）、子（child）和同胞（sibling）
	document就是html節點
	爲何節點的第一個子節點不是屬性節點而是文本節點
		由於：屬性節點藏在元素節點裏面，因此你不能經過正常的方式得到到屬性節點
	索引就是下標，只是叫法不同

	parentNode,parentElement,childNodes,children區別
	childNodes包含文本節點和元素節點
	children僅包含元素節點
	parentNode、parentElement是同樣的

				
修改CSS		
		DOM節點的style屬性對應全部的CSS，能夠直接獲取或設置。
		由於CSS容許font-size這樣的名稱，但它並不是JavaScript有效的屬性名，因此須要在JavaScript中改寫爲駝峯式命名fontSize：
			var p = document.getElementById('p-id');
			// 設置CSS:
			p.style.color = '#ff0000';
			p.style.fontSize = '20px';
			p.style.paddingTop = '2em';