javascript 기본 검색 요소 에 대한 상세 한 소개(방문 노드)

물론 이 선택 기 들 은 jQuery 확장 방법 입 니 다.그러면 원생 js 를 사용 할 때 요 소 를 어떻게 찾 아야 합 니까?오늘 은 간단하게 빗 어 볼 게 요.DOM 은 우리 가 자주 사용 하 는 getElement ById()를 제외 하고 getElementsByTagName()과 getElementsByName()을 찾 는 다양한 요 소 를 정의 합 니 다.이 몇 가지 방법 을 사용 하면 html 문서 의 임의의 html 요 소 를 찾 을 수 있 습 니 다.getElement ById()는 먼저 getElement ById()를 살 펴 보 겠 습 니 다.이 방법 은 간단 합 니 다.매개 변수 에 html 태그 의 id 속성 값 만 입력 하면 됩 니 다.html 페이지 의 id 가 유일 하기 때문에 이 방법 은 하나의 요소 대상 으로 돌아 갑 니 다.예 를 들 어

<span id="span1">span  </span>
 <script>
     var oSpan = document.getElementById('span1'); //  span  
     alert(oSpan.innerHTML); //  span      
 </script> 

getElementsByTagName()getElementsByTagName()매개 변 수 는 html 태그 이름 을 입력 해 야 합 니 다.html 문서 에 있 는 모든 요소 목록 을 되 돌려 줍 니 다.이 목록 은 일부 배열 의 특성 을 가지 기 때문에 클래스 배열 이 라 고도 부 릅 니 다.특정한 요 소 를 조작 하려 면 배열 색인 이나 item()을 사용 하여 이 루어 질 수 있 습 니 다.예 를 들 어

<script>
     var oDiv = document.getElementsByTagName('div'); //    div  ,        
     /*        */
     alert(oDiv[0].innerHTML) //     div    
     alert(oDiv.item(1).innerHTML) //     div    
 </script>

물론 length 속성 을 통 해 노드 를 순환 할 수 있 습 니 다.

<script>
     var oDiv = document.getElementsByTagName('div'); 
     for(var i = 0; i < oDiv.length; i++){
         //do something
     }
 </script>

getElement sByName()getElement sByName()은 폼 요 소 를 자주 찾 습 니 다.매개 변수 에 html 태그 가 들 어 오 는 name 속성 값 을 찾 습 니 다.문서 에 있 는 여러 html 태그 의 name 값 이 같 을 수 있 기 때문에 이 방법 은 요소 목록 을 되 돌려 줍 니 다.구체 적 인 조작 방법 은 getElementsByTagName()과 유사 하 며,여 기 는 군말 이 아 닙 니 다.

<script>
     var oIpt= document.getElementsByName('city'); //  name  city    
     alert(oIpt[0].value);
     alert(oIpt.item(1).value);
 </script>

getByClass()는 위의 몇 가지 방법 을 사용 하면 흔히 볼 수 있 는 수 요 를 만족 시 킬 수 있 지만 요소 노드 에 더욱 편리 하 게 접근 하기 위해 저 희 는 보통 class 를 통 해 요 소 를 찾 는 방법 을 패키지 합 니 다.

<script>
     /** getByClass **/
     function getByClass(oParent, sClass){
         var aEle = oParent.getElementsByTagName('*');
         var re = new RegExp('\\b' + sClass + '\\b');
         var aResult = [];
         for(var i = 0; i < aEle.length; i++){
             if(re.test(aEle[i].className)){
                 aResult.push(aEle[i]);
             }
         }
         return aResult;
     }
 </script>

getByClass 는 두 개의 매개 변 수 를 입력 해 야 합 니 다.그 중에서 oParent 는 참고 노드,즉 oParent 노드 에서 요 소 를 찾 습 니 다.sClass 는 찾 을 요소 class 의 값 입 니 다.oParent 에 있 는 html 태그 의 class 값 을 들 어 오 는 sClass 값 과 반복 해서 비교 합 니 다.조건 에 맞 는 것 은 배열 aResult 에 저장 하고 마지막 으로 이 배열 로 돌아 갑 니 다.또한 여기 서 aEle[i].className==sClass 를 사용 하지 않 고 정규 로 일치 하 는 이 유 는 탭 의 class 값 이 여러 개 일 때 일치 하지 않 는 경우 입 니 다.