文档对象模型DOM

DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。

D（文档）可以理解为整个Web加载的网页文档；
O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；
M（模型）可以理解为网页文档的树型结构。

节点树

加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。
DOM将这种树型结构理解为由节点组成

从上图的树型结构，可见html标签没有父辈，没有兄弟，所以html标签为根标签。head标签是html子标签，meta和title标签之间是兄弟关系。如果把每个标签当作一个节点的话，那么这些节点组合成了一棵节点树。

节点种类

1. ——元素节点
2. ——文本节点
3. ——属性节点
   .

元素节点方法

方法	说明
getElementById()	获取特定ID元素的节点
getElementsByTagName()	获取相同元素的节点列表
getElementsByName()	获取相同名称的节点列表
getAttribute()	获取特定元素节点属性的值
setAttribute()	设置特定元素节点属性的值
removeAttribute()	移除特定元素节点属性

getElementById()方法

接受一个参数：获取元素的ID
如果找到相应的元素则返回该元素的HTMLDivElement对象，如果不存在，则返回null。

document.getElementById('box');//获取id为box的元素节点
document.getElementById('box').tagName;	//DIV
document.getElementById('box').innerHTML;	//测试Div

当我们通过getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。

属性	说明
tagName	获取元素节点的标签名
innerHTML	获取元素节点里的内容

getElementsByTagName()方法

将返回一个对象数组HTMLCollection(NodeList)
数组保存着所有相同元素名的节点列表

document.getElementsByTagName('*');	//获取所有元素
document.getElementsByTagName('li');//获取所有li元素，返回数组
document.getElementsByTagName(‘li’)[0];	//获取第一个li元素
document.getElementsByTagName(‘li’).item(0)//获取第一个li元素
document.getElementsByTagName('li').length;//获取所有li元素的数目

getElementsByName()方法

getElementsByName()方法
获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)

document.getElementsByName('add')	//获取input元素
document.getElementsByName('add')[0].value	//获取input元素的value值
document.getElementsByName('add')[0].checked//获取input元素的checked值

getAttribute()方法

getAttribute()方法
获取元素中某个属性的值
它和直接使用.属性获取属性值的方法有一定区别

document.getElementById('box').getAttribute('id');//获取元素的id值
document.getElementById('box').id;		//获取元素的id值
 
document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值
document.getElementById('box').mydiv       //获取元素的自定义属性值，非IE不支持
 
document.getElementById('box').getAttribute('class');//获取元素的class值，IE不支持
document.getElementById('box').getAttribute('className');//非IE不支持

setAttribute()方法

setAttribute()方法
设置元素中某个属性和值
需要接受两个参数：属性名和值，如果属性本身已存在，那么就会被覆盖。

document.getElementById('box').setAttribute('align','center');//设置属性和值
document.getElementById('box').setAttribute('bbb','ccc');//设置自定义的属性和值

removeAttribute()方法

removeAttribute()方法
移除HTML属性

document.getElementById('box').removeAttribute('style');//移除属性

PS：IE6及更低版本不支持removeAttribute()方法。

DOM节点

node节点属性

————节点分为元素节点、属性节点和文本节点
————节点属性分为nodeName、nodeType和nodeValue

节点的层次结构

分为：
——父节点与子节点、兄弟节点这两种
——当我们获取其中一个元素节点的时候，就可以使用层次节点属性来
　　获取它相关层次的节点

层次节点属性

childeNodes属性

获取某一个元素节点的所有子节点，这些子节点包含元素子节点和文本子节点

var box = document.getElementById('box');//获取一个元素节点
alert(box.childNodes.length);//获取这个元素节点的所有子节点
alert(box.childNodes[0]);		//获取第一个子节点对象

PS：使用childNodes[n]返回子节点对象的时候，有可能返回的是元素子节点，比如 HTMLElement；也有可能返回的是文本子节点，比如Text。元素子节点可以使用nodeName或者tagName获取标签名称，而文本子节点可以使用nodeValue获取。

firstChild属性

获取当前元素节点的第一个子节点，相当于childNodes[0]

alert(box.firstChild.nodeValue);//获取第一个子节点的文本内容

lastChild属性

获取当前元素节点的最后一个子节点，相当于childNodes[box.childNodes.length - 1]

alert(box.lastChild.nodeValue);//获取最后一个子节点的文本内容

ownerDocument属性

返回该节点的文档对象根节点，返回的对象相当于document

alert(box.ownerDocument === document);	//true，根节点

parentNode属性（

比较重要

）
返回该节点的父节点

alert(box.parentNode.nodeName);//获取父节点的标签名

previousSibling属性

返回该节点的前一个同级节点

alert(box.lastChild.previousSibling);//获取前一个同级节点

nextSibling属性

返回该节点的后一个同级节点

alert(box.firstChild.nextSibling);	 //获取后一个同级节点

attributes属性

返回该节点的属性节点集合。

document.getElementById('box').attributes	//NamedNodeMap
document.getElementById('box').attributes.length;//返回属性节点个数
document.getElementById('box').attributes[0];	//Attr，返回最后一个属性节点
document.getElementById('box').attributes[0].nodeType; //2，节点类型
document.getElementById('box').attributes[0].nodeValue; //属性值
document.getElementById('box').attributes['id'];//Attr，返回属性为id的节点
document.getElementById('box').attributes.getNamedItem('id');//Attr

节点操作

DOM不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点

节点操作方法

write()方法

可以把任意字符串插入到文档中去

document.write('<p>这是一个段落！</p>')';//输出任意字符串

createElement()方法

创建一个元素节点

document.createElement('p');	//创建一个元素节点

appendChild()方法

将一个新节点添加到某个节点的子节点列表的末尾上

var box = document.getElementById('box');//获取某一个元素节点
var p = document.createElement('p');//创建一个新元素节点<p>
box.appendChild(p);//把新元素节点<p>添加子节点末尾

createTextNode()方法

创建一个文本节点

var text = document.createTextNode('段落');//创建一个文本节点
p.appendChild(text);	//将文本节点添加到子节点末尾

insertBefore()方法

把节点创建到指定节点的前面

box.parentNode.insertBefore(p, box);//把<div>之前创建一个节点

replaceChild()方法

把节点替换成指定的节点

box.parentNode.replaceChild(p,box);//把<div>换成了<p>

cloneNode()方法

把子节点复制出来

var box = document.getElementById('box');		
var clone = box.firstChild.cloneNode(true);//获取第一个子节点，true表示复制内容
box.appendChild(clone);	//添加到子节点列表末尾

removeChild()方法

把子节点删除

box.parentNode.removeChild(box);//删除指定节点

手累，西八