Web APIs：节点操作（创建元素的三种方式与区别）及总结

document.write创建元素（了解）

document.write()创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘

1.document.write()创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
			window.onload=function(){
		    document.write('
123
')
			 }

innerHTML和createElement效率对比

innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘

innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 creatElement 高

// innerHTML创建元素
				var inner=document.querySelector('.inner')
				// for (var i = 0; i < 100; i++) {
				// 	inner.innerHTML+=  'inner'+"\n"
				// }
				var arr=[];
				for (var i = 0; i < 100; i++) {
					arr.push('inner')
				}
				inner.innerHTML=arr.join("");
			
				// document.createElement()创建元素
				var create=document.querySelector('.create')
				for (var i = 0; i < 100; i++) {
					var a=document.createElement('a');
					// a.innerHTML+='create'+'\n'
					create.appendChild(a);

DOM重点核心     

注意：我们获取过来的DOM元素是 一个对象（object），所以称为文档对象模型  

关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

创建

1. document.write

2. innerHTML

3. createElement

增

1. appendChild

2. insertBefore

删

1. removeChild

改

1. 修改元素属性： src、href、title等

2. 修改普通元素内容： innerHTML 、innerText

3. 修改表单元素： value、type、disabled等

4. 修改元素样式： style、className

查

1. DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐

2. H5提供的新方法： querySelector、querySelectorAll 提倡

3. 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、 nextElementSibling)