js通過類名去獲取元素的方法


定義函數getByClass()實現獲取document或指定父元素下所有class為on的元素。要求該函數可以接收一個參數也可以接收兩個參數 

條件:1.第一個參數為必需的,第二個參數為可選的

  2.第一個參數為要獲取的元素的類名,第二個參數如果傳,則傳父元素的id,不傳則默認用document
  3.返回獲取到的所有帶有”on”這個類的DOM元素

思路:
1.判斷是否含有必須傳的參數
2.取得所有的類名。並進行遍歷
3.將遍歷的類名和要獲取的class進行比較

HTML
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
        <ul id="list">
            <li class="on">1</li>
            <li class="select">2</li>
            <li class="on">3</li>
            <li>4</li>
        </ul>
        <p class="on">class為on的p標簽</p>
</body>
</html>

js

<script type="text/javascript">
  window.onload=function(){
     var len1= getByClass('on','list');
     alert(len1.length);  // 結果等於2為正確
var len2= getByClass('on');
     alert(len1.length);  // 結果等於3為正確
}
function getByClass(clsName, parent){
 //定義函數getByClass()實現獲取document或指定父元素下所有class為on的元素  
    var oParent=parent?document.getElementById(parent):document
    var oCls=oParent.getElementsByTagName('*')//獲取所有的標簽元素
    var arr=[];
    for(i in oCls){
//對遍歷的標簽元素與要查找的元素進行判斷
if(oCls[i].className==clsName){ arr.push(oCls[i]) } } return arr } </script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM