DOM基础

DOM（Document Object Model）即文档对象模型，针对HTML 和XML 文档的API（应用程序接口）。DOM 描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM 脱胎于Netscape 及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

一．DOM介绍
DOM 中的三个字母，D（文档）可以理解为整个Web 加载的网页文档；O（对象）可以理解为类似window 对象之类的东西，可以调用属性和方法，这里我们说的是document
对象；M（模型）可以理解为网页文档的树型结构。DOM 有三个等级，分别是DOM1、DOM2、DOM3，并且DOM1 在1998 年10 月成为W3C 标准。DOM1 所支持的浏览器包括IE6+、Firefox、Safari、Chrome 和Opera1.7+。PS：IE 中的所有DOM 对象都是以COM 对象的形式实现的，这意味着IE 中的DOM可能会和其他浏览器有一定的差异。

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

二．查找元素
W3C 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

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

document.getElementById('box'); //获取id 为box 的元素节点

window.onload = function () { //预加载html 后执行
document.getElementById('box');
};

document.getElementById('box').id; //获取id
document.getElementById('box').id = 'person'; //设置id
document.getElementById('box').title; //获取title
document.getElementById('box').title = '标题' //设置title
document.getElementById('box').style; //获取CSSStyleDeclaration 对象
document.getElementById('box').style.color; //获取style 对象中color 的值
document.getElementById('box').style.color = 'red'; //设置style 对象中color 的值
document.getElementById('box').className; //获取class
document.getElementById('box').className = 'box'; //设置class
alert(document.getElementById('box').bbb); //获取自定义属性的值，非IE 不支持

2.getElementsByTagName()方法

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

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

3.getElementsByName()方法

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

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

4.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 不支持

5.setAttribute()方法

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

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

6.removeAttribute()方法

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

三．DOM节点
1.node 节点属性
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType 和nodeValue。
信息节点属性

节点类型  nodeName   nodeType   nodeValue
元素元素   名称                1               null
属性       属性名称            2             属性值
文本        #text              3        文本内容(不包含html)

document.getElementById('box').nodeType; //1，元素节点

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

层次节点属性

childNodes            获取当前元素节点的所有子节点
firstChild              获取当前元素节点的第一个子节点
lastChild               获取当前元素节点的最后一个子节点
ownerDocument    获取该节点的文档根节点，相当与document
parentNode           获取当前节点的父节点
previousSibling      获取当前节点的前一个同级节点
nextSibling           获取当前节点的后一个同级节点
attributes             获取当前元素节点的所有属性节点集合

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

节点操作方法

write()                 这个方法可以把任意字符串插入到文档中
createElement()   创建一个元素节点
appendChild()      将新节点追加到子节点列表的末尾
createTextNode() 创建一个文件节点
insertBefore()      将新节点插入在前面
repalceChild()     将新节点替换旧节点
cloneNode()        复制节点
removeChild()     移除节点