DOM 노드를 찾고 액세스하는 자바스크립트의 메소드 예제에 대한 자세한 설명

여러 가지 방법으로 작업하려는 요소를 찾을 수 있습니다:

getElementById() 및 getElementsByTagName() 메서드 사용

요소 노드의 parentNode, firstChild 및 lastChild 속성 사용

getElementById() 및 getElementsByTagName()

getElementById() 및 getElementsByTagName() 이 두 가지 메소드는 전체 HTML 문서에서 HTML 요소를 찾을 수 있습니다.

이 두 가지 방법은 문서의 구조를 무시합니다. 문서에서 모든

요소를 찾으려면 getElementsByTagName()이 문서에서

요소의 위치에 상관없이 해당 요소를 모두 찾습니다. 또한 getElementById() 메서드는 문서 구조의 숨겨진 위치에 관계없이 올바른 요소를 반환합니다.

이 두 가지 방법은 문서의 어디에 있든 필요한 HTML 요소를 제공합니다!

getElementById()는 지정된 ID로 요소를 반환합니다.

getElementById() 구문

document.getElementById("ID");

참고: getElementById()는 XML에서 작동하지 않습니다. XML 문서에서는 XML DTD에 선언되어야 하는 id 유형의 속성을 가지고 검색해야 합니다.

getElementsByTagName() 메서드는 지정된 태그 이름을 사용하여 이 메서드를 사용할 때 사용 중인 요소의 하위 항목인 모든 요소(노드 목록)를 반환합니다.

getElementsByTagName()은 모든 HTML 요소에 사용할 수 있습니다:

getElementsByTagName() 구문

document.getElementsByTagName("标签名称");

또는:

document.getElementById('ID').getElementsByTagName("标签名称");

예 1

다음 예에서는 문서를 반환합니다. 모든

요소의 노드 목록:

document.getElementsByTagName("p");

예제 2

다음 예는 모든

요소의 노드 목록을 반환합니다. "mainp"인 요소의 후손:

document.getElementById('mainp').getElementsByTagName("p");

NodeList (nodeList)

노드 목록을 사용할 때 일반적으로 다음과 같이 목록을 변수에 저장합니다.

var x=document.getElementsByTagName("p");

이제 변수 x에는 페이지의 모든

요소 목록이 포함되어 있으며 해당 인덱스 번호로 이러한

요소에 액세스할 수 있습니다.

참고: 색인 번호는 0부터 시작합니다.

길이 속성을 사용하여 노드 목록을 반복할 수 있습니다.

var x=document.getElementsByTagName("p");
for (var i=0;i
로그인 후 복사

인덱스 번호로 특정 요소에 액세스할 수도 있습니다.

세 번째

요소에 액세스하려면 다음과 같이 작성할 수 있습니다.

var y=x[2];

parentNode, firstChild 및 lastChild

parentNode, firstChild 및 lastChild 세 가지 속성은 문서 구조 Take를 따를 수 있습니다. 문서 내의 "짧은 여행".

다음 HTML 부분을 살펴보세요.

<table>
 <tr>
  <td>John</td>
  <td>Doe</td>
  <td>Alaska</td>
 </tr>
</table>

위 HTML 코드에서 첫 번째 는 요소의 첫 번째 하위 요소(firstChild)이고 마지막 ; 요소의 마지막 하위 요소(lastChild)입니다.

또한 는 각 요소의 상위 노드(parentNode)입니다.

위 내용은 DOM 노드를 찾고 액세스하는 자바스크립트의 메소드 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!