生活随笔
收集整理的這篇文章主要介紹了
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);//9alert("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=2alert("attr:"+attr);alert("attr.name:"+attr.name+"="+attr.value);}
}
//showAttr();function demo()
{ var btnDemo1=document.getElementById("btnDemo1");btnDemo1.οnclick=showElement; //按鈕1取節點nodetype值var btnDemo2=document.getElementById("btnDemo2");btnDemo2.οnclick=showText; var btnDemo3=document.getElementById("btnDemo3");btnDemo3.οnclick=showDocument;var btnShowAttr=document.getElementById("btnShowAttr");btnShowAttr.οnclick=showAttr;
}
window.οnlοad=demo;
</script>
</html>
轉載于:https://www.cnblogs.com/Jason-Damon/archive/2011/10/13/2210931.html
總結
以上是生活随笔為你收集整理的Html Dom 的nodetype解析 转自“sweting”的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
