node
-
DOM - 노드의 관계를 통한 접근프론트엔드/DOM 2020. 10. 7. 04:57
DOM의 각 요소 노드에 접근하는 방법은 매우 다양하다. 기본 제공 메서드를 통해 'id', 'class', 'tagname'을 통해서 접근하는 방법이 가장 쉽다. 그리고 다음으로 많이 쓰이는 것은 노드의 관계를 이용한 접근 방법이다. 이게 무슨 이야기냐면 다음과 같다. DOM은 트리 요소로 객체들이 구조화되어 있다. 1번 2번 3번 4번 예를 들어 위의 코드의 요소 노드들의 상관 관계 구조도를 그리면 다음과 같다. HTML 문서 구조상 위아래 관계의 노드는 부모 자식 관계를 맺고 있다. 그리고 동등한 관계의 노드는 형제 관계를 맺고 있다. 결국 노드든 DOM Tree 구조상 다른 노드와 부모, 형제 관계를 맺는다. 그리고 이러한 관계를 이용해 접근해줄 수 있는 프로퍼티가 제공된다. 이름 설명 paren..
-
DOM(Document Object Model)프론트엔드/프론트엔드 이론 2020. 9. 18. 01:36
DOM이란? 문서 객체 모델 DOM은 Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 interface다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍언어(흔히 자바스크립트)가 DOM 구조에 접근할 수 있는 방법을 제공한다. 렌더링 엔진이 텍스트 파일로 이뤄진 문서를 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 사용하는 구조 모델을 DOM이라 한다. DOM트리란? 브라우저가 웹서버로부터 받은 정보는 복잡하게 섞여있다. 렌더링 엔진은 이것을 브라우저가 쉽게 이해하기 위해 정리한다. 그 과정에서 모든 요소, 요소의 어트리뷰터(속성), 텍스트를 각각의 개체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이..