DOM节点中属性nodeName、nodeType和nodeValue的区别

()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节点中属性nodeName、nodeType和nodeValue的区别</title>  
<script type="text/javascript" src="test.js"></script>  
</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;

 

 

 

你可能感兴趣的:(value)