(2)JavaScript DOM獲取元素節點

阿新 • • 發佈：2018-11-27

如何獲取元素節點：
1 document.getElementById ：根據 id 屬性獲取對應的單個節點
2 document.getElementsByTagName: 根據標籤名獲取指定節點名字的陣列，陣列物件
3 document.getElementsByName:
根據節點的 name 屬性獲取符合條件的結點陣列
但 ie 的實現方式和W3C 標準有差別；
在html 文件中若某個結點（li）沒有name屬性
則 ie 使用 getElementsByName 不能獲取到節點陣列但是火狐可以
4 其他的兩個方法， ie 根本就不支援所以不建議使用

< 
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
	  //獲取指定的元素節點
	  window.onload = function()
	  {
	  
		  //1.   獲取id為bj的那個節點.  
		  //在編寫HTML文件時  需確保id屬性值是唯一的
		  //該方法為document 物件的方法    ---- 顯示Object 

		  //@@@@@顯示 Object
		  var bjNode = document.getElementById("bj");
		  alert(bjNode);
		  
		  //2. 獲取所有的li節點 .
		  //使用標籤名獲取指定節點的集合.
		  //該方法為 Node 介面的方法 即任何一個結點都有這個方法
		  //@@@@@顯示 8
		  var liNodes = document.getElementsByTagName("li");
		  alert(liNodes.length);
		  
		  
		  //2.獲取指定節點的  的子節點li的個數  
		  //@@@@@顯示 4 

		  var cityNode = document.getElementById("city");
		  var cityLiNodes = cityNode.getElementsByTagName("li");
		  alert(cityLiNodes.length);
		  
		  //3.根據HTML文件元素的 name 屬性名來獲取指定的節點的集合。
		  //@@@@@顯示 2
		  var genderNodes = document.getElementsByName("gender");
		  alert(genderNodes.length);
			  
		  //若HTML 元素自身沒有定義name屬性  則 getElementsByName（）
		  //方法對於IE無效. 所以使用該方法需謹慎
		  //@@@@@顯示 1
		  var bjNodes2 = document.getElementsByName("beijing");
		  alert(bjNodes2.length);	  
	  }
	</script>
</head>
<body>
	
	<p>你喜歡哪個城市？</p>
	<ul id = "city">
		<li id="bj" name="beijing">北京</li>
	   <li>上海</li>
	   <li>東京</li>
	   <li>首爾</li>
	</ul>
	
	<br><br>
	<p>你喜歡哪款單機遊戲？</p>
	<ul id = "game">
	   <li id="rl">紅警</li>
	   <li>實況</li>
	   <li>極品飛車</li>
	   <li>魔獸</li>
	</ul>
	<br><br>
	gender:
		<input type="radio" name="gender" value="male"/>Male
		<input type="radio" name="gender" value="female"/>Female

</body>
</html>

(2)JavaScript DOM獲取元素節點

(2)JavaScript DOM獲取元素節點

JavaScript DOM（一）--頁面載入完成事件與獲取元素節點

javascript學習筆記（第三章DOM--獲取元素屬性值）

DOM（包括獲取元素節點的方法以及獲取和設定元素節點的屬性）

獲取元素節點

獲取元素節點的方法比較

JavaScript其他獲取元素的方式

總結-DOM通用屬性&DOM獲取元素位置&事件繫結與移除&冒泡和標籤的預設行為

微信小程式獲取元素高度（獲取元素節點資訊）

Javascript之獲取元素距離頁面的top、left、right、bottom

JavaScript基礎---獲取元素的屬性（title，style，width）

javascript dom 獲取樣式屬性值

JavaScript--Dom操作元素的樣式

DOM——獲取元素的方式

小程式如何獲取dom 元素節點

JavaScript HTML DOM 元素 (節點)新增，編輯，刪除

javascript中獲取dom元素的高度和寬度

整理dom 獲取當前元素的兄弟節點/父節點/子節點/篩選元素

【JavaScript】DOM（二）獲取元素+設定屬性的六種方法

JavaScript DOM概述(獲取節點的方法/節點的訪問關係/節點建立新增刪除複製/屬性獲取設定刪除)

(2)JavaScript DOM獲取元素節點

相關推薦