(一)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;
分享到:
相关推荐
属性: 1 .nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text。nodeName,是只读的。...文本和属性节点的childNodes永远是null。可以用hasChildNodes()来判断是否有子节点。只读属性,要
元素节点的三个node属性:nodeType:1、nodeName/TagName:元素的标签名大写、nodeValue:null; 其父节点 parentNode 指向包含该元素节点的元素节点 Element 或文档节点 Document; 元素的 childNodes 属性中...
属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 注释:nodeName 所包含的 XML 元素的标签名称永远是大写的 nodeValue 对于文本节点,nodeValue 属性包含...
一般地,节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。 节点类型不同,这三个属性的值也不相同 nodeType nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值,12种类型分别对应1到12的常...
使用getElementById()方法来访问指定id的节点,并用nodeName属性、nodeType属性和nodeValue属性来显示出该节点名称、节点类型和节点值。 1、nodeName属性 该属性用来获取某一个节点的名称。 [sName=]obj.nodeName ...
DOM模型中的节点:元素节点、文本节点、属性节点 例:私のdotnet小屋</a> (1)a是元素节点 (2)“私のdotnet小屋”是文本节点 (3)href=”http://www.cnblogs.com/shuz”是属性节点 DOM节点的属性 属性 类型...
在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 节点类型:元素 1 ,属性 2 ,文本 3 ,注释 8,文档 9...
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]将HTML DOM中几个容易常用的属性做下记录: nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。 nodeName 属性含有某个节点的名称。 元素节点的 nodeName 是...
1 、文档里的每个节点都有属性 nodeName 、 nodeValue 、 nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读属性 nodeValue 1 元素节点 2 属性节点 3 文本节点 只读属性 nodeType 不能用于元素节点 ...
节点类型 nodeType 以下是一些重要的nodeType的取值: 1: 元素element 2: 属性attr ...同时通过使用列表中每个节点的previousSibling和nextSibling属性,可以访问同一列表中的其他节点。 操作节点 a
也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling,