nodeName、nodeValue 以及 nodeType 包含有关于节点的信息
2014-05-27 10:47
555 查看
(一)nodeName属性含有某个节点的名称。
元素节点的 nodeName是标签名称
属性节点的 nodeName是属性名称
文本节点的 nodeName永远是
#text
文档节点的 nodeName永远是
#document
注释:nodeName所包含的
XML元素的标签名称永远是大写的
(二)nodeValue
对于文本节点,nodeValue属性包含文本。
对于属性节点,nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。
(三)nodeType
nodeType属性可返回节点的类型。
最重要的节点类型是:
元素类型节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
在JavaScript中,存在有nodeName、nodeType、
nodeValue这三个属性,今天我们来了解下JavaScript中的nodeName、nodeType、nodeValue区别
nodeName
nodeName属性含有某个节点的名称。
*元素节点的
nodeName是标签名称
*属性节点的
nodeName是属性名称
*文本节点的
nodeName永远是 #text
*文档节点的
nodeName永远是 #document
注释:nodeName所包含的
XML元素的标签名称永远是大写的.
nodeValue
对于文本节点,nodeValue属性包含文本。
对于属性节点,nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。
nodeType
nodeType属性可返回节点的类型。
最重要的节点类型是:
元素类型节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
HTML文件:
JS代码:
1. nodeName属性: 节点的名字。
如果节点是元素节点,那么返回这个元素的名字。此时,相当于tagName属性。
比如:
<p>aaaa</p> : 则返回 p ;
如果是属性节点,nodeName将返回这个属性的名字。
如果是文本节点,nodeName将返回一个#text的字符串。
另外我要说的是: nodeName属性是一个只读属性,不能进行设置.(写)
它返回 大写字母的值。
2. nodeType属性 : 返回一个整数,代表这个节点的类型。
我们常用的3中类型:
nodeType == 1 : 元素节点
nodeType == 2 : 属性节点
nodeType == 3 : 文本节点
如果想记住的话,我们可以这么去记:
比如:
<p title="cssrain" >test</p> 从前往后读: 你会发现先是元素节点(1),然后是属性节点(2),最后是文本节点(3),这样你就很容易记住了 nodeType分别代表什么类型了。(我总结的一点小技巧, ^_^。)
nodeType属性经常跟 if 配合使用,以确保不会在错误的节点类型上 执行错误的操作。
比如:
function cs_demo(mynode){
if(mynode.nodeType == 1){
mynode.setAttribute("title","demo");
}
}
代码解释: 先检查mynode的nodeType属性,以确保它所代表的节点确实是一个元素节点。
和nodeName属性一样,他也是只读属性,不能进行设置.(写)。
3. nodeValue属性 : 返回一个字符串,这个节点的值。
如果节点是元素节点,那么返回null;(注意下)
如果是属性节点,nodeValue将返回这个属性的值。
如果是文本节点,nodeValue将返回这个文本节点的内容。
比如:
<div id="c">aaaaaaaaaaaaaaaa</div>
Js代码
<SCRIPT LANGUAGE="JavaScript">
var c= document.getElementById("c");
alert( c.nodeValue );//返回null
nodeValue是一个可以读、写的属性。 但它不能设置元素节点的值。
再看看下面的例子:
<div id="c">aaaaaaaaaaaaaaaa</div>
Js代码
var c= document.getElementById("c");
c.nodeValue =" dddddddddddd"; //不能设置
//alert( c.firstChild.nodeValue ) //元素节点 包括属性节点和文本节点。
c.firstChild.nodeValue = "test"//能设置
当然我们为了确保能正确运行:可以加一段代码:
<div id="c">aaaaaaaaaaaaaaaa</div>
Js代码
var c= document.getElementById("c");
c.nodeValue =" dddddddddddd"; //不能设置
//alert( c.firstChild.nodeValue )
if( c.firstChild.nodeType==3 ){ //判断是不是 文本节点
c.firstChild.nodeValue = "test"//能设置
}
//可以看出,如果要设置元素节点,不能直接设置,而必须先使用firstChild或者lastChild等 然后设置nodeValue.
nodeValue一般只用来设置 文本节点的值。如果要刷新属性节点的值,一般使用setAttribute().
元素节点的 nodeName是标签名称
属性节点的 nodeName是属性名称
文本节点的 nodeName永远是
#text
文档节点的 nodeName永远是
#document
注释:nodeName所包含的
XML元素的标签名称永远是大写的
(二)nodeValue
对于文本节点,nodeValue属性包含文本。
对于属性节点,nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。
(三)nodeType
nodeType属性可返回节点的类型。
最重要的节点类型是:
元素类型节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
在JavaScript中,存在有nodeName、nodeType、
nodeValue这三个属性,今天我们来了解下JavaScript中的nodeName、nodeType、nodeValue区别
nodeName
nodeName属性含有某个节点的名称。
*元素节点的
nodeName是标签名称
*属性节点的
nodeName是属性名称
*文本节点的
nodeName永远是 #text
*文档节点的
nodeName永远是 #document
注释:nodeName所包含的
XML元素的标签名称永远是大写的.
nodeValue
对于文本节点,nodeValue属性包含文本。
对于属性节点,nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。
nodeType
nodeType属性可返回节点的类型。
最重要的节点类型是:
元素类型节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
HTML文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM标准</title> <script type="text/javascript" src="test.js"></js> </head> <body> <h1 id="h1">An HTML Document</h1> <p id="p1">This is a <i>W3C HTML DOM</i> document.</p> <p><input id="btnDemo1" type="button" value="取H1 Element节点值" /></p> <p><input id="btnDemo2" type="button" value="取H1 Element节点文本" /></p> <p><input id="btnDemo3" type="button" value="取Document Element节点文本" /></p> <p><input type="button" alt="这是个演示按钮" title="演示按钮提示标题" name="btnShowAttr" id="btnShowAttr" value="按钮节点演示" /></p> </body> </html>
JS代码:
function showElement(){ var element=document.getElementById("h1");//h1是一个<h1>标签 alert('nodetype:'+element.nodeType);//nodeType=1 alert('nodeName:'+element.nodeName); alert('nodeValue:'+element.nodeValue); //null alert('element:'+element); } function showText(){ var element=document.getElementById("h1"); var text=element.childNodes[0]; alert('nodeType:'+text.nodeType); //nodeType=3 alert('nodeValue:'+text.nodeValue); //文本节点的nodeValue是其文本内容 text.nodeValue=text.nodeValue+"abc"; //文本内容添加修改删除等等。 alert('nodeName:'+text.nodeName); alert(text.data); //data同样是其内容,这个属性下同样可以增删改。 } function showDocument(){ alert('nodeType:'+document.nodeType); //9 alert('nodeName:'+document.nodeName); alert(document); } function showAttr(){ var btnShowAttr=document.getElementById("btnShowAttr"); //演示按钮,有很多属性 var attrs=btnShowAttr.attributes; for(var i=0;i<attrs.length ;i++){ var attr=attrs[i]; alert('nodeType:'+attr.nodeType); //attribute 的nodeType=2 alert('attr:'+attr); alert('attr.name:'+attr.name+'='+attr.value); } } function demo(){ var btnDemo1=document.getElementById("btnDemo1"); btnDemo1.onclick=showElement; //按钮1取节点nodetype值 var btnDemo2=document.getElementById("btnDemo2"); btnDemo2.onclick=showText; var btnDemo3=document.getElementById("btnDemo3"); btnDemo3.onclick=showDocument; var btnShowAttr=document.getElementById("btnShowAttr"); btnShowAttr.onclick=showAttr; } window.onload=demo;
1. nodeName属性: 节点的名字。
如果节点是元素节点,那么返回这个元素的名字。此时,相当于tagName属性。
比如:
<p>aaaa</p> : 则返回 p ;
如果是属性节点,nodeName将返回这个属性的名字。
如果是文本节点,nodeName将返回一个#text的字符串。
另外我要说的是: nodeName属性是一个只读属性,不能进行设置.(写)
它返回 大写字母的值。
2. nodeType属性 : 返回一个整数,代表这个节点的类型。
我们常用的3中类型:
nodeType == 1 : 元素节点
nodeType == 2 : 属性节点
nodeType == 3 : 文本节点
如果想记住的话,我们可以这么去记:
比如:
<p title="cssrain" >test</p> 从前往后读: 你会发现先是元素节点(1),然后是属性节点(2),最后是文本节点(3),这样你就很容易记住了 nodeType分别代表什么类型了。(我总结的一点小技巧, ^_^。)
nodeType属性经常跟 if 配合使用,以确保不会在错误的节点类型上 执行错误的操作。
比如:
function cs_demo(mynode){
if(mynode.nodeType == 1){
mynode.setAttribute("title","demo");
}
}
代码解释: 先检查mynode的nodeType属性,以确保它所代表的节点确实是一个元素节点。
和nodeName属性一样,他也是只读属性,不能进行设置.(写)。
3. nodeValue属性 : 返回一个字符串,这个节点的值。
如果节点是元素节点,那么返回null;(注意下)
如果是属性节点,nodeValue将返回这个属性的值。
如果是文本节点,nodeValue将返回这个文本节点的内容。
比如:
<div id="c">aaaaaaaaaaaaaaaa</div>
Js代码
<SCRIPT LANGUAGE="JavaScript">
var c= document.getElementById("c");
alert( c.nodeValue );//返回null
nodeValue是一个可以读、写的属性。 但它不能设置元素节点的值。
再看看下面的例子:
<div id="c">aaaaaaaaaaaaaaaa</div>
Js代码
var c= document.getElementById("c");
c.nodeValue =" dddddddddddd"; //不能设置
//alert( c.firstChild.nodeValue ) //元素节点 包括属性节点和文本节点。
c.firstChild.nodeValue = "test"//能设置
当然我们为了确保能正确运行:可以加一段代码:
<div id="c">aaaaaaaaaaaaaaaa</div>
Js代码
var c= document.getElementById("c");
c.nodeValue =" dddddddddddd"; //不能设置
//alert( c.firstChild.nodeValue )
if( c.firstChild.nodeType==3 ){ //判断是不是 文本节点
c.firstChild.nodeValue = "test"//能设置
}
//可以看出,如果要设置元素节点,不能直接设置,而必须先使用firstChild或者lastChild等 然后设置nodeValue.
nodeValue一般只用来设置 文本节点的值。如果要刷新属性节点的值,一般使用setAttribute().
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM标准</title> </head> <body> <h1 id="h1">An HTML Document</h1> <p id="p1"> This is a <i>W3C HTML DOM</i> document. </p> <p> <input id="btnDemo1" type="button" value="取H1 Element节点值"> </p> <p> <input id="btnDemo2" type="button" value="取H1 Element节点文本"> </p> <p> <input id="btnDemo3" type="button" value="取Document Element节点文本"> </p> <p> <input type="button" alt="这是个演示按钮" title="演示按钮提示标题" name="btnShowAttr" id="btnShowAttr" value="按钮节点演示" /> </p> <script type="text/javascript"> function showElement(){ var element = document.getElementById("h1");//h1是一个<h1>标签 console.log('nodetype:' + element.nodeType);//nodeType=1 console.log('nodeName:' + element.nodeName); console.log('nodeValue:' + element.nodeValue); //null console.log('element:' + element); } function showText(){ var element = document.getElementById("h1"); var text = element.childNodes[0]; console.log('nodeType:' + text.nodeType); //nodeType=3 console.log('nodeValue:' + text.nodeValue); //文本节点的nodeValue是其文本内容 text.nodeValue = text.nodeValue + "abc"; //文本内容添加修改删除等等。 console.log('nodeName:' + text.nodeName); console.log(text.data); //data同样是其内容,这个属性下同样可以增删改。 } function showDocument(){ console.log('nodeType:' + document.nodeType); //9 console.log('nodeName:' + document.nodeName); console.log(document); } function showAttr(){ var btn = document.getElementById("btnShowAttr");//演示按钮,有很多属性 console.log(btn); var attrs = btn.attributes; console.log(attrs); for (var i = 0; i < attrs.length; i++) { console.log(attrs[i].nodeType);//attribute 的nodeType=2 console.log(attrs[i].nodeName); console.log(attrs[i].nodeValue); console.log(attrs[i].name); console.log(attrs[i].value); } } function demo(){ var btnDemo1 = document.getElementById("btnDemo1"); btnDemo1.onclick = showElement; //按钮1取节点nodetype值 var btnDemo2 = document.getElementById("btnDemo2"); btnDemo2.onclick = showText; var btnDemo3 = document.getElementById("btnDemo3"); btnDemo3.onclick = showDocument; var btnShowAttr = document.getElementById("btnShowAttr"); btnShowAttr.onclick = showAttr; } window.onload = demo; </script> </body> </html>
相关文章推荐
- javascript--nodeName、nodeValue 以及 nodeType 包含有关于节点的信息
- nodeName、nodeValue 以及 nodeType 包含有关于节点的信息
- nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。
- 认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
- 【HTML DOM】认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
- 认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
- 认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
- 认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
- 认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
- 认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
- DOM节点中nodeName、nodeValue 以及 nodeType属性值
- 关于dom中的nodeName,nodeType,nodeValue
- nodeName、nodeValue 以及 nodeType 简单解析
- nodeName、nodeValue 以及 nodeType
- DOM节点中属性nodeName、nodeType和nodeValue的区别 < Delphi >
- 不同类型的节点的nodeName,nodeType,nodeValue
- 【DOM】(1)通过document获取页面节点的三个属性(nodeName、nodeType、nodeValue)
- HTML DOM 节点介绍(nodeName,nodeValue,nodeType)
- 打印出 id=“bj” 该节点的所有子节点的(nodeName, nodeType, nodeValue)
- nodeName、nodeValue和nodeType节点介绍