div의 모든 범위를 동적으로 읽는 방법은 무엇입니까?

웹페이지를 만들 때 하나의 HTML 요소에 여러 개의 중첩된 HTML 요소가 포함될 수 있습니다. 어떤 경우에는 개발자가 특정 HTML 요소에 대한 HTML 요소를 읽어야 할 수도 있습니다. 우리의 경우 div 요소의 모든 범위 요소를 읽고 해당 내용을 추출해야 합니다.

이 튜토리얼에서는 JavaScript를 사용하여 div 요소의 모든 범위의 콘텐츠를 읽고 이를 형식화된 방식으로 다시 웹 페이지에 추가하는 방법을 배웁니다.

문법

사용자는 JavaScript를 사용하여 다음 구문에 따라 div 요소의 모든 범위를 동적으로 읽을 수 있습니다.

으아악

위 구문에서는 태그 이름으로 "span" 요소를 가져오고 모든 범위 요소를 하나씩 읽습니다.

예 1

아래 예에서는 ID "myDIv"를 포함하는 div 요소를 만들었습니다. 또한 다양한 콘텐츠를 포함하는 5개의 스팬 요소를 추가했습니다.

JavaScript에서는 div 요소의 ID를 사용하여 액세스합니다. 그런 다음 태그 이름으로 div 요소의 하위 요소인 모든 범위 요소에 액세스합니다. 다음으로 for 루프를 사용하여 범위 요소 배열을 반복하고 각 범위 요소의 내부 HTML을 가져옵니다.

출력에서 범위 요소의 내용을 볼 수 있습니다.

으아악

예 2

아래 예에서는 ID가 "content"인 div 요소를 만들었습니다. div 요소에는 여러 개의 "

", "" 및 "" 요소가 하위 요소로 무작위 순서로 포함되어 있지만 우리는 범위 요소만 추출합니다.

JavaScript에서는 div 요소와 하위 범위 요소에 액세스합니다. 그런 다음, 범위 요소의 내용을 읽고 그 내용을 목록에 추가하기만 하면 됩니다.

으아악

예 3

이 예에서는 스팬 태그에 과일 이름을 추가하고 div 태그에 과일 설명을 추가했습니다. 따라서 상위 div에는 하위 요소로span 및 div 요소가 포함됩니다.

JavaScript에서는 "children" 속성을 사용하여 div 요소의 모든 하위 요소를 가져옵니다. 그런 다음 모든 하위 요소를 반복합니다. for 루프에서는 "tagName" 속성을 사용하여 현재 요소가 "span" 요소인지 확인합니다. 그렇다면 내용을 읽고 목록에 추가합니다. 그렇지 않으면 계속 반복합니다.

으아악

결론

JavaScript를 사용하여 div 요소의 모든 범위 요소를 동적으로 읽는 방법을 배웠습니다. 처음 두 예제에서는 모든 범위 요소에 액세스한 다음 반복했습니다. 세 번째 예에서는 div 요소의 모든 하위 요소를 반복하고 반복하는 동안 범위 요소를 식별합니다.

위 내용은 div의 모든 범위를 동적으로 읽는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!