Node的种类一共有12种，通过Node.nodeType的取值来确定(2010-11-25
22:21:44)
22:21:44)
转载由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象：
Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：
Js代码
Node.ELEMENT_NODE
(1)Node.ATTRIBUTE_NODE (2)Node.TEXT_NODE (3) //<![CDATA[
]]>中括着的纯文本，它没有子节点Node.CDATA_SECTION_NODE (4)
//子节点一定为TextNodeNode.ENTITY_REFERENCE_NODE (5) Node.ENTITY_NODE (6)
//DTD中的实体定义<!ENTITY foo “foo”>，无子节点Node.PROCESSING_INSTRUCTION_NODE (7)
//PI，无子节点Node.COMMENT_NODE (8)Node.DOCUMENT_NODE (9) //最外层的Root
element,包括所有其它节点Node.DOCUMENT_TYPE_NODE (10)
//DTD，<!DOCTYPE………..>Node.DOCUMENT_FRAGMENT_NODE (11)Node.NOTATION_NODE
(12) //DTD中的Nation定义 ? Node接口包含的特性/方法
节点的属性
nodeName
属性将返回一个字符串，其内容是给定节点的名字。假如节点是元素节点，返回这个元素的名称；假如是属性节点，返回这个属性的名称；假如是文本节点，返回一个内容为#text
的字符串；
nodeType 属性将返回一个整数，这个数值代表给定节点的类型
nodeValue
属性将返回给定节点确当前值.假如节点是元素节点，返回null；假如是属性节点，返回这个属性的名称；假如是文本节点，返回文本节点的内容；
ownerDocument
指向这个节点所属的文档
attributes 包哈勒代表一个元素的特性的Attr对象；仅用于Element节点
childNodes
所有子节点的列表
firstChild 指向在childNodes列表中的第一个节点
lastChild
指向在childNodes列表中的最后一个节点
nextSibling
指向后一个兄弟节点；假如这个节点就是最后一个兄弟节点，那么该值为null
previousSibling
指向前一个兄弟节点；假如这个节点就是第一个兄弟节点，那么该值为null
parentNode 返回一个给定节点的父节点
?
hasChildNodes() 当childNodes包含一个或多个节点时，返回真
? appendChild(node)
将node添加到childNodes的末尾
? removeChild(node) 将node从childNodes中删除
?
insertBefore(newnode refnode) 在childNodes中的refnode之前插进newnode
Js代码
var
container = document.getElementByIdx_x("content");var message =
document.getElementByIdx_x("fineprint");var para =
document.createElement_x("p");container.insertBefore(para,message); ?
replaceChild(newnode,oldnode)将childNodes中的oldnode替换成newnode
Js代码
var
container = document.getElementByIdx_x("content");var message =
document.getElementByIdx_x("fineprint");var para =
document.createElement_x("p");container.replaceChild(para,message); ?
获得Node：
Js代码
var oHtml = document.documentElement;var oHead =
oHtml.firstChild;var oBody = oHtml.lastChild;var oHead = oHtml.childNodes[0];var
oBody = oHtml.childNodes[1];var oHead = oHtml.childNodes.item(0);var oBody =
oHtml.childNodes.item(1);var oBody = document.body;?
createElement_x(element)
创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。
eg) var
para = document.createElement_x("p");
document.body.appendChild(para);
?
createTextNode()
创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：
reference =
document.createTextNode()
参数为新建文本节点所包含的文本字符串
Js代码
var message
= document.createTextNode("hello world");var container =
document.createElement_x("p");container.appendChild(message);document.body.appendChild(container);
? cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本，参数为 true 或者
false，true 表示同时复制该节点的子节点，false 则不复制任何子节点。
Js代码
var para =
document.createElement_x("p");var message = document.createTextNode("hello
world");para.appendChild(message);document.body.appendChild(para);var newpara =
para.cloneNode(true);document.body.appendChild(newpara);
?
检测节点类型
通过使用nodeType特性检验节点类型：
alert(document.nodeType); //outputs
"9"
alert(document.documentElement.nodeType); //outputs
"1"
这个例子中，document.nodeType返小窝皮肤回9，即是Node.DOCUMENT_NODE；同时document.
documentElement.nodeType返回1，即是Node.ELEMENT_NODE。
也可以用Node常量来匹配这些值：
alert(document.nodeType
== Node.DOCUMENT_NODE); //true
alert(document.documentElement.nodeType ==
Node.ELEMENT_NODE); //true
这段代码可以在Mozilla 1.0+、Opera 7.0+和Safari
1.0+上正常运行。但是IE不支持这些常量，所以这些代码在IE上会产生错误。
?
处理特性
即便Node接口已具有attributes方法，且已被所有类型的节点继续，然而，只有Element节点才能有特性。
Element节点的attributes属性实在是NamedNodeMap，它提供一些用于访问和处理其内容的方法：
getNamedItem(name)
返回nodeName属性值即是name的节点；
removeNamedItem(name)
删除nodeName属性值即是name的节点；
setNamedItem(node)
将node添加到列表中，按其nodeName属性进行索引；
item(pos) 像NodeList一样，返回在位置pos的节点；
请记住这些方法都是返回一个Attr节点，而非特性值。
NamedNodeMap对象也有一个length属性来指示它所包含的节点的数目。
当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，它的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。
例如，假设有这样一个元素：
<p
id="p1" style="color:red">hello
world!</p>
假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值：
var sId =
oP.attributes.getNamedItem("id").nodeValue; //p1
或者
var sId =
oP.attributes.item(0).nodeValue;
还可以通过给nodeValue属性赋新值来改变id特性：
oP.attributes.getNamedItem("id").nodeValue
=
"newId";
Attr节点也有一个完全等同于（同时也完全同步于）nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。
由于这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性：
getAttribute(name)
即是attributes.getNamedItem(name).value；
setAttribute(name, newvalue)
即是attribute.getNamedItem(name).value = newvalue；
removeAttribute(name)
即是attributes.removeNamedItem(name)
要获取前面用的<p/>的id特性，只需这样做：
var
sId = oP.getAttribute("id");
更改ID:
oP.setAttribute("id",
"newId");
?
setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性
?
getAttribute
attributeValue =
element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。
?
getElementById()
element = document.getElementByIdx_x(ID)
寻找一个有着给定 id
属性值的元素，返回一个元素节点
? getElementsByName()
用来获取所有name特性即是指定值的元素：
elements =
document.getElementsByName(tagName)
返回一个节点集合。
?
getElementsByTagName_r()
用于寻找有着给定标签名的所有元素：
elements =
document.getElementsByTagName_r(tagName)
返回一个节点集合。
?
天生与操纵Node
createAttribute(name) ：创建一个名为name的属性节点。
createCDATASection(text)
：创建一个子节点为text的CDATA区。
createComment(text)
：创建一个注释内容为text的注释节点。
createDocumentFragment()
：创建一个文档片断（fragment）节点。
createElement_x(tagName)
：创建一个名为tagName的元素节点。
createEntityReference(name) ：Creates an entity reference
node with the given name。
createProcessingInstruction(target, data)
：Creates a PI node with the given target and data。
createTextNode(text)
：创建一个包含text的文本节点。
其中最重要的方法是createElement_x(),createDocumentFragment(), create
TextNode()。
Js代码
function createMessage(){ var op =
document.createElement_x("p"); var oText = document.createTextNode("hello
world!"); op.appendChild(oText); document.body.appendChild(op);}?
使用createDocumentFragment()
Js代码
//通常做法var arrText = ['first', 'second', 'third'];for(var i=0;
i<arrText.length; i++){ var op =
document.createElement_x('p'); var oText =
document.createTextNode(arrText);
op.appendChild(oText);
document.body.appendChild(op);}//使用documentFragmentvar arrText = ['first',
'second', 'third'];var oFragment = document.createDocumentFragment();for(var
i=0; i<arrText.length; i++){ var op =
document.createElement_x('p'); var oText =
document.createTextNode(arrText );
op.appendChild(oText);
oFragment.appendChild(op);}document.body.appendChild(oFragment); 通过DocumentFragment的方式效率更高。
?
HTML DOM：
使用DOM的核心方法是针对所有XML的，针对HTML DOM有特殊的方法，如
使用DOM
core：oImg.setAttribute("src", "picture.gif");
使用HTML DOM：oImg.src =
"picture.jpg";
Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：
Js代码
- Node.ELEMENT_NODE (1)
- Node.ATTRIBUTE_NODE (2)
- Node.TEXT_NODE (3) //<![CDATA[
]]>中括着的纯文本，它没有子节点 - Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode
- Node.ENTITY_REFERENCE_NODE (5)
- Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo
“foo”>，无子节点 - Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点
- Node.COMMENT_NODE (8)
- Node.DOCUMENT_NODE (9) //最外层的Root
element,包括所有其它节点 - Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..>
- Node.DOCUMENT_FRAGMENT_NODE (11)
- Node.NOTATION_NODE (12) //DTD中的Nation定义
Node.ELEMENT_NODE
(1)Node.ATTRIBUTE_NODE (2)Node.TEXT_NODE (3) //<![CDATA[
]]>中括着的纯文本，它没有子节点Node.CDATA_SECTION_NODE (4)
//子节点一定为TextNodeNode.ENTITY_REFERENCE_NODE (5) Node.ENTITY_NODE (6)
//DTD中的实体定义<!ENTITY foo “foo”>，无子节点Node.PROCESSING_INSTRUCTION_NODE (7)
//PI，无子节点Node.COMMENT_NODE (8)Node.DOCUMENT_NODE (9) //最外层的Root
element,包括所有其它节点Node.DOCUMENT_TYPE_NODE (10)
//DTD，<!DOCTYPE………..>Node.DOCUMENT_FRAGMENT_NODE (11)Node.NOTATION_NODE
(12) //DTD中的Nation定义 ? Node接口包含的特性/方法
节点的属性
nodeName
属性将返回一个字符串，其内容是给定节点的名字。假如节点是元素节点，返回这个元素的名称；假如是属性节点，返回这个属性的名称；假如是文本节点，返回一个内容为#text
的字符串；
nodeType 属性将返回一个整数，这个数值代表给定节点的类型
nodeValue
属性将返回给定节点确当前值.假如节点是元素节点，返回null；假如是属性节点，返回这个属性的名称；假如是文本节点，返回文本节点的内容；
ownerDocument
指向这个节点所属的文档
attributes 包哈勒代表一个元素的特性的Attr对象；仅用于Element节点
childNodes
所有子节点的列表
firstChild 指向在childNodes列表中的第一个节点
lastChild
指向在childNodes列表中的最后一个节点
nextSibling
指向后一个兄弟节点；假如这个节点就是最后一个兄弟节点，那么该值为null
previousSibling
指向前一个兄弟节点；假如这个节点就是第一个兄弟节点，那么该值为null
parentNode 返回一个给定节点的父节点
?
hasChildNodes() 当childNodes包含一个或多个节点时，返回真
? appendChild(node)
将node添加到childNodes的末尾
? removeChild(node) 将node从childNodes中删除
?
insertBefore(newnode refnode) 在childNodes中的refnode之前插进newnode
Js代码
- var container =
document.getElementByIdx_x("content");
var message =
document.getElementByIdx_x("fineprint");
var para =
document.createElement_x("p");- container.insertBefore(para,message);
var
container = document.getElementByIdx_x("content");var message =
document.getElementByIdx_x("fineprint");var para =
document.createElement_x("p");container.insertBefore(para,message);
replaceChild(newnode,oldnode)将childNodes中的oldnode替换成newnode
Js代码
- var container =
document.getElementByIdx_x("content");
var message =
document.getElementByIdx_x("fineprint");
var para =
document.createElement_x("p");- container.replaceChild(para,message);
var
container = document.getElementByIdx_x("content");var message =
document.getElementByIdx_x("fineprint");var para =
document.createElement_x("p");container.replaceChild(para,message); ?
获得Node：
Js代码
var oHtml =
document.documentElement;
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
var oHead =
oHtml.childNodes.item(0);
var oBody =
oHtml.childNodes.item(1);
var oBody = document.body;
var oHtml = document.documentElement;var oHead =
oHtml.firstChild;var oBody = oHtml.lastChild;var oHead = oHtml.childNodes[0];var
oBody = oHtml.childNodes[1];var oHead = oHtml.childNodes.item(0);var oBody =
oHtml.childNodes.item(1);var oBody = document.body;?
createElement_x(element)
创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。
eg) var
para = document.createElement_x("p");
document.body.appendChild(para);
?
createTextNode()
创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：
reference =
document.createTextNode()
参数为新建文本节点所包含的文本字符串
Js代码
- var message =
document.createTextNode("hello world");
var container =
document.createElement_x("p");- container.appendChild(message);
- document.body.appendChild(container);
var message
= document.createTextNode("hello world");var container =
document.createElement_x("p");container.appendChild(message);document.body.appendChild(container);
? cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本，参数为 true 或者
false，true 表示同时复制该节点的子节点，false 则不复制任何子节点。
Js代码
- var para = document.createElement_x("p");
var message =
document.createTextNode("hello world");- para.appendChild(message);
- document.body.appendChild(para);
var newpara = para.cloneNode(true);- document.body.appendChild(newpara);
var para =
document.createElement_x("p");var message = document.createTextNode("hello
world");para.appendChild(message);document.body.appendChild(para);var newpara =
para.cloneNode(true);document.body.appendChild(newpara);
?
检测节点类型
通过使用nodeType特性检验节点类型：
alert(document.nodeType); //outputs
"9"
alert(document.documentElement.nodeType); //outputs
"1"
这个例子中，document.nodeType返小窝皮肤回9，即是Node.DOCUMENT_NODE；同时document.
documentElement.nodeType返回1，即是Node.ELEMENT_NODE。
也可以用Node常量来匹配这些值：
alert(document.nodeType
== Node.DOCUMENT_NODE); //true
alert(document.documentElement.nodeType ==
Node.ELEMENT_NODE); //true
这段代码可以在Mozilla 1.0+、Opera 7.0+和Safari
1.0+上正常运行。但是IE不支持这些常量，所以这些代码在IE上会产生错误。
?
处理特性
即便Node接口已具有attributes方法，且已被所有类型的节点继续，然而，只有Element节点才能有特性。
Element节点的attributes属性实在是NamedNodeMap，它提供一些用于访问和处理其内容的方法：
getNamedItem(name)
返回nodeName属性值即是name的节点；
removeNamedItem(name)
删除nodeName属性值即是name的节点；
setNamedItem(node)
将node添加到列表中，按其nodeName属性进行索引；
item(pos)
请记住这些方法都是返回一个Attr节点，而非特性值。
NamedNodeMap对象也有一个length属性来指示它所包含的节点的数目。
当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，它的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。
例如，假设有这样一个元素：
<p
id="p1" style="color:red">hello
world!</p>
假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值：
var sId =
oP.attributes.getNamedItem("id").nodeValue; //p1
或者
var sId =
oP.attributes.item(0).nodeValue;
还可以通过给nodeValue属性赋新值来改变id特性：
oP.attributes.getNamedItem("id").nodeValue
=
"newId";
Attr节点也有一个完全等同于（同时也完全同步于）nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。
由于这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性：
getAttribute(name)
即是attributes.getNamedItem(name).value；
setAttribute(name, newvalue)
即是attribute.getNamedItem(name).value = newvalue；
removeAttribute(name)
即是attributes.removeNamedItem(name)
要获取前面用的<p/>的id特性，只需这样做：
var
sId = oP.getAttribute("id");
更改ID:
oP.setAttribute("id",
"newId");
?
setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性
?
getAttribute
attributeValue =
element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。
?
getElementById()
element = document.getElementByIdx_x(ID)
寻找一个有着给定 id
属性值的元素，返回一个元素节点
? getElementsByName()
用来获取所有name特性即是指定值的元素：
elements =
document.getElementsByName(tagName)
返回一个节点集合。
?
getElementsByTagName_r()
用于寻找有着给定标签名的所有元素：
elements =
document.getElementsByTagName_r(tagName)
返回一个节点集合。
?
天生与操纵Node
createAttribute(name) ：创建一个名为name的属性节点。
createCDATASection(text)
：创建一个子节点为text的CDATA区。
createComment(text)
：创建一个注释内容为text的注释节点。
createDocumentFragment()
：创建一个文档片断（fragment）节点。
createElement_x(tagName)
：创建一个名为tagName的元素节点。
createEntityReference(name) ：Creates an entity reference
node with the given name。
createProcessingInstruct
：Creates a PI node with the given target and data。
createTextNode(text)
：创建一个包含text的文本节点。
其中最重要的方法是createElement_x(),createDocumentFragment(), create
TextNode()。
Js代码
function createMessage(){
var op =
document.createElement_x("p");
var oText =
document.createTextNode("hello world!");- op.appendChild(oText);
- document.body.appendChild(op);
- }
function createMessage(){ var op =
document.createElement_x("p"); var oText = document.createTextNode("hello
world!"); op.appendChild(oText); document.body.appendChild(op);}?
使用createDocumentFragment()
Js代码
- //通常做法
var arrText = ['first', 'second', 'third'];
for(var i=0; i<arrText.length; i++){
var op =
document.createElement_x('p');
var oText =
document.createTextNode(arrText);-
op.appendChild(oText); -
document.body.appendChild(op); - }
//使用documentFragment
var arrText = ['first', 'second', 'third'];
var oFragment =
document.createDocumentFragment();
for(var i=0; i<arrText.length; i++){
var op =
document.createElement_x('p');
var oText =
document.createTextNode(arrText);-
op.appendChild(oText); -
oFragment.appendChild(op); - }
- document.body.appendChild(oFragment);
//通常做法var arrText = ['first', 'second', 'third'];for(var i=0;
i<arrText.length; i++){
document.createElement_x('p');
document.createTextNode(arrText);
op.appendChild(oText);
document.body.appendChild(op);}//使用documentFragmentvar arrText = ['first',
'second', 'third'];var oFragment = document.createDocumentFragment();for(var
i=0; i<arrText.length; i++){
document.createElement_x('p');
document.createTextNode(arrText
op.appendChild(oText);
oFragment.appendChild(op);}document.body.appendChild(oFragment);
?
HTML DOM：
使用DOM的核心方法是针对所有XML的，针对HTML DOM有特殊的方法，如
使用DOM
core：oImg.setAttribute("src", "picture.gif");
使用HTML DOM：oImg.src =
"picture.jpg";
浙公网安备 33010602011771号