操做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';