1.操作元素

1.内容：

1.innerHTML：支持标签，并且没有兼容性问题
  获取：elem.innetHTML;
  设置：elem.innerHTML="新值"；
2.textContent:不支持标签，并且有兼容问题，老IE不支持，所以现在都用:innerText
   获取：elem.innerText;
   设置：elem.value="新值";

2.属性：

• 获取属性值：
   核心DOM：万能的，可以操作一切属性
           elem.getAttribute("属性名")
   HTML DOM:只能操作标准属性，并且class需要写出className
           elem.属性名
  

• 设置属性值：
   核心DOM：万能的，可以操作一切属性
            elem.setAttribute("属性名","值")  
   HTML DOM:只只能操作标准属性
             elem.属性名="新值"
  

• 删除属性：
   核心DOM：elem.removeAttribute("属性名")；  删干净整个属性节点
   HTML.DOM:elem.属性名="";
     赋值为空，属性值确实没了，但属性名还在，有的属性只需要属性名也具有效果(herf、disable、readonly)
  

•   判断属性：
     核心DOM：elem.hasAttribute("属性名")；
     只能判断有没有
     更推荐：if(a1.getAttribute("属性名")=="属性值"){
     console.log("有并且是");
     }
  

3.样式：

  内联：优先级最高，只会操作某个元素，不会牵一发动全身
  获取：elem.style.css属性名；
  设置: elem.style.css属性名="css属性值"；
   css属性如果有横线，去掉横线写为小驼峰命名法
   
   样式表：4步
     //获取哪一个样式表
     var sheet=document.styleSheets[1];
     //获取所有的样式规则
     var rules=sheet.cssRules;
     //获取到了我想要操作的样式规则
     var rule=rules[36];
     //修改或获取样式
     console.log(rule.style.background);
     rule.style.background="";

2.创建元素&渲染页面&删除元素

1.创建元素：3步

1.var 空标签=document.createElement("标签名")；
2.设置必要的属性和事件
    空标签.属性名="值"
    空标签.on事件名=function(){
           操作
          }
3.渲染页面元素：3种
   父元素.appendChild(新元素)； //新元素会插入到父元素里面的最后
   父元素.insertBefore(新元素，已有子元素)；//新元素会插入到父元素里面的已有子元素之前  --不推荐：会修改其他元素的下标
   父元素.replaceChild(新元素，已有子元素);//新元素会替换掉父元素里面的已有子元素
4.删除元素：
   元素.remove();

例题：

   <div id="father">
		<a href="" id="a1">dd</a>
	</div>
	<script type="text/javascript">
                    //创建元素
		var a=document.createElement("a");
		a.href="https://www.baidu.com";
		a.innerHTML="百度";
                    //将js中创建的元素渲染到页面上
		// father.appendChild(a);
		// father.insertBefore(a,a1)
		father.replaceChild(a,a1)
		
		//删除元素
		// father.removeChild(a2);
		// a2.remove(); 
		
	</script>

3.HTML DOM提供了一些常用的对象：简化了核心DOM的操作:--但不是所有都能简化

•  1.image：简化了创建
     var img=new Image();
   强调：在DOM 中，不是所有都有构造函数创建方式
  

•  2.form:简化了查找
   查找form元素:var form=document.forms[i];
   查找表单控件：var input=form.elements[i];
   专属事件：onsubmit事件  ->提交的一瞬间会执行，也可以阻止提交return false；
  

•  3.select：
      属性：2个
       1.option===children: 获取到select下面的所有option
       2.selectedIndex  -获取到当前选中项的下标
       方法：
       1.select.add(option) -完全等效于appendChild,追加元素
       2.select.remove(i);  -删除select中的第i个option
       专属事件：onchange ->选中项发生改变时触发
  

•  4.option：简化了创建
       var opt=new Option("innerHTML","value");