(一)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;
分享到：
相关推荐
在XML（可扩展标记语言）解析和处理中，`nodeName`、`nodeValue`和`nodeType`是三个非常关键的属性，它们提供了关于XML文档结构的重要信息。下面将详细阐述这三个属性的功能、用途以及如何在实际操作中使用它们。 ...
属性： 1 .nodeName 节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName，是只读的。...文本和属性节点的childNodes永远是null。可以用hasChildNodes()来判断是否有子节点。只读属性，要
在实际开发中，DOM节点的操作非常常见，如动态添加、删除或修改元素和属性，或者通过遍历DOM树来查找特定的节点。理解元素节点、属性节点和文本节点的概念及其操作方法是JavaScript Web开发的基础。熟练掌握这些知识...
例如，可以通过访问一个节点的nodeName属性来获取其名称，nodeType属性来获取节点类型，以及nodeValue属性来获取节点的值。节点类型中，元素类型用1表示，属性类型用2表示，文本类型用3表示。 遍历DOM树是指在DOM...
在 DOM 中，每个节点都有其自己的属性和方法，通过这些属性和方法，可以控制和操作节点的结构和内容。同时，DOM 还提供了一些方法来操作节点之间的关系，如 appendChild、insertBefore、removeChild 等。 要掌握 ...
在JavaScript的世界里，理解和掌握DOM（Document Object Model）操作是至关重要的，而`nodeName`, `nodeValue`, `nodeType`和`typeof`则是其中基础且关键的概念。本文将深入探讨这四个概念的区别及其应用场景。 ...
属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 注释：nodeName 所包含的 XML 元素的标签名称永远是大写的 nodeValue 对于文本节点，nodeValue 属性包含...
并且在返回值上，元素节点和属性节点的返回值都是大写字母，但这一点在不同的浏览器实现中可能会有差异，所以在使用时需要注意兼容性问题。 另一个需要关注的DOM节点属性是nodeType。nodeType属性返回的是一个数字...
每个DOM节点都有一系列的属性，如`nodeType`、`nodeName`、`nodeValue`等，它们分别表示节点类型、节点名称和节点值。例如，元素节点的`nodeType`为1，文本节点的`nodeType`为3。 #### 遍历节点树 DOM提供了遍历...
每个节点都有三个基本属性：nodeType、nodeName 和 nodeValue。nodeType 属性表示该节点的类型，nodeName 为元素的标签名称，nodeValue 为元素标签的值（通常指的是改标签的内容，但里面的文本不属于这个值 文本属于...
DOM Node接口是DOM中的核心部分，它定义了所有节点类型共有的属性、方法和事件。无论你是处理元素节点、属性节点、文本节点还是其他类型的节点，Node接口都是基础。以下将详细阐述DOM Node接口的关键知识点。 1. **...
Node接口提供了所有节点通用的方法和属性，如nodeName、nodeValue、nodeType等，以及appendChild、removeChild、replaceChild、insertBefore等操作节点的方法。 2. 访问和操作节点 要访问文档中的特定节点，可以...
本文将对JavaScript中关于DOM（文档对象模型）元素对象的属性和方法进行详细解析。DOM是用于表示和交互HTML或XML文档的API，它是JavaScript中最为重要的组成部分之一，允许我们通过脚本来读取、修改和删除文档内容、...
【JavaScript中的DOM节点类型详解】 DOM（Document Object Model）是一种标准，它允许程序和脚本动态更新、添加、删除和改变HTML和XML文档的内容和结构。JavaScript与DOM结合，为Web开发提供了强大的能力，使开发者...
遍历过程中，我们可以通过`nodeType`属性识别节点类型（如元素、属性、文本等），`nodeName`获取节点名，`attributes`属性获取元素的属性，以及`nodeValue`获取文本节点的值。 在遍历并处理XML节点后，可能需要根据...
一个节点通常有三个基本属性：nodeType表示节点类型，nodeName表示节点名称，nodeValue表示节点的值。常见的节点类型有： 1. 元素节点（Element Node）：nodeType为1，代表HTML标签，如`<div>`、`<span>`等。 2. ...
每个节点都具有一系列属性，其中最重要的是`nodeType`、`nodeName`和`nodeValue`。 - **`nodeType`**：表示节点的类型，不同的节点类型有不同的值。例如，元素节点的`nodeType`为1，文本节点的`nodeType`为3。 - *...
每个节点都有特定的类型和属性，如nodeName、nodeValue和nodeType。 2. DOM加载与解析：在JavaScript中，可以使用`ActiveXObject`（Internet Explorer）或`DOMParser`（现代浏览器）来加载XML文档并将其转换为DOM树...