DOM节点

根据 DOM，XML 文档中的每个成分都是一个节点。DOM 规定：整个文档是一个文档节点，每个 XML 元素是一个元素节点，包含在 XML 元素中的文本是文本节点，每一个 XML 属性是一个属性节点，注释是注释节点。

为什么把HTML里的元素都分成了节点，这些节点又有什么用呢？其实就是以树的形式，给每个节点定位。这样，你就能根据一个目标节点，找到父节点，子节点等等。例如：一个网页上有一个div ， div内部有个 p，你想要修改p的字体大小和div的背景色。要先找到p节点，修改css再通过p节点，找父节点找到 div后修改div的css。

DOM中有三大节点，分别是元素节点，文本节点，属性节点。

元素节点：构成了DOM的基础。文档结构中，<html>是根元素，代表整个文档，其他的还有<head>,<body>,<p>,<span>等等。元素节点之间可以相互包含(当然遵循一定的规则)。

文本节点：包含在元素节点中。

属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的。

DOM中最关键是要掌握节点与节点之间的关系(between node andnode),

根节点：

DOM把层次中的每一个对象都称之为节点（NODE），以HTML超文本标记语言为例：整个文档的一个根就是<html>,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点（ROOT）。

子节点：

一般意义上的节点，根节点以下最大子节点就是主文档区<body>了，要访问到body标签，在脚本中应该写：document.body body区以内所有的文本及HTML标签都是文档的节点，分别称为文本节点、元素节点（或者叫标签节点），

节点之间的关系：

节点之间的关系也是DOM中最重要的一个关节，如何正确地引用到节点对象，一定要清楚节点树各个节点的相互描述方式，在DHTML里，Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。

节点的属性：

1 .nodeName节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName 是只读的。
示例

window.onload = function()
{

var element = document.getElementById("span");

var text = element.firstChild;

var property = document.getElementById("span").getAttributeNode("id");

alert("这是元素节点的返回值："+ element.nodeName);//返回的标签名SPAN,注意是大写的

alert("这是文本节点的返回值："+ text.nodeName);//返回的#text

alert("这是属性节点的返回值："+ property.nodeName);//返回的是属性名，这里是id

}

2.nodeValue返回一个字符串，指示这个节点的值。元素节点返回null，属性节点返回属性值，文本节点返回文本。nodeValue可读可写，这是对元素节点不能写。一般只用于设置文本节点的值
示例

window.onload = function()

{

var element = document.getElementById("myspan");

var text = element.firstChild;

var property = document.getElementById("myspan").getAttributeNode("id");

alert("这是元素节点的返回值："+ element.nodeValue);//本身就没有意义，这里是试验下的，返回的是null

alert("这是文本节点的返回值："+ text.nodeValue);//返回的是文本值  文本节点

alert("这是属性节点的返回值："+ property.nodeValue);//返回的是属性值，这里是id的属性值  myspan

 }

3.childNodes返回子节点数组。文本和属性节点的childNodes永远是null可以用hasChildNodes()来判断是否有子节点。只读属性，要删除添加节点可不能用操作childNodes数组的办法
示例

varchildNode=Ext.get('myBookList').child('li');

//显示：OneHundredYearsofSolitude

console.debug(childNode.dom.innerHTML);

/*

*@param{String}selector//CSS选择器，必要的

*@param{Boolean}returnDom//是否返回DOM节点而非Element实例，非必要的，默认为false

*/

4.firstChild返回第一个子节点。文本和属性节点没有子节点，会返回一个空数组，这是针对这二位的特殊待遇。对于元素节点，若是没有子节点会返回null.有一个等价式：firstChild=childNodes[0].
示例

varmyNo1FavBS=Ext.get('bookSiteList').first('ul');
 
//显示：Amazon

console.debug(myNo1FavBS.first('li').dom.innerHTML);

/*

*@param{String}selector//CSS选择器，必要的

*@param{Boolean}returnDom//是否返回DOM节点而非Element实例，非必要的，默认为false

 */

5.lastChild返回最后一个子节点。返回值同firstChild,三方待遇参考上面。有一个等价式:lastChide=childNodes[childNodes.length-1].
示例

varmyNo3FavBS=Ext.get('bookSiteList').child('ul');

//显示：PageOne

console.debug(myNo3FavBS.last().dom.innerHTML);

 /*

*@param{String}selector//CSS选择器，必要的

*@param{Boolean}returnDom//是否返回DOM节点而非Element实例，非必要的，默认为false

*/

6.parentNode() 返回节点的父节点。document.parentNode()返回null，其他的情况下都将返回一个元素节点，因为只有元素节点拥有子节点，除了document以外任何节点都拥有父节点。parentNode()只读。
示例

varbookstores=Ext.get("no1").parent('div[id=bookSiteList]');

//显示：

//Herearemyfavoritebookstores:

//<ulid="ext-gen4">

//<liid="no1">Amazon</li>

//<liid="no2">Books</li>

//<liid="no3">PageOne</li>

//</ul>

console.debug(bookstores.dom.innerHTML);

节点操作：

1. 创建节点 createElement('tagName'); 如：

var oP=document.createElement('p');创建了一个<p></p>标签。

2. 创建文本节点 createTextNode('text'); 如：

var oText=document.createTextNode('This is a paragh!');

友情链接

汕头招聘网 | 山东招聘网 | 郑州教育培训 | 软件下载