JavaScript獲取元素節點一共有三種方法,分別是通過元素ID、通過標簽名字和通過類名字來獲取；
1.通過元素ID屬性的ID值來獲得元素對象-getElementById()
DOM提供了一個名為getElementById()的方法,這個方法將返回一個與括號里有着一樣id值的元素節點對應的對象。他是document對象特有的函數,這個函數的參數只有一個,只能是你想要獲得的元素的ID值,這個值必須放在單引號或者雙引號里面。
注意:JavaScript語言區分字母大小寫,所以在寫getElementById千萬別寫成getElementByid,這樣得不到你想要獲得的元素對象。
<body> <div id="id"> </div>
<script type="text/javascript"> alert(typeof document.getElementById('id')); </script>
</body>
輸出:object; 這說明了getElementById()返回的確實是一個對象；
2.通過標簽名字-getElementsByTagName()
DOM提供了一個名為getElementsByTagName()的方法,這個方法返回一個與括號里有着一樣標簽名的元素數組對應的對象數組。也就是說返回的是所有匹配的元素所組成的一個元素數組。。 他是document對象特有的函數,這個函數的參數只有一個,只能是你想要獲得的元素的標簽名,這個值必須放在單引號或者雙引號里面。返回的就是個數組(http://www.cnblogs.com/GreenLeaves/p/5684530.html)-數組介紹，那我們就可以獲得他的length屬性,如下代碼
<body>
<div id="id">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
alert(document.getElementsByTagName('li').length);
</script>
</body>
輸出:3,證明getElementByTagName()返回的確實是一個元素對象數組；
2.1 getElementsByTagName()允許把一個通配符(星號字符*)作為他的參數,這意味這文檔里的每個元素都將在這個函數的返回值里占有一席之地;如果你想知道某份html文檔一共有多少元素節點,如下代碼所示：
<body>
<div class="p a">
<div class="a">
</div>
</div>
<div class="a">
</div>
<div class="a">
</div>
<script type="text/javascript">
alert(document.getElementsByTagName('*').length);
</script>
</body>
3.通過class屬性的類名來獲得元素對象-getElementsByClassName()
HTML5 DOM中新增了一個令人期待已久的方法getElementsByClassName(),這個方法能讓我們通過class屬性的類名來訪問元素。但是某些DOM可能還沒有實現(基本都已實現),因此在使用的時候要當心。
DOM提供了一個名為getElementsByClassName()的方法,這個方法返回一個與括號里有着一樣類名的元素數組對應的對象數組。也就是說返回的是所有匹配的元素所組成的一個元素數組。 他是document對象特有的函數,這個函數的參數只有一個,只能是你想要獲得的元素的類名,這個值必須放在單引號或者雙引號里面。返回的就是個數組(http://www.cnblogs.com/GreenLeaves/p/5684530.html)-數組介紹，那我們就可以獲得他的length屬性,如下代碼
<body>
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
<script type="text/javascript">
alert(document.getElementsByClassName('a').length);
</script>
</body>
輸出:3,證明getElementsByClassName()返回的確實是一個元素對象數組；
因為getElementsByClassName()這個方法非常有用,但是可能有些瀏覽器不支持,所以我們必須用已有的DOM方法來實現他的功能；如下代碼所示：
<body>
<div id="target">
<div class="a">
</div>
<div class="a">
</div>
<div class="a">
</div>
</div>
<script type="text/javascript">
/*
第一步:給定搜索起點node;
第二步:判斷DOM是否實現getElementsByClassName()這個方法,有正常返回,沒有用已有的DOM方法實現相同的效果返回匹配的元素數組
*/
function getElementsByClassName_zdy(node,classname) {
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
} else {
var results = Array();
var elements = node.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
if (elements[i].className.indexOf(classname) != -1) {
results[results.length] = elements[i];
}
}
return results;
}
}
alert(getElementsByClassName_zdy(document.getElementById('target'), 'a').length)
</script>
</body>