1、创建元素&渲染页面：3步

1、先创建空标签
	var elem=document.createElement("标签名");
	
2、为其添加必要属性和事件
	elem.属性名="属性值";
	elem.on事件名=function(){操作}

3、渲染DOM树/页面：3种
                *1、父元素.appendChild(elem);//elem追加到父元素里面，当最后一个儿子
	2、父元素.insertBefore(elem,已有子元素);//elem追加到父元素里面，插入在已有子元素的前面 - 影响其他元素的下标，不推荐
	3、父元素.replaceChild(elem,已有子元素);//elem追加到父元素里面，新元素替换掉已有子元素 - 不推荐

2、删除元素：elem.remove();

核心DOM学习完毕，你已经无敌了：总结一句话DOM可以干什么：增删改查DOM元素（元素、文本、属性、样式）

HTML DOM：简化核心DOM开发，核心语法太繁琐，提供了一些常用的对象

1、image对象：垃圾，仅仅只是简化了创建部分
	创建：var img=new Image(); - 不是人人都可以简化为构造函数创建方式

2、form对象：垃圾，仅仅只是简化了查找部分
	查找form元素：var form=document.forms[i];
	以及找表单控件：var inp=form.elements[i];

3、*select对象：牛逼：提供了2个属性，2个方法，1个事件
	属性：
		1、select.options === select.children; 获取select里面的所有的option
		2、*select.selectedIndex - 获取当前选中项的下标，一定是搭配联动一起使用

	方法：
		1、*sel.add(option); - 完全相当于appendChild
		2、elem.remove(i); - 当时当remove删除元素出现过后，他就当场淘汰了

	专属事件：onchange - 选中项发生了变化才会触发

4、*option对象：仅仅只是简化了创建部分
	创建：var opt=new Option("innerHTML","value")

	一句话完成4个操作：sel.add(new Option("榴莲","榴莲"));
		1、创建了空的option	
		2、为option设置了innerHTML
		3、为option设置了value
		4、渲染页面

DOM1 - 掘金 (juejin.cn)
DOM2 - 掘金 (juejin.cn)