getElementById 與 getElementsByTagName的區別【Javascript】

在javascript中,操作HTML DOM時,需要經常用到getElementById 與 getElementsByTagName兩個函數,下面記錄一下這兩個函數的具體區別所在:

getElementById(idName)函數:

根據提供的idName獲取頁面中的對象。得到的結果是單一的對象。比如:

document.getElementById('left') ----- 獲取ID爲left的對象【記住:每個id在頁面中都是唯一的】

 

getElementsByTagName(tagName)函數:

根據提供的tagName獲取頁面中的指定標記的對象,得到的結果是一個數組。比如以下代碼:

var p = document.getElementsByTagName("p");   //獲取所有的<p>...</p>

var first_p = p[0]; //這是第一個段落

first_p.parentNode.removeChild[first_p]; // 刪除這個段落

 

最後附上一個實例:

<html>
<head>
<title>HTML DOM實例演示</title>
<script type="text/javascript">
function delete_firstP()
{
var p = document.getElementsByTagName("p")[0];
p.parentNode.removeChild(p);
}

function delete_h1()
{
var h1 = document.getElementById("dv").getElementsByTagName("h1")[0];
h1.parentNode.removeChild(h1);
}
</script>
</head>

<body>
<p>hello,world!</p>

<div id="dv">
<h1>hello,world!</h1>
<h2>hello,world!</h2>
<h3>hello,world!</h3>
</div>

<div>
<input type="button" value="刪除h1" onclick="delete_h1()" />
<input type="button" value="刪除第一段" onclick="delete_firstP();" />
</div>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章