DOM的了解
Dom是针对HTML和XML文档的一个API(应用程序编程接口)，它秒回的是一个层次化的节点树，允许开发人添加，移除，和修改某一部分。
Document
1.Document类型可以表示HTML页面或基于XML的文档，不过最常见的还是作为HTMLDocument实例的document对象。
//所有浏览器都支持 document.documentElement和document.body
var html =document.documentElement;
alert(html === document.childNodes[0]);
var body=document.body;2.文档信息
/*
IE8和之前版本为NULL,IE9+和Firefox如果存在文档类型声明，则将起作为味道的第一个子节点，
Safari,Chrome和Opera如果存在文档类型则将其解析，但不作为文档的子节点
*/
var doctype=document.doctype;
console.log(doctype);
/* 获取文档标题 */
var title=document.title;
console.log(title)
/*
URL属性中包含页面完整的URL
domain属性中只包含页面的域名
referrer属性中则保存这链接到当前页面的那个页面的URL
*/
var url =document.URL;
var domain=document.domain;
var referrer=document.referrer;
console.log('url'+url);
console.log('domain'+domain);
console.log('referrer'+referrer);3.document的其他属性
<input type="text" name="box">
<div id="box">
<div class="box1" name="name11">1</div>
<div class="box2" name="name12">2</div>
<div class="box3" name="name12">3</div>
<div class="box4">4</div>
</div>/*
getElementById:
取得div元素的引用,IE7以及更早版本为NULL。
但是IE7以及低版本中，当name特效和id都是box的时候，会返回input元素。
所以写表单的name属性的时候尽量别和其他ID相同*/
var oDiv=document.getElementById("box");
console.log(oDiv);
/*
getElementsByTagName,接受一个参数(元素的标签名),
返回一个HTMLCollection对象
属性和方法：
length属性获取元素的数量
item()方法访问对象中的项
namedItem()通过元素的name特性取得集合中的项
【可以简化为[]，方括号传入数值或字符串形式的所有值之后，会自动调用item和namedItem方法】
*/
var oDiv1=document.getElementsByTagName("div");
console.log(oDiv1.length);//5
console.log(oDiv1.item(1));//<div class="box1" name="name11">1</div>
console.log(oDiv1.namedItem('name11'));//<div class="box1" name="name11">1</div>
console.log(oDiv1[1]);//<div class="box1" name="name11">1</div>
/*
其他少用的
getElementsByName()返回带有给的name特性的所有元素
document.anchors，所有带name特性的<a元素>
document.forms，所有的<form>元素
document.images，所有的<img>元素
*/
/*
文档写入
write(),writeln()写入到输出流中的文本
open()和close()分布用于打开和关闭网页的输出流
*/
document.write("<strong>"+(new Date()).toString()+"</strong>")Element类型
1.了解
Element类型用于表现XML或HTML元素，提供对元素标签名、子节点及特性的访问。
2.元素属性
/*
访问元素的标签名，可以用nodeName也可以用tagName
*/
var oDiv=document.getElementById("box");
console.log(oDiv.tagName);//DIV
console.log(oDiv.tagName ==oDiv.nodeName)//true
//用于判断是否这个元素【使用任何文档】
if(oDiv.tagName.toLowerCase() == "div"){
console.log("对的")
}
/* 获取类-className,title,lang等等*/
console.log(oDiv.className);
console.log(oDiv.title);
console.log(oDiv.lang);
/*
因为元素特性太多，一个个获取太麻烦，虽有又出来三个新方法方便获取
getAttribute(),setAttribute(),removeAttribute()
*/
console.log(oDiv.getAttribute("id"));
console.log(oDiv.getAttribute("class"));
oDiv.setAttribute("title","editTitle")
console.log(oDiv.getAttribute("title"));3.元素的增删
/* 创建元素 */
var pE=document.createElement("p");
var oDiv=document.createElement("div");
/* 创建文本节点*/
var textNode=document.createTextNode("Hello World!");
var otherText=document.createTextNode("petter Here");
/*把元素添加到文档树
appendChild()
insertBefote()
replaceChild()
*/
pE.appendChild(textNode);
pE.appendChild(otherText);
console.log(pE.childNodes.length);//2
//normalize()将文本节点合并成一个节点
pE.normalize();
console.log(pE.childNodes.length);//2
oDiv.appendChild(otherText);
document.body.appendChild(pE);
document.body.appendChild(oDiv);
/* 删除元素 */
document.body.removeChild(oDiv)