JavaScript--DOM

精华总结，全部接受自一位大佬的总结，本人将每一个都做了一个简单的实操，基本上每个都跟上了练习。大佬的总结+我的练习，恭喜你马上就能码JS了，是不是很开心，抓紧时间看代码吧，还是多练！

Create
	CreateElement  通过指定名称创建一个元素
		Var btn = document.crateElement(‘button’)
	createTextNode  创建文本
		var txt = document.createTextNode(‘你好’);
	cloneNode
		设置为 true 克隆节点及其属性以及后代
		设置为false 只克隆节点及其后代
		
Coffee
Tea
		
Water
Milk
		var li1 = document.getElementById('list1').lastChild;
		var copy = li1.cloneNode(true);
		document.getElementById('list2').appendChild(copy);Delete 
	removeChild  方法可从子节点列表中删除某个节点
		var list = document.getElementById(‘list1’);
		list.reomveChild(list.childNodes[0]);
		
Update
	replaceChild  用于新节点替换某个子节点（新节点可以是因存在的也可以新创建的节点）
		replaceChild(newnode,oldnode);
		var list1 = document.getElementById('list1')
		var list2 = document.getElementById('list2')
		list2.replaceChild(list1.lastChild,list2.firstChild)
		如果是已存在的节点，那么存在的节点相当于直接移动到新的位置
	appendChild 可向节点的字节列表的末尾添加新的节点（也可以将已存在的节点移动到目标位置）
		var li = document.createElement(‘li’);
		var text = document.createTextNode(‘粥’);
		li.appendChild(text);
		List2.appendChild(li);  /*list2是上面获取的ul列表*/
	insertBefore  在指定的已有子节点之前插入新的子节点（可以将有节点移动到指定节点前）
		var body = document.getElementsByTagName(‘body’)[0]
		var a = document.createElement(‘a’);
		var txt = document.createTextNode(‘百度’);
		a.href=’https://www.baidu.com’
		body.insertBefore(a,body.childNodes[2])

Retrieve

Node property
		NodeType  返回指定节点的节点类型（返回的是数字，1代表元素节点，2代表属性节点）
		Nodename 返回节点的名
	Attribute
		Id
		getAttribute()  通过名称获取属性的值
			百度
			var a = document.getElementById(‘a’);
			a.getattribute(‘href’);   /*返回https://www.baidu.com*/
	removeAttribute()   删除指定的属性
		百度
		var a = document.getElementById(‘a’);
		a.remove Attribute(‘href’);   /*返回https://www.baidu.com*/
	setAttribute()  添加指定的属性，并为其赋指定的值（如果该属性有值，那就是修改属性值）
		a.setAttribute('href','https://www.baidu.com') 
getElementBy
	getElementById     -----Object   获取css选择器为id
		var div = document.getElementById(‘div1’);
	getElementsBytagName   -------Array  获取css选择器为标签
		var p = document.getElementByTagName(‘p’); 
	getElementByClass      -------Array   获取css选择器为class类
		var div = document.getElementByClass(‘div2’);
	querySelector   ----- Object  
		Var div = document.querySelector(‘.div1’);//获取第一个class名为div1的元素
		Var div = document.querySelector(‘#div1’);//获取第一个id名为div1的元素
		Var p = document.querySelector(‘p’);获取第一个标签名为p的元素
	querySelectorAll   -------Array
Relationship（关系）
	childNodes（子节点）
		Lastchild --最后一个子节点
		Firstchild --第一个子节点
		previousSibing ---返回前一个兄弟节点
		nextSibing    --返回下一个兄弟节点
		hasChildNodes  --检查是否有子节点
		
	Children（子元素）
		Focus()   -- 用于给与元素焦点，用户不需要点击就可以直接进行文本编辑
			Hello world....
			
			
	activeElement  --返回文档中当前获得焦点的元素
			document.activeElement
	nextElementSibing  -- 返回指定元素之后的下一个兄弟元素
			var textarea = document.getElementById('txt1')
			textarea.nextElementSibling
	previousElementSibling  -- 返回指定元素的前一个兄弟元素
		var div = document.getElementById(‘div1’);
		textarea.previousElemetSibling
	lastElementChild -- 返回最后一个子节点
		var ul = document.getElementsByTagName('ul')[0];
		ul.lastElementChild
	firstElementChild  -- 返回第一个子节点
		var ul = document.getElementsByTagName('ul')[0];
		ul.firstElementChild
	childElementCount  -- 返回子节点数量
		var ul = document.getElementsByTagName('ul')[0];
		ul.childElementCount
	parentNode -- 返回指定节点的父节点，parentNode跟parentElement除了前者是w3c标准，后者只ie支持
		var ul = document.getElementsByTagName('ul')[0];
		ul.childElementCount
		
	InnerText	  -- 返回指定元素包裹的文本内容
		var ul = document.getElementsByTagName('ul')[0];
		ul.innerText
	innerHtml  -- 返回指定元素之间的所有内容，包括标签 
		var ul = document.getElementsByTagName('ul')[0];
		ul.innerHtml
	outerHtml -- 返回指定元素以及其子元素
		var ul = document.getElementsByTagName('ul')[0];
		ul.outerHtml