今天上午目标：操作元素 强调页面上一切数据都是字符串类型 <标签名 属性名="属性值" style="样式">内容</标签名>
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.属性名="";
4、判断有没有：垃圾，只能判断有没有，不能判断具体是什么
核心DOM：elem.hasAttribute("属性名");
HTML DOM：elem.属性名!="";
强调：
HTML DOM虽然轻松方便，但是有两个小缺陷：
1、只能访问/操作标准属性，不能操作自定义属性
2、ES6诞生后，class变成了一个关键字，class必须写为className
3、删除的时候，HTML DOM设置为空，删不干净属性节点还在，只是值为空了，但是有的属性删不干净，
它依然具有功能，比如：href、disabled，更推荐核心DOM才可能删干净
4、一切的获取都是为了判断，一切的设置都是在修改
3、元素的样式： 1、内联样式：优先级最高，一定会覆盖其他样式 仅仅当前元素可用，不会牵一发动全身 获取样式：elem.style.css属性名; 设置样式：elem.style.css属性名="css属性值";
唯一的小缺点：获取样式时，只能获取内联样式
2、样式表：
//1、获取你想要操作的样式表
var sheet=document.styleSheets[i];
//2、获取到所有的样式规则
var rules=sheet.cssRules;
//3、数出你要操作的那个样式规则
var rule=rules[i];
//4、获取或设置
console.log(rule.style.background);
rule.style.background="purple";
作业： 1、*使用value来实现placeholder的功能 2、*2_1.html 2_2.html *3_1.html 4_1.html(不准使用let，不准使用自定义下标)
1、创建元素：3步 1、先创建空标签： var elem=document.createElement("标签名");
2、为其设置必要的属性和事件
elem.属性名=属性值;
elem.on事件名=function(){}
3、渲染页面 - 上树：3种
*父元素.appendChild(elem) - 将elem追加到父元素里面当儿子，最后一个儿子
父元素.insertBefore(elem,已有子元素) - 将elem追加到父元素里面当儿子，插入在已有子元素的前面
父元素.replaceChild(elem,已有子元素) - 将elem追加到父元素里面当儿子，替换掉已有子元素
2、删除元素：elem.remove();
恭喜你，你的核心DOM全部学习完毕了：增、删、改、查 - 元素、内容、属性、样式。
HTML DOM简化了核心DOM
4、HTML DOM常用对象： 1、image对象：图片对象，仅仅只是简化了创建 var img=new Image(); 强调：构造函数方式，不是任何一个元素都可以使用
2、form对象：表单对象，仅仅只是简化了查找，还带了一个专属事件
查找form元素：var form=document.forms[i];
查找input元素：var input=form.elements[i];
专属事件：提交事件：form.onsubmit=function(){}
3、*select对象：带来了2个属性，2个方法，1个事件
属性：select.options - 获取到select下面所有的option === children
select.selectedIndex - 获取选中项的下标，只要是做【联动必备】
方法：select.add(option) === appendChild;
select.remove(i) - 删除i下标的option元素
专属事件：select.onchange=function(){} - 选中项发生改变就会触发事件
4、*option对象：仅仅只是简化了创建，但是非常屌，一句话可以完成4个操作
select.add(new Option("innerHTML","value"));
作业： 1、上午5道题 2、下午3道题：*1_2.html 3.html new2_1.html
