JS-節點屬性(常用!)

來源:互聯網
上載者:User

標籤:

(開始很生疏,不想看的知識點,後來DOM中用的特別多,才發現很重要。還有幾個點,是比較容易忽略的,值得注意!)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS-節點屬性</title>
</head>
<body>
<h1>節點屬性</h1>
在文件物件模型 (DOM) 中,每個節點都是一個對象。DOM 節點有三個重要的屬性 :<br/>

1. nodeName : 節點的名稱<br/>

2. nodeValue :節點的值<br/>

3. nodeType :節點的類型<br/>

一、nodeName 屬性: 節點的名稱,是唯讀。<br/>

1. 元素節點的 nodeName 與標籤名相同<br/>
2. 屬性節點的 nodeName 是屬性的名稱<br/>
3. 文本節點的 nodeName 永遠是 #text<br/>
4. 文檔節點的 nodeName 永遠是 #document<br/>

二、nodeValue 屬性:節點的值<br/>

1. 元素節點的 nodeValue 是 undefined 或 null<br/>
2. 文本節點的 nodeValue 是文本自身<br/>
3. 屬性節點的 nodeValue 是屬性的值<br/>

三、nodeType 屬性: 節點的類型,是唯讀。以下常用的幾種結點類型:<br/>

元素類型 節點類型<br/>
!元素 1<br/>
屬性 2<br/>
!文本 3&nbsp;空格也是返回3<br/>
注釋 8<br/>
文檔 9<br/>
<h1>注意空格!!!!</h1>
<hr color="red" />
<h1>實驗</h1>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">
var m = document.getElementsByTagName("li");
for(var i=0;i<m.length;i++){
// document.write(m[i].nodeType);
switch(m[i].nodeType){
case 1:
document.write("1:li節點的類型—【元素】—<br/>");
break;
case 2:
document.write("1:li節點的類型—【屬性】—<br/>");
break;
case 3:
document.write("1:li節點的類型—【文本】—<br/>");
break;
case 8:
document.write("1:li節點的類型—【注釋】—<br/>");
break;
case 9:
document.write("1:li節點的類型—【文檔】—<br/>");
break;
}

document.write("2:li裡邊的常值內容——"+m[i].nodeValue+"<br/>");
document.write("3:li節點的名稱——"+m[i].nodeName+"<br/>");
document.write("<hr/>");
}

</script>
</body>
</html>

JS-節點屬性(常用!)

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.