JavaScript에서 DOM 트리는 많은 노드 목록을 포함하는 계층 구조를 따릅니다. 구조는 루트 노드(문서)에서 시작하여 부모 및 자식 노드와 함께 추가됩니다. 이러한 자식 노드에 액세스하기 위해 JavaScript는 ' 자식노드 ' 재산. 이 속성은 사용자가 연결된 상위 요소의 전체 또는 특정 하위 노드에 액세스하는 데 도움이 됩니다.
이 게시물은 목표에 대해 자세히 설명하고 JavaScript에서 HTML DOM 요소 'childNodes' 속성의 작동을 설명합니다.
JavaScript에서 HTML DOM 요소 'childNodes' 속성은 무엇입니까?
“ 자식노드 ”는 NodeList 객체의 형태로 요소의 모든 자식 노드 목록을 반환하는 읽기 전용 속성입니다. 이 특수 속성을 사용하여 부모 요소의 특정 자식 노드에 액세스할 수도 있습니다. 하위 노드는 '0(영)' 인덱스에서 시작합니다. 또한 공백, 주석 및 텍스트 노드도 자식 노드로 간주됩니다.
통사론
element.childNodes
위에서 일반화된 구문은 대상 요소의 자식 노드를 포함하는 NodeList 개체를 반환합니다.
위에서 정의한 구문을 실제로 사용해 봅시다.
HTML 코드
먼저 명시된 HTML 코드를 살펴보십시오.
< 사업부 ID = '사업부' 스타일 = '테두리: 2px 단색 검정; 높이: 200px; 너비: 250px; 패딩: 10px' >< h2 > 첫 번째 제목 h2 >
< h3 > 두 번째 제목 h3 >
< 피 > 첫 번째 단락 피 >
< 피 > 두 번째 단락 피 >
사업부 >
< 피 ID = '을 위한' > 피 >
위의 코드 라인에서:
- 을 추가하다 ' <사업부> ” id가 'Div'인 요소는 명시된(테두리, 높이 및 너비) 속성의 도움으로 스타일이 지정됩니다.
- '' 요소 내에서 각각 두 개의 제목과 두 개의 단락을 정의합니다.
- 마지막으로 “ ” 태그는 ID가 “para”인 빈 단락을 포함합니다.
메모: 명시된 HTML 코드는 이 게시물 전체에서 고려됩니다.
예 1: 'childNodes' 속성을 적용하여 특정 요소의 총 자식 노드 수 가져오기
이 예에서는 'childNodes' 및 'length' 속성을 사용하여 특정 부모 요소에 있는 총 자식 노드 수를 가져옵니다.
자바스크립트 코드
주어진 코드를 따르자:
< 스크립트 >
const 요소 = document.getElementById ( '사업부' ) ;
허락하다 숫자 = elem.childNodes.length;
문서.getElementById ( '을 위한' ) .innerHTML = '값: ' + 번호;
스크립트 >위의 코드 줄에서:
- 'elem' 변수는 ' getElementById() ” 메서드를 사용하여 id가 “Div”인 상위 요소에 액세스합니다.
- 'num' 변수는 ' 자식노드 ' 그리고 ' 길이 ” 속성을 사용하여 액세스된 “” 요소에 있는 자식 노드 수를 가져옵니다.
- 마지막으로 'getElementById()' 메서드는 'num' 변수 값을 추가하기 위해 ID 'para'를 통해 포함된 빈 단락을 가져옵니다.
산출
출력은 총 ' 9 ” 요소 사이의 공백을 포함하여 주어진 “
” 요소의 자식 노드.예 2: 'childNodes' 속성을 적용하여 특정 하위 노드의 이름 가져오기
'childNodes' 속성은 자식 노드 이름을 얻기 위해 'nodeName' 속성과 함께 사용할 수도 있습니다. 실전에서 봅시다.
자바스크립트 코드
다음 코드를 살펴보십시오.
< 스크립트 >
const 요소 = document.getElementById ( '사업부' ) ;
허락하다 숫자 = elem.childNodes [ 1 ] .노드이름;
문서.getElementById ( '을 위한' ) .innerHTML = '요소: ' +숫자;
스크립트 >여기서 “ 자식노드 ” 속성은 “ 노드 이름 ” 속성을 사용하여 액세스된 인덱스 즉, “1”을 기반으로 지정된 자식 노드 이름을 가져옵니다.
산출
출력에는 자식 노드의 이름, 즉 지정된 인덱스에 대한 'H2' 요소가 표시됩니다.
예제 3: 'childNodes' 속성을 적용하여 특정 하위 노드의 텍스트 색상 변경
이 예제에서는 논의된 속성을 사용하여 대상 인덱스 자식의 색상을 변경합니다.
자바스크립트 코드
다음 코드를 고려하십시오.
< 스크립트 >
문서.getElementById ( '사업부' ) .childNodes [ 삼 ] .스타일.색상 = '녹색' ;
스크립트 >여기서 “ getElementById() ” 메서드는 id “Div”를 통해 부모 “
” 요소를 가져오고 “ 자식노드 ” 재산, 각각. 그 후 ' 스타일.색상 ” 속성을 사용하여 액세스한 자식 노드의 텍스트 색상을 변경합니다.산출
지정된 하위 노드의 텍스트 색상이 적절하게 변경되었음을 출력에서 확인합니다.
결론
자바스크립트에서 ' 자식노드 ” 속성은 대상 HTML 요소의 자식 노드를 포함하는 nodeList 개체를 검색합니다. 하위 노드는 'childNodes' 속성으로 인덱스 번호를 지정하여 한 번에 모두 액세스하거나 원하는 노드에 액세스할 수 있습니다. 이 속성을 사용하면 JavaScript 함수를 실행하여 액세스한 자식 노드에서 특수 작업을 수행할 수 있습니다. 이 기사에서는 JavaScript에서 'childNodes' 속성을 적용하는 방법에 대해 자세히 설명했습니다.