DOM梳理

学习 DOM 其实就是掌握 DOM对象的 属性 和 方法.
DOM的研究对象是document对象.每个载入浏览器的HTML文档都会成为document对象.document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
DOM将页面内的所有标签以对象的形式表现出来,标签内的id class style等属性 都作为对象的属性存在
document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

DOM对象模型中各个对象间的层次从关系:

DOM主要研究HTML中的节点,对节点进行操作,从而实现改变标签属性,改变css样式,添加事件等.

使用document获取HTML元素对象

直接获取方式:
	.getElementById
	.getElementsByTagName
	.getElementsByClassName
	.querySelector
	.querySelectorAll
间接获取方式：
	父子关系：获取父级元素对象
	子父关系:获取子元素对象
	兄弟关系:获取兄弟对象

JS操作元素类名

元素对象.classList
				.add()        //添加类名
				.remove()  //删除类名
				.contains() //查看是否包含类名
				.toggle()    //取反

JS操作HTML属性

//获取元素对象: 
元素对象名.属性名  --返回当前属性的属性值
元素对象名.getAttribute("属性名"); --返回自定义属性的值???
//修改
元素对象名.属性名 = 属性值;
元素对象名.setAttribute("属性名","属性值"); --修改自定义属性的值
//注意:尽量不要去修改元素的id值和name属性值
使用自定义方式获取固有属性时,value值获取的是默认值,不能获取到实时用户值???

JS操作元素内容

//获取元素对象:
元素名.innerHTML --返回当前元素的所有内容,可以识别标签
元素名.innerText --返回当前元素的所有内容,不识别标签
//修改:
元素对象名.innerHTML="新的值"//会将原有内容覆盖，并HTML标签会被解析
元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
元素对象名.innerText="新的值"//会将原有内容覆盖，但HTML标签不会被解析，会作为普通文本显示。

JS操作元素样式

//获取元素对象
*通过style属性:* 
元素对象名.style.样式名 = "样式值 "  //添加或修改
元素对象名.style.样式名 = " "   //删除样式
注意:通过赋值只能修改行内样式 获取的也只有行内样式
*通过类名方式:*
元素对象名.className = "新的值" //添加类选择器样式或修改类选择器样式
元素对象名.className = " " //删除

JS操作HTML文档结构

增加节点:
1.ele.innerHTML = ele.innerHTML+"内容"
2.获取元素对象 
var obj=document.createElement("标签名");
元素对象名.appendChild(obj);
删除节点:
1.ele.innerHTML= "" //删除所有子节点
2.父节点.removeChild(子节点对象) //删除指定子节点