nodeValue以及其与value的区别以及JS nodeName、nodeValue、nodeType返回类型

谁践踏了优雅 2021-06-24 13:58 341阅读 0赞

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。

**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

nodeValue就是用来得到“文本元素的值”的，即只适用于“文本节点”；

例子：

<html>

<head> 
<script type="text/javascript"> 
function getNodeValue() 
\{ 
var nv=document.getElementById("td1").firstChild.nodeValue; 
var nn=document.getElementById("tr1").firstChild.nodeName; 
var nv1=document.getElementById("tr1").firstChild.nodeValue; 
alert("nv="+nv); 
alert("nn="+nn); 
alert("nv1="+nv1); 
\} 
</script>

</head>

<body> 
<table> 
  <tr id="tr1"> 
    <td id="td1" >John</td> 
    <td>Doe</td> 
    <td>Alaska</td> 
  </tr> 
</table> 
<input type="button" value="button1"  οnclick="getNodeValue()"/> 
</body>

</html>

以上得到的结果：

nv=John;

nn=td;

nv1=null;

要分清元素的value属性和nodeValue 不一样，nodeValue适用于“文本节点”和“属性节点”；对应“文档节点”和“标签节点”不起作用

<table style="color:rgb(0,0,0); font-family:Arial; font-size:14px; line-height:26px"> 
 <tbody> 
 <tr> 
 <td> 接口 </td> 
 <td> nodeType常量 </td> 
 <td> nodeType值 </td> 
 <td> 备注 </td> 
 </tr> 
 <tr> 
 <td> Element </td> 
 <td> Node.ELEMENT_NODE </td> 
 <td align="right"> 1 </td> 
 <td> 元素节点 </td> 
 </tr> 
 <tr> 
 <td> Text </td> 
 <td> Node.TEXT_NODE </td> 
 <td align="right"> 3 </td> 
 <td> 文本节点 </td> 
 </tr> 
 <tr> 
 <td> Document </td> 
 <td> Node.DOCUMENT_NODE </td> 
 <td align="right"> 9 </td> 
 <td> document </td> 
 </tr> 
 <tr> 
 <td> Comment </td> 
 <td> Node.COMMENT_NODE </td> 
 <td align="right"> 8 </td> 
 <td> 注释的文本 </td> 
 </tr> 
 <tr> 
 <td> DocumentFragment </td> 
 <td> Node.DOCUMENT_FRAGMENT_NODE </td> 
 <td align="right"> 11 </td> 
 <td> document片断 </td> 
 </tr> 
 <tr> 
 <td> Attr </td> 
 <td> Node.ATTRIBUTE_NODE </td> 
 <td align="right"> 2 </td> 
 <td> 节点属性 </td> 
 </tr> 
 </tbody> 
</table>

/\* 
        定义和用法 
　　        childNodes 属性可返回指定节点的子节点的节点列表，也就是包含在容易内的所有控件与文本属性字段，如果希望得到这些中的某些，必须通过 
　　        类别属性进行筛选。 
　　        childNodes常用属性： 
　　        nodeValue：nodeValue适用于“文本节点（<td>中的文本内容）”和“属性节点”；对应“文档节点”和“标签节点（li）”不起作用 
　　        nodeName：元素节点的 nodeName 是标签名称 
            属性节点的 nodeName 是属性名称 
            文本节点的 nodeName 永远是 \#text 
            文档节点的 nodeName 永远是 \#document 
            nodeType:返回的数值 1：元素节点、2：属性节点、3：文本节点 
            firstChild：返回容器内的第一个控件对象，可以利用这个返回对象去获取该控件的属性信息 
            parentNode：返回子节点对象外层的父对象，可以利用这个返回父对象去获取该控件的属性信息 
            previousSibling:获取同级节点上级节点对象，可以利用这个返回对象去获取该节点的属性信息 
            nextSibling：获取同级节点下级节点对象，可以利用这个返回对象去获取该节点的属性信息 
             
        语法： 
　　        nodeObject.childNodes 
        提示和注释 
　　        提示：请使用 length 属性来计算一个节点列表中节点的数目。当你已获悉节点列表的长度后，您就可以轻松地循环遍历此列表，并提取您所需要的值！ 
        实例 
　　        在所有的例子中，我们将使用 XML 文件 books.xml，以及 JavaScript 函数 loadXMLDoc()。 　　 
　　        下面的代码片段显示了此XML文档的子节点： 　　 
　　        xmlDoc=loadXMLDoc("books.xml"); 　　 
　　        var x=xmlDoc.childNodes; 　　 
　　        for (i=0;i<x.length;i++) \{ document.write("Nodename: " + x\[i\].nodeName) document.write(" (nodetype: " + x\[i\].nodeType + ") ") \} 
        \*/