js獲取節點元素物件的方法介紹

antzone發表於2017-03-17
JS物件

要想使用js操作DOM元素，比如設定div的長度或者寬度，那就要首先獲取這個元素，下面介紹一下在js中常用的獲取DOM元素節點物件的幾種方法，希望能夠給需要的朋友帶來幫助。

一.使用document.getElementById()函式:

通過此函式可以獲取具有指定id屬性值的元素，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var thediv=document.getElementById("thediv");
  thediv.style.width="100px";
  thediv.style.height="80px";
  thediv.style.backgroundColor="green";
}
</script>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

以上程式碼可以設定div的尺寸和背景顏色。

二.使用document.getElementsByTagName()函式:

此函式可以獲取指定標籤的物件集合，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var lis=document.getElementsByTagName("li");

以上程式碼可以獲取，document中所有li元素物件集合。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var theul=document.getElementById("theul");
  var lis=theul.getElementsByTagName("li");
  for(var i=0;i<lis.length;i++){
    lis[i].style.color="red";
  }
}
</script>
</head>
<body>
<ul id="theul">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
</ul>
</body>
</html>

以上程式碼可以將li中的文字顏色設定為紅色。

特別說明:

1.此函式獲取的是一個物件集合。

2.此函式的呼叫物件並不總是document，也可以是其他dom物件。

三.使用document.getElementsByName()函式:

此函式可以獲取具有指定name屬性值的物件集合，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var theText=document.getElementsByName("antzone");
  theText[0].value="螞蟻部落";
}
</script>
</head>
<body>
 
<input type="text" name="antzone" />
</body>
</html>

以上程式碼可以將文字框的value屬性值設定為“螞蟻部落”。

特別說明:在標準瀏覽器中，此函式對於所有的元素都有效，但是在IE10以下瀏覽器中，只對表單元素有效。

四.使用document.getElementsByClassName()函式:

關於document.getElementsByClassName()函式這裡就不多介紹了，具體可以參閱getElementsByClassName()用法詳解一章節。

相關文章