DOM
- DOM的全称叫做文本对象模型（Document Object Model）;是w3c定义的一种访问html和xml文档的标准，它提供了一系列接口，为程序和脚本动态地访问和更新文档的内容，结构和样式。
- DOM将html或者xml文档描绘成了一个由多节点构成的结构。如下便是DOM的节点层次图
DOM节点层次图
Node
- 说到DOM，有一个不得不说的概念叫做node。什么是node？DOM将html中的整个文档（document），每个元素，注释，每个元素的属性（特性）等等都看作是文档中的一个个节点，而这些节点都属于node类型，就是说这些节点有着共同的属性和方法（nodeType，nodeName，nodeValue），但是又有其自己独立的属性和方法。
node总共有如下几个类型（加粗的类型后面会详细讲解）：
1.Node.ELEMENT_NODE(1); 元素节点
2.Node.ATTRIBUTE_NODE(2); 属性节点
3.Node.TEXT_NODE(3); 文本节点
4.Node.CDATA_SECTION_NODE(4); CDATA 区段
5.Node.ENTITY_REFERENCE_NODE(5); 实体引用元素
6.Node.ENTITY_NODE(6); 实体
7.Node.PROCESSING_INSTRUCTION_NODE(7); 表示处理指令
8.Node.COMMENT_NODE(8); 注释节点
9.Node.DOCUMENT_NODE(9); 最外层的Root element,包括所有其它节点
10.Node.DOCUMENT_TYPE_NODE(10); <!DOCTYPE………..>
11.Node.DOCUMENT_FRAGMENT_NODE(11); 文档碎片节点
12.Node.OTATION_NODE(12); DTD 中声明的符号节点
var firstChild1 = someNode.childNodes[0];
var firstChild2 = someNode.childNodes.item(0);
var childCount = someNode.childNodes.length;//指的是访问NodeList时其中包含的节点数量
var hasChild = someNode.hasChildNodes()
var parentNode = someNode.parentNode
var dNode = someNode.ownerDocument
someNode.nodeName
someNode.nodeType //IE中是数字（例如1,2,3...）；其他浏览器是字符串（例如Node.DOCUMENT_FRAGMENT_NODE）
someNode.nodeValue
- nodeList对象
一种类数组对象，可以通过[1,2,3...]来索引得到里面的元素,也可以使用item()索引，同时具备length属性；但是nodeLIst对象和数组不一样的是，这个对象是时刻更新的，而不是某一个时刻获取它的时候得到的快照。
//将nodeList对象转换成数组
var nodes = somenode.childNode; //childNode属性可以返回一个nodeList对象来标识节点的子节点
var array = [];
try{
array = Array.prototype.slice.call(nodes,0)
} catch (ex) { //针对ie
for(var i=0;i<nodes.length;i++){
array.push(nodes[i]);
}
}
- 节点操作
somenode.appendChild(othernode) //向末尾添加某个节点
somenode.insertBefore(newnode,innernode,null) //向指点位置插入某个节点
somenode.replaceChild(newnode,innernode) //替换某个节点
somenode.remove(innernode) //移除某个节点
Document类型
-
概念
js中通过Document类型表示文档。doucment对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。
Dcument节点的特征：
1.nodeType值为9
2.nodeName为"#document"
3.nodeValue为null
4.parentNode为null
5.ownerDocument为null
6.其子节点可能是一个DocumentType（最多一个）、Element（最多一个）、processingInstruction或Comment。 -
子节点
1.documentElement和childNodes内置的访问文档子节点的快捷方式。
2.documentElement始终指向HTML页面中的<html>元素。
3.作为HTMLDocument实例，document对象还有一个body属性，直接指向<body>元素。
4.Document另一个可能的子节点是DocumentType。通常将<!DOCTYPE>标签看成一个与文档其它部分不同的实体，可以通过doctype属性访问。
var html = document.documentElement; //取得对html 引用
alert(html == document.childNodes[0]);//true
alert(html == document.firstChild);//true
var body = document.body; //取得对<body>引用
var doctype = document.doctype; //取得对<!DOCTYPE>引用
-
文档信息
1.title属性：包含着<title>元素中的文本。可以取得当前页面的标题也可以修改。
2.对网页的请求有关的3个属性：URL、domain和referrer。URL属性包含页面完整的URL，domain属性中只包含页面的域名，referrer属性保存着谅解到当前页面的那个页面的URL。在没有来源页面的情况下，referrer属性中可能会包含空字符串。所有这些信息都存在于HTTP头部，只不过通过这些属性让我们能够在JavaScript中访问它们而已。
var originalTitle = document.title;
document.title = "New page title"
var url = document.URL;
var domain = document.domain;
var referrer = document.referrer;
-
查找元素
1.getElemengById()接收一个参数，要取得的元素的ID。找到相应元素放回该元素，否则返回null。如果页面中多个元素的ID值相同，则返回文档中第一次出现的元素。
2.getElementsByTagName()接收一个参数，要取得的元素的标签名，返回0或多个元素的NodeList。在HTML文档中，这个方法会返回一个HTMLCollection对象，最为一个动态集合，该对象与NodeList非常相似。HTMLCollection对象有一个叫做namedItem()的方法。使用这个方法可以通过元素的name特性取得集合中的项。
var div = document.getElementById("divId");
var images = document.getElementsByTagName("img");
alert(images.length);
alert(images[0].src);
alert(images.item(0).src);
var myImage = images.namedItem("myImage");
特殊集合
除了属性和方法，document对象还有一些特殊的集合，这些集合都是HTMLCollection对象，包括：
1.document.anchors,包含所有带name特性的元素；
2.document.forms：包含文档中所有<form>元素
3.document.images：包含文档中所有图像元素
4.document。links：包含文档href特性的元素文档写入
document对象将输出流写入到网页中的能力体现在下列4个方法中：write()、writeln()、open()和close()。
1.open() 打开网页的输出流
2.write() 接收一个字符串参数，要写入到输出流中的文本。write()原样写。
3.writeln() 接收一个字符串参数，要写入到输出流中的文本。与write()不同的是，writeln()会在字符串末尾添加换行符（\n）。
4.cloes()关闭网页的输出流。
Element类型
-
概念
js中通过Document类型表示文档。doucment对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。
Dcument节点的特征：
1.nodeType值为1
2.nodeName的值是元素的标签名
3.nodeValue的值为null；
4.parentNode可能是Doucment或Element；
5.ownerDocument为null
6.子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。 -
HTML元素
所有HTML元素都由HTMLElement类型或者更具体的子类表示。HTMLElement直接继承自Element并添加了一些属性，分别对应于每个HTML元素中都存在的标准特性：
1.id，元素在文档中的唯一标识符
2.title，有关元素的附加说明信息。
3.lang，元素内容的语言代码。
4.dir，语言的方向，值为“ltr”（left-to-right）或“rtl”。
5.className，与元素的class特性对应（class是ECMAScript的保留字）。
可以通过上面的属性获取和修改相应的特性。
var id = element.id;
var title = element.title;
var lang = element.lang;
var dir = element.dir;
var className = element.className;
-
特性
每个元素都有一个或多个特性，这些特性的用途是给出相应元素或其内容的附加信息。
1.getAttribute()可以获得所有特性，包括自定义的特性，但是传入的参数必须和特性的名称相同（不区分大小写）。
2.有两类特殊的属性，他们虽然有对应属性名，但是属性值和getAttribute()返回的不相同。第一类是style属性，getAttribute()返回css文本，而属性则是一个对象。第二类是时间处理程序，getAttribute()返回js代码而属性是一个js函数。(IE7-返回的值与属性相同)
3.任何元素的所有特性也都可以通过DOM元素本身的属性来访问，但是只有公认的特性才会以属性的形式添加到DOM对象中（IE除外）。
4.一般只在获取自定义特性时才用getAttribute().
5.setAttribute()方法接两个参数，第一个是特性名，第二个是特性值。通过这个方法设置的特性名会同一转换为小写。
6.removeAttribute()彻底删除元素的特性（IE6-不支持）。
7.atrributes()属性包含一个NamedNodeMap，与NodeList类似，也是一个“动态”的集合。元素的每一个特性都用一个Attr节点表示，每个节点都保存在NamedNodeMap中。
<div a="xxx"
id="div" class="div"
style="width:40px;height:40px;background:red"
onclick="handler">
</div>
var element = document.getElementById("div")
//getAttribute()不区分大小写
var class2 = element.getAttribute("CLASS") //获取class属性
var class1 = element.getAttribute("class"); //获取class属性
//getAttribute()和属性返回的值不一样
var style1 = element.getAttribute("style"); //文本字符串
var style2 = element.style; //对象
function handler (argument) {
alert("xxx");
return "xxx";
}
var handler1 = element.getAttribute("onclick"); //function handler(){handler};
var handler2 = element.onclick; //handler
//getAttribute()可以获取自定义属性
var a = element.getAttribute("a"); //xxx
var a1 = element.a //undefined
//setAttribute()可以设置属性
element.setAttribute("style", "width:40px;height:40px;background:blue");
//removeAttribute()可以删除属性
element.removeAttribute("a"); //彻底删除了属性a
//attributes()获取属性集合
var a = element.attributes; //获取属性集合
-
创建元素
可以通过document.createElement()来创建一个元素节点。有两种方法：
1.接收你所要创建的元素的标签名
2.接收一个字符串；
var element = document.createElement("div") //创建一个div标签
var element = document.createElement("<div></div>") //创建一个div标签
-
元素的子节点
对元素的子元素节点进行操作的正确方法应该是：
for(var i=0;i<element.childNodes.length;i++){
if(element.childNodes[i].nodeType==1){
}
}
Text类型
-
概念
文本节点由 Text 类型表示，包含的是可以照字面解释的纯文本内容。纯文本中可以包含转义后的 HTML 字符，但不能包含 HTML 代码。Text 节点具有以下特征：
1.nodeType 3
2.nodeName '#text'
3.nodeValue 节点所包含的文本
4.parentNode Element -
操作
1.document.createTextNode() 接收一个参数：要创建的文本节点中的文本。
2.normalize()合并相邻文本节点
3.plitText() 将一个文本节点分成两个文本节点，接收一个参数代表切割开始的地方。
var element = document.createElement('div');
element.className = 'message';
var textNode = document.createTextNode('Hello'); //创建第一个文本节点
var anotherTextNode = document.createTextNode('World'); //创建另一个文本节点
element.appendChild(textNode);
element.appendChild(anotherTextNode);
element.normalize(); //合并文本节点
var newNode = element.firstChild.splitText(5); //以第五个字符为分界切割文本
Attr类型
-
概念
元素的特性在 DOM 中以 Attr 类型来表示。在所有浏览器中都可以访问 Attr 类型的构造函数和原型。从技术角度来讲，特性就是存在于元素的 attributes 属性中的节点。特性节点具有下列特征：
1.nodeType 2
2.nodeName 特性名称
3.nodeValue 特性的值
4.parentNode null -
操作
1.Attr 对象有三个属性，name value specified。其中，name 是特性名称，value 是特性的值，specified 是布尔值，用以区别特性是代码中指定的还是默认的。
2.使用 document.createAttribute() 并传入特性的名称可以创建新的特性节点。
var attr = document.createAttribute('align');
attr.value = 'left';
element.setAttributeNode(attr);
最后最后最后介绍一下：动态脚本
function loadScript(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);
}
