JavaScript中对DOM节点的访问、创建、修改、删除_基础知识
- WBOY原创
- 2016-05-16 15:32:111565浏览
DOM
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).
Core DOM 和 HTML DOM
我们已经知道DOM可以描绘出HTML和XML文档。事实上HTML文档就是XML文档，只不过更为规范些。因此作为DOM Level 1的一部分，Core DOM规范适用于所有XML文档以及HTML DOM规范扩展了Core DOM.当然HTML DOM不能适用于所有的XML文档，仅仅适用于HTML文档。让我们来看看Core DOM和HTML DOM的构造器。
构造器关系
访问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个就是在注释与