JavaScript跨瀏覽器取得頁面中相同class節點的方法_javascript技巧
- WBOY原創
- 2016-05-16 16:11:271235瀏覽
網頁開發時，在很多時候我們需要操作相同類別名稱的元素，也就是class相同的元素。昨天參加筆試，有一道相關的題目沒答上來：
JavaScript取得頁面中class為test的節點
於是收集了一些相關的資料，在本文中列舉了兩種我覺得比較好的方法，不足之處，還望大家批評指正。如果大家有更好的方法，希望可以分享。
Solution1 Jeremy Keuth方案
Jeremy Keuth叔叔在《JavaScript DOM 程式設計藝術》（第2版）（英文：DOM Scripting-Web Design with JavaScript and the Document Object Model）一書的第三章第四節中講到了getElementsByClass這個方法，並講到如何在不支援該屬性的瀏覽器（IE6，IE7和IE8，讓我們鄙視他們）中應用這一方法，摘錄在此，個別地方有修改。
HTML5 DOM中新增了一個方法讓我們透過class屬性中的類別名稱來存取元素，這就是：getELementsByClassName，由於方法比較新，某些的DOM實作裡還沒有，因此在使用的時候要小心。下面我們先來看看這個方法能幫我們做什麼，然後在討論怎麼可靠的使用這個方法。
與getELementsByTagName方法類似，getElementsByClassName也只接受一個參數，就是類別名稱：
複製程式碼 程式碼如下:
getElementsByClassName(class)
這個方法的回傳值也與getElementsByTagName類似，都是一個具有相同類別名稱的元素的數組，下面這行程式碼返回的就是一個數組，其中包含類別名為「sale」的所有元素：
複製程式碼 程式碼如下:
document.getElementsByClassName("sale")
使用這個方法也可以找出那些帶有多個類別名稱的元素。若要指定多個類別名，只要在字串參數中用空格分隔類別名稱即可。例如，在<script>標籤中加入下面這行程式碼：<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="71155" class="copybut" id="copybut71155" onclick="doCopy('code71155')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code71155"><br /> alert(document.getElementsByClassName("sale important").length);<br /> <p><strong>完整程式碼 <p><div class="codetitle"><span><a style="CURSOR: pointer" data="10676" class="copybut" id="copybut10676" onclick="doCopy('code10676')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code10676"><br /> <!DOCTYPE html><br /> <html> <br /> <head><br /> <meta charset="utf-8"> <br /> <title>Shopping List<br /> <br /> <body><br /> <h1>What to buy<br /> <p title="a gentle reminder">Don't forget to buy this stuff.<br /> <ul id="purchase"><br /> <li>A thin of beans<br /> <li class="sale">Cheese<br /> <li class="sale important">Milk<br /> <br /> <script><br /> alert(document.getElementsByClassName("sale important").length);<br /> </script>
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn