DOM

KiteJun92·2021년 11월 8일
1

JS

목록 보기
2/2

DOM

DOM(Document Object Model)

 - HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것
   -> HTML 문서에 작성된 내용을 트리구조로 나타낼 때,
      각각의 태그, TEXT, COMMENT 등을 Node라고 함
document : {
	DOCTYPE : html,
    	HTML : {
        	HEAD : {
            		TITLE :
                    	STYLE :
                        META : 
                        },
                        BODY : {
                        	H1 : { TEXT : "제목", ATTRIBUTE : "속성"},
                            	COMMENT : { TEXT : "주석 내용" },
   	                        DIV : { ... }
                            	}
               }
           }

Node

parentNode : 부모 노드
childNodes : 자식 노드 리스트
firstChild : 첫 번째 자식 노드
lastChild : 마지막 자식 노드
childNodes[index] : index번째 자식 노드
previousSibling : 이전 형제 노드
nextSibling : 다음 형제 노드

Node VS Element

Node : 태그(요소 노드), 속성, 주석, 내용 등을 모두 노드라고 표현함.
Element : Node의 하위 개념으로 요소 노드만을 지칭한다.

Element만 선택하는 방법
children : 자식 요소만 선택
parentElement : 부모 요소 선택

firstElementChild : 첫 번째 자식 요소를 반환하고 없으면 null을 반환한다.
lastElementChild : 마지막 자식 요소 반환

previousElementSibling : 이전 형제 요소 (없으면 null 반환)
nextElementSibling : 다음 형제 요소 (없으면 null 반환)

                    
profile
전데용

0개의 댓글