JavaScript 기반 요소 찾기(노드 접근)에 대한 자세한 소개

물론 이러한 선택기는 jQuery 확장의 일부 방법이므로 기본 js를 사용할 때 요소를 찾는 방법은 무엇입니까? 오늘은 간단히 정리해 보겠습니다.

DOM은 일반적으로 사용되는 getElementById() 외에도 getElementsByTagName() 및 getElementsByName()도 있습니다. 이러한 방법을 사용하면 html 문서에서 html 요소를 찾을 수 있습니다.

getElementById()
먼저 getElementById()를 살펴보겠습니다. 이 방법은 매우 간단합니다. 매개변수에 태그가 있습니다. HTML 페이지의 ID가 고유하므로 이 메소드는 단일 요소 객체를 반환합니다. 예:

코드 복사 코드는 다음과 같습니다.

 스팬 태그
 <script><br> var oSpan = document.getElementById('span1'); //스팬 요소 찾기 <br> Alert(oSpan.innerHTML); // 스팬 태그 팝업 <br><br>
</div>
<br><strong>getElementsByTagName()<font style="COLOR: #ff0000"><br></font>getElementsByTagName() 매개변수의 내용은 다음과 같아야 합니다. html 태그 이름을 전달하면 HTML 문서에서 일치하는 모든 요소의 목록을 반환합니다. 이 목록은 배열의 일부 특성을 가지므로 배열 유사 요소라고도 합니다. 특정 요소에 대해 작업을 수행하려는 경우 배열 인덱스 또는 item()을 사용하여 이를 달성할 수 있습니다. 예: </strong><br><div class="codetitle"><span><a style="CURSOR: pointer" data="50475" class="copybut" id="copybut50475" onclick="doCopy('code50475')">코드 복사<u></u></a> 코드는 다음과 같습니다. </span></div>
<div class="codebody" id="code50475"><script><br> var oDiv = document.getElementsByTagName('div') //모든 div 요소를 찾아 요소 목록을 반환합니다. <br> /* 작업별 요소*/<br> Alert(oDiv[0].innerHTML) //첫 번째 div에 콘텐츠 팝업<br> Alert(oDiv.item(1).innerHTML) //콘텐츠 팝업 두 번째 div<br> </script>

물론 길이 속성을 통해 노드를 반복할 수도 있습니다:

코드 복사 코드는 다음과 같습니다.

<script><br> var oDiv = document.getElementsByTagName('div') <br> for( var i = 0; i < oDiv.length; i ){<br> //뭔가<br> }<br> </script>

getElementsByName ()
getElementsByName()은 양식 요소를 찾는 데 자주 사용됩니다. 문서에 있는 여러 html 태그의 이름 값이 매개변수로 전달됩니다. 동일(예: 라디오 버튼)인 경우 이 메서드는 요소 목록도 반환합니다. 구체적인 연산 방식은 getElementsByTagName()과 유사하므로 여기서는 자세히 다루지 않겠습니다.

코드 복사 코드는 다음과 같습니다.

저자별 최신 기사