JS에서 DOM 문서 트리를 탐색하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS에서 DOM 문서 트리를 탐색하는 방법

php中世界最好的语言

Apr 08, 2018 pm 01:59 PM

javascript 문서 횡단

이번에는 JS로 DOM문서 트리를 순회하는 방법과 JS로 DOM 문서 트리를 순회할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

이 문서의 예에서는 JS가 DOM 문서 트리를 순회하는 방법을 설명합니다. 참조를 위해 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

1 소개

문서 트리 탐색은 parentNode 속성, firstChild 속성, lastChild 속성, PreviousSibling 속성 및 nextSibling 속성을 사용하여 수행됩니다.

1. parentNodeAttribute

이 속성은 현재 노드의 상위 노드를 반환합니다.

[pNode=]obj.parentNode[pNode=]obj.parentNode

pNode：该参数用来存储父节点，如果不存在父节点将返回“null”。

2、firstChild属性

该属性返回当前节点的第一个子节点。

[cNode=]obj.firstChild

cNode：该参数用来存储第一个子节点，如果不存在将返回“null”。

3、lastChild属性

该属性返回当前节点的最后一个子节点。

[cNode=]obj.lastChild

cNode：该参数用来存储最后一个子节点，如果不存在将返回“null”。

4、previousSibling属性

该属性返回当前节点的前一个兄弟节点。

[sNode=]obj.previousSibling

sNode：该参数用来存储前一个兄弟节点，如果不存在将返回“null”。

5、nextSibling属性

该属性返回当前节点的后一个兄弟节点。

[sNode=]obj.nextSibling

pNode: 이 매개변수는 상위 노드를 저장하는 데 사용됩니다. 상위 노드가 없으면 "null"이 반환됩니다.

firstChildAttribute이 속성은 현재 노드의 첫 번째 하위 노드를 반환합니다.

[cNode=]obj.firstChild

cNode: 이 매개변수는 첫 번째 하위 노드를 저장하는 데 사용됩니다. 존재하지 않는 경우 "null"이 반환됩니다.

3. lastChildAttribute

이 속성은 현재 노드의 마지막 하위 노드를 반환합니다.

[cNode=]obj.lastChildcNode: 이 매개변수는 마지막 하위 노드를 저장하는 데 사용됩니다. 존재하지 않는 경우 "null"이 반환됩니다.

previousSiblingAttribute

이 속성은 현재 노드의 이전 형제 노드를 반환합니다.

[sNode=]obj.previousSibling

sNode: 이 매개변수는 이전 형제 노드를 저장하는 데 사용됩니다. 존재하지 않는 경우 "null"이 반환됩니다. 5,
nextSibling

Attribute

이 속성은 현재 노드의 다음 형제 노드를 반환합니다.
[sNode=]obj.nextSibling

🎜sNode: 이 매개변수는 다음 형제 노드를 저장하는 데 사용됩니다. 존재하지 않는 경우 "null"이 반환됩니다. 🎜🎜🎜🎜2 애플리케이션 🎜🎜🎜🎜문서 트리를 탐색하면 해당 페이지에서 해당 버튼을 통해 문서의 각 노드에 대한 이름, 유형 및 노드 값을 찾을 수 있습니다. 🎜🎜🎜🎜Three Code🎜🎜🎜

<head>
<title>遍历文档树</title>
</head>
<body >
<h3 id="h1">三号标题</h3>
<b>加粗内容</b>
<form name="frm" action="#" method="get">
节点名称：<input type="text" id="na"/><br />
节点类型：<input type="text" id="ty"/><br />
节点的值：<input type="text" id="va"/><br />
<input type="button" value="父节点" onclick="txt=nodeS(txt,&#39;parent&#39;);"/>
<input type="button" value="第一个子节点" onclick="txt=nodeS(txt,&#39;firstChild&#39;);"/>
<input type="button" value="最后一个子节点" onclick="txt=nodeS(txt,&#39;lastChild&#39;);"/><br>
<input name="button" type="button" onclick="txt=nodeS(txt,&#39;previousSibling&#39;);" value="前一个兄弟节点"/>
<input type="button" value="最后一个兄弟节点" onclick="txt=nodeS(txt,&#39;nextSibling&#39;);"/>
<input type="button" value="返回根节点" onclick="txt=document.documentElement;txtUpdate(txt);"/>
</form>
<script language="javascript">
<!--
function txtUpdate(txt)
{
 window.document.frm.na.value=txt.nodeName;
 window.document.frm.ty.value=txt.nodeType;
 window.document.frm.va.value=txt.nodeValue;
}
function nodeS(txt,nodeName)
{
switch(nodeName)
{
case"previousSibling":
if(txt.previousSibling)
{
 txt=txt.previousSibling;
}
else
 alert("无兄弟节点");
break;
case"nextSibling":
if(txt.nextSibling)
{
 txt=txt.nextSibling;
}
else
 alert("无兄弟节点");
break;
case"parent":
if(txt.parentNode)
{
 txt=txt.parentNode;
}
else
 alert("无父节点");
break;
case"firstChild":
if(txt.hasChildNodes())
{
 txt=txt.firstChild;
}
else
 alert("无子节点");
break;
case"lastChild":
if(txt.hasChildNodes())
{
 txt=txt.lastChild;
}
else
 alert("无子节点")
break;
}
 txtUpdate(txt);
return txt;
}
var txt=document.documentElement;
 txtUpdate(txt);
-->
</script>
</body>

로그인 후 복사

🎜🎜🎜Four Running results🎜🎜🎜🎜🎜🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사에 주목하세요. PHP 중국어 웹사이트에서! 🎜🎜추천 도서: 🎜🎜🎜React는 휴대폰 번호의 데이터 동기화를 실현합니다.🎜🎜🎜🎜🎜Babel은 es6 클래스 구문을 어떻게 변환합니까?🎜🎜🎜

위 내용은 JS에서 DOM 문서 트리를 탐색하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

자바 튜토리얼

1663

Cakephp 튜토리얼

1420

라라벨 튜토리얼

1313

PHP 튜토리얼

1266

C# 튜토리얼

1238

Related knowledge

이 문서의 페이지를 다시 매거나 인쇄하려면 메모리나 디스크 공간이 부족합니다. Word 오류 Feb 19, 2024 pm 07:15 PM

이 기사에서는 Microsoft Word에서 문서를 다시 페이지하거나 인쇄하기 위한 메모리나 디스크 공간 부족 문제를 해결하는 방법을 소개합니다. 이 오류는 일반적으로 사용자가 Word 문서를 인쇄하려고 할 때 발생합니다. 비슷한 오류가 발생하는 경우 이 문서에 제공된 제안 사항을 참조하여 문제를 해결하세요. 이 문서를 다시 페이지하거나 인쇄할 메모리나 디스크 공간이 부족합니다. Word 오류 "문서를 다시 페이지하거나 인쇄할 메모리나 디스크 공간이 부족합니다."라는 Microsoft Word 인쇄 오류를 해결하는 방법입니다. Microsoft Office 업데이트 메모리를 많이 차지하는 응용 프로그램 닫기 기본 프린터 변경 안전 모드에서 Word 시작 NorMal.dotm 파일 이름 바꾸기 Word 파일을 다른 이름으로 저장

Word 문서에 수정 지시를 추가하는 방법 Mar 01, 2024 am 09:40 AM

395단어, 즉 495단어입니다. 이 기사에서는 Word 문서에 빨간색 선을 추가하는 방법을 보여줍니다. 문서에 레드라인을 긋는 것은 사용자가 변경 사항을 명확하게 볼 수 있도록 문서를 수정하는 것을 의미합니다. 이 기능은 여러 사람이 함께 문서를 편집할 때 매우 중요합니다. 빨간색 선의 의미 문서 표시 빨간색 선은 빨간색 선이나 설명선을 사용하여 문서의 변경, 편집 또는 수정 사항을 나타내는 것을 의미합니다. 이 용어는 인쇄된 문서를 표시하기 위해 빨간 펜을 사용하는 관행에서 영감을 받았습니다. Redline 주석은 문서를 편집할 때 작성자, 편집자 및 검토자에게 권장되는 변경 사항을 명확하게 표시하는 등 다양한 시나리오에서 널리 사용됩니다. 법적 계약이나 계약의 변경 및 수정을 제안합니다. 논문, 발표 등에 대한 건설적인 비판과 제안을 제공합니다. W를 주는 방법

Word 문서에서 하이퍼링크를 열 수 없습니다 Feb 18, 2024 pm 06:10 PM

최근 네트워크 기술의 지속적인 발전으로 인해 우리의 삶은 다양한 디지털 도구와 인터넷으로부터 분리될 수 없게 되었습니다. 문서를 처리할 때, 특히 서면으로 문서를 처리할 때 우리는 종종 워드 문서를 사용합니다. 그러나 때로는 어려운 문제에 직면할 수도 있습니다. 즉, 단어 문서의 하이퍼링크가 열리지 않는 경우가 있습니다. 이 문제는 아래에서 논의됩니다. 우선, 하이퍼링크는 워드 문서에 추가된 다른 문서, 웹 페이지, 디렉터리, 북마크 등에 대한 링크를 의미한다는 점을 분명히 해야 합니다. 이 링크를 클릭하면 나는

Windows 11/10에서 열 때 Word 문서가 비어 있습니다. Mar 11, 2024 am 09:34 AM

Windows 11/10 컴퓨터에서 Word 문서를 열 때 빈 페이지 문제가 발생하면 상황을 해결하기 위해 복구해야 할 수도 있습니다. 이 문제의 원인은 다양하며, 가장 일반적인 원인 중 하나는 손상된 문서 자체입니다. 또한 Office 파일이 손상되면 유사한 상황이 발생할 수도 있습니다. 따라서 이 문서에서 제공하는 수정 사항이 도움이 될 수 있습니다. 일부 도구를 사용하여 손상된 Word 문서를 복구해 보거나 문서를 다른 형식으로 변환한 후 다시 열어볼 수 있습니다. 또한 시스템의 Office 소프트웨어를 업데이트해야 하는지 확인하는 것도 이 문제를 해결하는 방법입니다. 다음의 간단한 단계를 따르면 Win에서 Word 문서를 열 때 Word 문서가 비어 있는 문제를 해결할 수 있습니다.

Java 폴더를 반복하고 모든 파일 이름을 얻는 방법 Mar 29, 2024 pm 01:24 PM

Java는 강력한 파일 처리 기능을 갖춘 널리 사용되는 프로그래밍 언어입니다. Java에서는 폴더를 탐색하고 모든 파일 이름을 가져오는 것이 일반적인 작업이므로 특정 디렉터리에서 파일을 빠르게 찾고 처리하는 데 도움이 될 수 있습니다. 이 기사에서는 폴더를 탐색하여 모든 파일 이름을 Java로 가져오는 방법을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 재귀적 방법을 사용하여 폴더를 순회할 수 있습니다. 재귀적 방법은 폴더를 효과적으로 순회할 수 있는 자체 호출 방법입니다.

Word 문서 작업에 대한 자세한 설명: 두 페이지를 하나로 병합 Mar 26, 2024 am 08:18 AM

Word 문서는 일상 업무와 학습에서 가장 자주 사용되는 응용 프로그램 중 하나입니다. 문서 작업을 하다 보면 두 페이지를 하나로 병합해야 하는 상황이 가끔 발생할 수 있습니다. 이 기사에서는 독자가 문서 레이아웃을 보다 효율적으로 처리할 수 있도록 Word 문서에서 두 페이지를 한 페이지로 병합하는 방법을 자세히 소개합니다. Word 문서에서 두 페이지를 하나로 병합하는 작업은 일반적으로 용지 비용과 인쇄 비용을 절약하거나 문서를 더 간결하고 깔끔하게 만들기 위해 사용됩니다. 다음은 두 페이지를 하나로 병합하는 구체적인 단계입니다. 1단계: 작동해야 하는 단어를 엽니다.

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

See all articles

JS에서 DOM 문서 트리를 탐색하는 방법

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제