DOM 노드 방법에 대한 JS 액세스에 대한 자세한 설명

이 기사의 예에서는 DOM 노드에 액세스하는 JS 방법을 설명합니다. 다음과 같이 참조할 수 있도록 모든 사람과 공유하세요.

노드 찾기 및 액세스

여러 가지 방법을 통해 조작하려는 요소를 찾을 수 있습니다.

getElementById( ) 및 getElementsByTagName() 요소 노드의 parentNode, firstChild 및 lastChild를 사용하는

메서드 속성

getElementById() 및 getElementsByTagName()

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

이 두 가지 방법은 문서의 구조를 무시합니다. 문서에서 모든 e388a4556c0f65e1904146cc1a846bee 요소를 찾으려면 getElementsByTagName()이 모든 요소를 ​​찾습니다. e388a4556c0f65e1904146cc1a846bee 요소가 위치한 문서의 수준입니다. 또한 getElementById() 메서드는 문서 구조의 숨겨진 위치에 관계없이 올바른 요소를 반환합니다.

이 두 가지 방법을 사용하면 문서 내 어디에 있든 필요한 HTML 요소를 모두 얻을 수 있습니다!

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

getElementById() 구문

document.getElementById("ID");

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

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

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

getElementsByTagName() 구문

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

또는:

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

예 1

다음 예는 문서에 있는 모든 e388a4556c0f65e1904146cc1a846bee 요소의 노드 목록을 반환합니다.

document.getElementsByTagName("p");

예 2

다음 예는 모든 e388a4556c0f65e1904146cc1a846bee 요소의 노드 목록을 반환하며 이러한 e388a4556c0f65e1904146cc1a846bee 요소에는 "maindiv" ID가 있어야 합니다. 요소의 하위 항목:

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

노드 목록(nodeList)

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

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

이제 변수 x에는 페이지의 모든 e388a4556c0f65e1904146cc1a846bee 요소 목록이 포함되어 있으며, 해당 인덱스 번호로 이러한 e388a4556c0f65e1904146cc1a846bee 요소에 액세스할 수 있습니다.

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

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

var x=document.getElementsByTagName("p"); 
for (var i=0;i
색인 번호로 특정 요소에 액세스할 수도 있습니다. 
세 번째 e388a4556c0f65e1904146cc1a846bee 요소에 액세스하려면 다음과 같이 작성할 수 있습니다. 
var y=x[2];
parentNode, firstChild 및 lastChild
parentNode, firstChild 및 lastChild 세 가지 특성이 뒤따를 수 있습니다. 문서의 구조를 파악하고 문서 내에서 "짧은 거리"를 이동합니다. 
다음 HTML 부분을 살펴보세요. 
<table>  
<tr>   
<td>John</td>   
<td>Doe</td>   
<td>Alaska</td>  
</tr> 
</table>
위 HTML 코드에서 첫 번째 b6c5a531a458a2e790c1fd6421739d1c는 a34de1251f0d9fe1e645927f19a896e8 , 그리고 마지막b6c5a531a458a2e790c1fd6421739d1c
a34de1251f0d9fe1e645927f19a896e8 요소의 마지막 하위 요소(lastChild)입니다. 
또한 a34de1251f0d9fe1e645927f19a896e8는 각 b6c5a531a458a2e790c1fd6421739d1c 요소의 상위 노드(parentNode)입니다.