Visitors hit counter dreamweaver

Html Dom 的nodetype解析 转自“sweting”

Html Dom 的nodetype解析

原文地址：http://www.cnblogs.com/sweting/archive/2009/12/06/1617839.html

将HTML DOM中几个容易常用的属性做下记录：

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
一下代码是我自己打的，没用他原文的
<!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=gb2312" />
<title>无标题文档</title>

</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>
<script language="javascript">
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);   
}
//showElement();

function showText(){
var element=document.getElementById("h1");
var text=element.childNodes[0];
alert("nodetype:"+text.nodeType);
alert("nodevalue:"+text.nodeValue);
text.nodeValue=text.nodeValue+"abc";
alert("nodeName:"+text.nodeName);
alert(text.data);
}
//showText();
function showDocument()
{
   alert("nodeType:"+document.nodeType);//9
   alert("nodeType:"+document.nodeName);
   alert(document);
}
//showAttr();
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);
     }
}
//showAttr();

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;
</script>
</html>

　　

posted @ 2011-10-13 22:30  Jason Damon  阅读(224)  评论(0)    收藏  举报