1.DOM Document节点
DOM 全称：
Document Objcet Model即文档对象模型
本质：一套用来管理控制html文档的规则
Document节点是一种具象化的表现形式
ps:dom节点又被称为document对象（文档对象）
ps:dom中规定html页面中的所有元素都是节点
2.Document属性
（1）doctype,documentElement,body,head;返回文档内部的某个节点
【doctype】文档类型/【documentElement】表示当前文档的根节点
document.doctype返回当前文档的类型
对于HTML文档来说document对象一般有两个子节点，
①第一个子节点是doctype
②第二个字节点是documentElement(返回html节点)
语法：document.doctype/document.Element
ps:放在script中可用if来判断当前html的版本（兼容性处理时可能用到）
【body】
返回当前文档的body或者frameset节点，不存在返回null
ps:body可写，若写入一个新节点会导致原有节点被删除
【head】
返回当前文档的第一个head节点如不存在返回null
（2）documentURL,URL,domain,lastModified,location,title,readyState属性
【documentURI】&【URL】都表示【当前文档的网址】
url属性只有html才具有
ps:IE浏览器目前不支持documentURL属性
pss:document.documentURI===documentURL//true
【domain】
返回当前文档的域名
语法：document.domain
例如：
某张网页的网址是 http://www.example.com/hello.html ，domain属性就等于 www.example.com 。如果无法获取域名，该属性返回null。
例：
var baidu = "www.baidu.com";
if (document.domain === baidu){
window.close();
}
//如果域名是百度，则关闭当前页面
【lastModifide】
返回单钱文档（网页）最后修改的时间戳，格式为字符串
【注】若比较两个字符串时间的先后顺序，则需先转换成Date对象才能比较
例：if(Date.parse(doc1.lastModifide)>Date.parse(doc2.lastModifide)){//...}
ps：Date.parse方法能够将时间格式字符串转换成时间戳格式
【location】
返回的是一个只读属性，提供了当前文档的URL信息（现用现查）
例：以下三种写法都可改变当前页面的url
location.assign('传递一个url')；
location.href('传递一个url')；
window.href('传递一个url')；
例：reload();重新加载当前页面的显示
location.reload(false);//优先从本地缓存重新加载
location.reload(true);//优先从服务器重新加载
【title】
可以获取当前文档的title值，并且可以对其进行修改
document.title='新标题'；
【characterSet】
返回渲染当前文档的字符集，
例：UTF-8、ISO-8869-1
语法：document.characterSet
【readyState】
表示当前文档的加载状态
三种可能值：
loading: 加载HTML代码阶段（尚未完成解析）
interactive: 加载外部资源阶段
complete: 全部加载完成
// 轮询检查
var interval = setInterval(function() {
if (document.readyState === 'complete') {
console.log('now web is loading complete!');
clearInterval(interval);
// ...
}
}, 100);
ps：setInterval(code,millimSec)可以按照一定时间间隔重复调用代码块，时间间隔单位是毫秒
（3）返回文档内部特定元素的集合
这些集合都是动态的，原节点有任何变化会立刻反应在集合中
【anchors】
返回网页中所有指定了name属性的a节点元素构成的数组
【forms】
3.Document节点操作页面元素（重点）
（1）选中页面元素
【querSelector()】
返回匹配指定的css选择器的元素节点。若有多个满足，返回第一个；若无，返回null
eg:var temp=document.querSelector('选择器');//".classname","#name"等
【querSelectorAll】
返回所有匹配选择器，并构成一个数组返回；无返回null数组（升级版）
【getElementBy...】系列
【getElementById()】返回匹配指定ID属性的元素节点
【getElementsByTagName()】返回所有指定标签的元素
【getElementsByClassName()】//返回符合指定条件的所有元素
【getElementsByName()】 用于选择拥有name属性的HTML元素
ps:无论使用哪种方式进行选择，元素都必须拥有name属性
pss:执行前页面元素必须被创建
psss:思考：两者之间的区别
（2）创建页面元素节点，属性
【creatElement()】生成html元素节点
语法：document.creatElement("标签名");
例：
var newp = document.createElement(“p”);
document.body.appendChild(newp);
因为直接创建一个按钮根本没办法直观看到，因此通过.appendChild方式添加到body当中。.appendChild()方法的作用能够将代码创建的元素添加到指定位置
【creaTextNode()】生成文本节点，参数为所要生成的文本节点的内容
ps:文本也是一个节点
【creatAttribute()】创建一个新的属性节点，并返回它
（3）操作页面元素属性
【元素节点特性方法getAttribute(),setAttribute()和removeAttribute()】
语法：
getAttribute('属性名');
setAttribute('属性名','属性值');
removeAttribute('属性名');
【元素节点的style属性】
Element节点本身还提供style属性，用来操作CSS样式
var divStyle = document.querySelector('div').style;
divStyle.cssFloat = 'left';
divStyle.backgroundColor = 'red';
【注意事项】
a.将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写
b.CSS属性名是JavaScript保留字的，在属性名之前需要加上字符串“css”
c.style对象的属性值都是字符串，而且包括单位。
【元素节点的style属性的cssText写法】
divStyle.cssText = 'background-color:red;border:1px solid black;height:100px;100px;';
ps：删除整个style属性可以用(divStyle.cssText='' '';)这种写法。
pss：cssText对应的是HTML元素的style属性，所以不用改写CSS属性名
【元素节点的style属性方法setProperty()、getPropertyValue()和removeProperty() 】
style对象提供了三个方法来读写行内css规则：
setProperty(propertyName,value)：设置某个CSS属性。
getPropertyValue(propertyName)：读取某个CSS属性。
removeProperty(propertyName)：删除某个CSS属性。
这三个方法的第一个参数，都是CSS属性名，且不用改写连词线。
var divStyle = document.querySelector('div').style;
divStyle.setProperty('background-color','red');
divStyle.getPropertyValue('background-color');
divStyle.removeProperty(‘background-color’);
思考：如果想要获取一个div的class属性的值，有哪些办法能够实现？