DOM节点中属性nodeName、nodeType跟nodeValue的区别 _Web前端

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;