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