getElementByID getElementsByName getElementsByTagName用法詳解

時間 2019-11-07

標籤 getelementbyid getelementsbyname getelementsbytagname 用法詳解简体版

原文原文鏈接

HTML DOM(document object model)css

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型。HTML DOMhtml

模型被構造爲對象的樹數組

getElementByID getElementsByName getElementsByTagName用法詳解
知識須要溫故而知新，看過的也會忘記，須要鞏固
WEB標準下能夠經過getElementById(), getElementsByName(), and getElementsByTagName()訪問DOCUMENT中的任一個標籤：
一、getElementById()
getElementById()能夠訪問DOCUMENT中的某一特定元素，顧名思義，就是經過ID來取得元素，因此只能訪問設置了ID的元素。
好比說有一個DIV的ID爲docid：
<div id="docid"></div>
那麼就能夠用getElementById("docid")來得到這個元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ById</title>
<style type="text/css">

</style>
</head>
<body><div id="docid" name="docname" onClick="bgcolor()"></div>
</body>
</html>
<script language="JavaScript" type="text/JavaScript">

</script>
、getElementsByName()
這個是經過NAME來得到元素，但不知你們注意沒有，這個是GET ELEMENTS，複數ELEMENTS表明得到的不是一個元素，爲何呢？
由於DOCUMENT中每個元素的ID是惟一的，但NAME卻能夠重複。打個比喻就像人的身份證號是惟一的（理論上，雖然現實中有重複），但名字
重複的卻不少。若是一個文檔中有兩個以上的標籤NAME相同，那麼getElementsByName()就能夠取得這些元素組成一個數組。
好比有兩個DIV：
<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></div>
那麼能夠用getElementsByName("docname")得到這兩個DIV，用getElementsByName("docname")[0]訪問第一個DIV，用getElementsByName
三、getElementsByTagName()
這個呢就是經過TAGNAME（標籤名稱）來得到元素，一個DOCUMENT中固然會有相同的標籤，因此這個方法也是取得一個數組。
下面這個例子有兩個DIV，能夠用getElementsByTagName("div")來訪問它們，用getElementsByTagName("div")[0]訪問第一個DIV，用
getElementsByTagName("div")[1]訪問第二個DIV。
<!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>Byname,tag</title>
<style type="text/css">

</style>
</head>
<body>
<div name="docname" id="docid1" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></div>
</body>
</html>
<script language="JavaScript" type="text/JavaScript">

</script>
總結一下標準DOM，訪問某一特定元素儘可能用標準的getElementById()，訪問標籤用標準的getElementByTagName(),但IE不支持
getElementsByName()，因此就要避免使用getElementsByName()，但getElementsByName()和不符合標準的document.all[]也不是全無是處，它
們有本身的方便之處，用不用那就看網站的用戶使用什麼瀏覽器，由你本身決定了。
Javascript中的getElementById十分經常使用，但在標準的頁面中，一個id只能出現一次，若是我想同時控制多個元素，例如點一個連接，讓多個層隱藏，該怎麼作？用class，固然，同一個class是能夠容許在頁面中重複出現的，那麼有沒有getElementByClass呢？沒有，可是能夠解決：
//Create an array
var allPageTags = new Array();
function hideDivWithClasses(theClass) {
//Populate the array with all the page tags
var allPageTags=document.getElementsByTagName("div");
//Cycle through the tags using a for loop
for (i=0; i//Pick out the tags with our class name
if (allPageTags[i].className==theClass) {
//Manipulate this in whatever way you want
allPageTags.style.display='none';
}
}
}瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。