DOM02操作元素 1、元素的内容 1、*elem.innerHTML：获取或者设置开始标签到结束标签之间的HTML代码，没有兼容性问题，可以识别标签 获取：elem.innerHTML 设置：elem.innerHTML="新内容"
2、elem.textContent：获取或者设置开始标签到结束标签之间的纯文本，但是有兼容性问题，不可以识别标签
获取：elem.textContent
设置：elem.textContent="新文本"
特殊：老IE才叫elem.innerText;//第一见到小三上位，反而所有的主流浏览器来将就了老IE
3、*input.value：获取或设置单标签（input）的内容准备的
获取：input.value
设置：input.value="新值"
2、元素的属性： 1、*获取属性值： 核心DOM：elem.getAttribute("属性名")
HTML DOM：elem.属性名;
2、*设置属性值：
核心DOM：elem.setAttribute("属性名","属性值");
HTML DOM：elem.属性名="新值";
3、删除属性值：
*核心DOM：elem.removeAttribute("属性名")
HTML DOM：elem.属性名="" - 虽然简单，但是有的情况会删不干净，有的属性删不干净依然会有功能比如：href
4、判断有没有 - 垃圾
核心DOM：elem.hasAttribute("属性名");
HTML DOM：elem.属性名!="";
返回的结果是一个布尔值，只能判断有没有，不能判断是什么
HTML DOM：有两个小缺陷：
1、class需要写为className
2、一切自定属性不能操作
3、删除删不干净，依然会留下属性节点
3、元素的样式： 1、内联样式： 获取：elem.style.css属性名 设置：elem.style.css属性名="css属性值" 特殊： 1、css属性名如果有横线要省略，变为小驼峰命名法 2、获取的时候只能获取到内联样式，这个小缺陷可以忽略不计
2、样式表： - 不推荐
//获取到你想要操作的某个样式表
var sheet=document.styleSheets[i];
//获取样式表中所有的样式规则
var rules=sheet.cssRules;
//选出自己想要操作的某个规则
var rule=rules[i];
//操作
获取：console.log(rule.style.css属性名);
设置：rule.style.css属性名="css属性值"
为什么更推荐内联：
1、不会牵一发动全身
2、优先级一定是最高的
作业： 1、*2_1.html 2_2.html *3_1.html *4_1.html
DOM03
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、上树
作业： 1、*1_2.html 2、3.html 3、new2_1.html
