JavaScript에서 요소의 첫 번째 자식 추출

1. Node.firstChild를 사용하여 JavaScript에서 요소의 첫 번째 하위 항목 추출
2. Node.childNodes를 사용하여 JavaScript에서 요소의 첫 번째 자식 추출
3. Element.children을 사용하여 JavaScript에서 요소의 첫 번째 자식 추출

오늘 포스트에서는 JavaScript에서 요소의 첫 번째 자식을 추출하는 방법을 배웁니다.

Node.firstChild를 사용하여 JavaScript에서 요소의 첫 번째 하위 항목 추출

Node.firstChild는 트리에서 노드의 첫 번째 자식을 반환하거나 노드에 자식이 없으면 null을 반환합니다. Node 인터페이스의 읽기 전용 ‘firstChild’ 속성입니다.

통사론:

Node.firstChild

예를 들어 Hello World!를 표시하는 단락 태그가 있습니다. 다른 span 태그 안에 있는 텍스트입니다.

HTML 코드:

<p id="firstPara">
    <span>Hello World!</span>
</p>

자바스크립트 코드:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.firstChild);

출력:

"#text"

브라우저에서 위의 코드를 실행하면 브라우저 콘솔에 #text가 표시됩니다. 단락 끝 태그와 범위 시작 태그 사이에 공백을 유지하기 위해 기본적으로 텍스트 노드가 삽입되기 때문입니다.

각 공백은 단일 공백에서 여러 공백, 줄 바꿈, 탭 등으로 자동으로 #text 노드를 만듭니다.

텍스트 노드 문제를 방지하려면 소스에서 공백을 제거하거나 Element.firstElementChild를 사용하여 첫 번째 요소 노드만 반환할 수 있습니다.

문서 여기에서 firstChild에 대한 자세한 정보를 찾을 수 있습니다.

Node.childNodes를 사용하여 JavaScript에서 요소의 첫 번째 자식 추출

‘Node.childNodes’는 첫 번째 하위 노드에 할당된 인덱스 0과 함께 지정된 요소의 하위 노드의 활성 NodeList를 반환합니다. 이것은 Node 인터페이스의 읽기 전용 childNodes 속성입니다.

하위 노드에는 항목, 텍스트 및 설명이 포함됩니다.

노드 컬렉션의 요소는 문자열이 아니라 개체입니다. 노드 개체에서 데이터를 검색하려면 해당 속성을 사용합니다.

예를 들어 첫 번째 하위 노드의 이름을 가져오려면 elementNodeReference.childNodes[0].nodeName을 사용할 수 있습니다.

ChildNodes는 기본적으로 요소와 비요소를 모두 포함하는 모든 하위 노드를 포함합니다. 노드의 자식을 포함하는 활성 NodeList를 반환합니다.

문서 여기에서 childNodes에 대한 자세한 정보를 찾을 수 있습니다.

예를 들어 Hello World!를 표시하는 단락 태그가 있습니다. 다른 span 태그 안에 있는 텍스트입니다.

HTML 코드:

<p id="firstPara">
    <span>Hello World!</span>
</p>

자바스크립트 코드:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.childNodes[0]);

출력:

"#text"

이전 섹션과 유사하게 기본적으로 단락 태그의 끝과 스팬 태그의 여는 부분 사이에 공백을 유지하기 위해 텍스트 노드가 삽입됩니다.

Element.children을 사용하여 JavaScript에서 요소의 첫 번째 자식 추출

Element.children 속성은 호출된 요소의 모든 자식을 포함하는 라이브 HTML 컬렉션을 반환합니다.

Element.children과 Node.childNodes의 유일한 차이점은 Element.children에는 요소 노드만 포함되는 반면 Node.childNodes에는 텍스트 및 주석과 같은 비요소 노드를 포함하여 모든 자식 노드가 포함된다는 것입니다.

HTML 컬렉션은 노드의 DOM 요소 자식에 대한 순서가 지정된 활성 컬렉션입니다. item() 메서드를 사용하여 컬렉션의 각 하위 노드에 액세스할 수 있습니다.

문서 여기에서 자녀에 대한 자세한 정보를 찾을 수 있습니다.

예를 들어 Hello World!를 표시하는 단락 태그가 있습니다. 다른 span 태그 안에 있는 텍스트입니다.

HTML 코드:

<p id="firstPara">
    <span>Hello World!</span>
</p>

자바스크립트 코드:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.children[0]);

출력:

"Hello World!"

브라우저에서 위의 코드를 실행하면 브라우저 콘솔에 "Hello World!"가 표시됩니다. 이는 이 속성이 호출 노드의 DOM 요소만 반환하기 때문입니다.