dom就是document object model的缩写。文档对象模型是把xml或html以树节点为表现形式的文档。用dom方法和属性，你可以访问，修改，删除页面上任意一个元素，也是可以添加一个元素。dom是独立于语言的api，可以被任意语言所实现，当然也包括了javascript
看看下面的一个文本。
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <title>my page</title> </head> <body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <p id="closer">final</p> </body> </html>
我们来看看第二段
<p><em>second</em> paragraph</p>
可以看到这是个p标签。它被包含在body标签中。所以说body是p的父节点，p是子节点。第一段和第三段也是body的子节点。它们都是第二段的兄弟节点。这个em标签是第二段p的子节点。因此p就是它的父节点。父子节点关系能描绘出像树一样的关系。所以叫做dom结构树(dom tree).
访问dom节点
当要验证表单或者更换图片之前，我们要知道怎么样访问元素(element.)。有很多方法获取元素。
document节点
通过document我们可以访问当前的文档。我们可以通过firebugs（火狐插件），来查看document的属性和方法。
所有的节点都有nodetype,nodename,nodevalue的属性。我们来看看document的nodetype是什么
document.nodetype;//9
一共有12节点类型。document是9。常用的是元素(element:1),属性(attribute:2),文本(text:3)。
节点还有名称。对于html标签。节点名称就是标签名称。文本节点(text)的名字是#text.文档节点(document)的名字是#document.
节点也有值。对于文本节点，值就是文本。document的值为null
documentelement
xml都会有个root节点来包文档包含起来。对于html文档。root节点就是html标签。访问root节点。可以用documentelement的属性。
document.documentelement;//<html> document.documentelement.nodetype;//1 document.documentelement.nodename;//html document.documentelement.tagname;//对于element，nodename和tagname相同
child nodes
为了确定是否包含子节点我们可以用如下方法
document.documentelement.haschildnodes();//true
html有两个子节点。
document.documentelement.childnodes.length;//2 document.documentelement.childnodes[0];//<head> document.documentelement.childnodes[1];//<body>
也可以通过子节点访问父节点
document.documentelement.childnodes[1].parentnode;//<html>
我们把body的引用赋值变量
var bd = document.documentelement.childnodes[1]; bd.childnodes.length;//9
让我们看看body的结构
<body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <p id="closer">final</p> <!-- and that's about it --> </body>
为什么子节点个数为9个呢。
首先是4个p还有一个注释一共4个。
4个节点包含了3个空白的节点。这就7个。
第8个在body和第一个p之间的空白节点。
第9个就是在注释与</body>之间的空白节点。
一共9个节点。
快速访问dom
通过childnodes,parentnode,nodename,nodevalue以及attributes,可以访问文档任意的节点了。但是在实际运用过程中，文本节点是比较讨厌的。如果文本改变了，有可能就影响脚本了。还有如果dom树足够的深入，那么访问起来的确有些不方便。幸好我们可以用更为方便的方法来访问节点。这些方法是
getelementsbytagname() getelementsbyname() getelementbyid()
首先说下getelementsbytagname()
通过一个标签名称(tag name)来获取一个html元素的集合。例子如下
document.getelementsbytagname('p').length;//3
因为返回的是个集合，我们可以用过数组下标的形式来访问或者通过item方法。比较一下还是推荐用数组的访问方法。更简单一些。
document.getelementsbytagname('p')[0];// <p class="opener"> document.getelementsbytagname('p').item(0);//和上面的结果一样 document.getelementsbytagname('p')[0].innerhtml;//first paragraph
访问元素的属性，可以用attributes集合。但是更简单的方法是直接作为一个属性来访问就行。看个例子
document.getelementsbytagname('p')[2].id;//closer
要注意的是，class属性不能正常的使用。。要用classname。因为class在javascript规范中是保留字。
document.getelementsbytagname('p')[0].classname;//opener
我们可以用如下方法访问页面所有元素
<span style="color: #ff0000;">document.getelementsbytagname('*').length;//9</span>
注意：在ie早期的版本不支持上述方法。可以用document.all来取代。ie7已经支持了，但是返回的是所有节点(node)，而不仅仅是元素节点(element nodes)。
siblings, body, first, last child
nextsibling和previoussibling是两个比较方便访问dom的方法。用来访问相邻的节点的。例子如下
var para = document.getelementbyid('closer') para.nextsibling;//"\n" para.previoussibling;//"\n" para.previoussibling.previoussibling;//<p> para.previoussibling.previoussibling.previoussibling;//"\n" para.previoussibling.previoussibling.nextsibling.nextsibling;// <p id="closer">
body 用来访问body元素的。
document.body;//<body>
firstchild 和lastchild 。firstchild是和childnodes[0]一样.lastchild和 childnodes[childnodes.length - 1]一样。
以上就是javascript中的dom是什么？如何访问dom节点的详细内容。