DOM:是文档对象模型，是一套操作HTML和XML文档的API
DOM的作用:
1.找对象(元素)
getElementById() //根据id属性获取一个DOM对象
getElementsByTagName()//根据标签返回多个DOM对象
H5中新增:
1. getElementsByClassName() 通过类名获取元素，以类数组形式存在
2.document.querySelector() 通过css选择器获取元素，返回匹配条件的第一个元素
3.document.querySelectorAll() 通过CSS选择器获取元素，以类数组形式存在。
DOM对象的属性和HTML的标签属性几乎是一致的
src title className href
DOM对象中的表单对象拥有的属性:
type value checked selected disabled
DOM对象的解析:
innerHTML会把内容解析到DOM树上
-获取标签之间的内容
-设置标签之间的内容
2.设置对象的属性
getAttribute()
setAttribute()
removeAttribute()
直接使用.属性的方式不可以设置自定义属性(IE除外)，getAttribute什么时候都可以使用
设置元素的样式
1.className
2.style
无论设置还是获取都只能操作行内样式
DOM的style属性只能获取标签中使用style设置的样式
无法获取嵌入或外部样式
style.cssText获取style里面的字符串
style里面的常用属性:
backgroundColor
backgroundImage
color
width
height
border
opacity
注意DOM对象style的属性和标签中style内的值不一样，因为JS中-不能作为表示符
h5新增:
1、Node.classList.add('class') 添加class
2、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切换class，有则移除，无则添加
4、Node.classList.contains('class') 检测是否存在class
Node指一个有效的DOM节点，是一个通称。
h5中可以自定义属性:
在HTML5中我们可以自定义属性，其格式如下data-*=""，例如
data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
Node.dataset是以类对象形式存在的
当标签的自定义属性格式为:data-my-name时,则需要以驼峰格式才能正确获取:Node.dataset['myName']
<!--给标签添加自定义属性,必须以data-开头-->
例子:
<div class="box" title="盒子" data-my-name="zs" data-content="我是一个div">div</div>
<script>
var box = document.querySelector(".box")
//获取标签的自定义属性 需要通过dataset[]方式来获取
console.log(box.dataset["content"])
//给自定义的属性赋值
box.dataset["content"] = "这是一个测试而已"
//当标签的自定义属性格式为:data-my-name时,则需要以驼峰格式才能正确获取:Node.dataset['myName']
console.log(box.dataset['myName'])
3.动态的创建和删除元素
方式一:innerHTML
方式二:createElement()
方式三:document.write()
appendChild()
removeChild()
insertBefore()
replaceChild()
4.动态的创建和删除表格
方式1
createElement()
方式2
rows (只读，table和textarea能用)
insertRow() (只有table能调用)
deleteRow() (只有table能调用)
cells (只读，table和textarea能用)
insertCell() (只有tr能调用)
deleteCell() (只有tr能调用)
5.事件-触发响应
事件源
事件名称
事件程序
