본문 바로가기
728x90

DOM18

1.3 Subnode Objects Inherit From the Node Object 전형적인 돔 트리에 있는 각 노드 객체는 Node의 프로퍼티들과 메서드들을 상속한다. 문서에 있는 노드의 유형에 따라 다르지만, Node 객체를 상속하는 하위 노드 객체, 인터페이스 역시 존재 한다. 가장 일반적인 노드 인터페이스에 대해 브라우저에서 구현한 상속모델은 다음과 같다( 2021. 8. 19.
1.2 Node Object Types 자주 사용되는 노드들은 다음과 같다 DOCUMENT_NODE (e.g., window.document) ELEMENT_NODE(e.g., , ) ATTRIBUTE_NODE(e.g., class="c") TEXT_NODE(e.g, HTML문서에 존재하는 텍스트 캐릭터) DOCUMENT_FRAHMENT_NODE(e.g., document.createDocumentFragment()) DOCUMENT_TYPE_NODE(e.g, ) 위의 노드 프로퍼티들은 정적인 변수이며, 특정 노드 객체 타입에 대응되는 숫자를 저장하고 있다. ELEMENT_NODE(i.e., HTML *Element) 1 ATTRIBUTE_NODE(i.e., Attr) 2 TEXT_NODE(i.e., Text) 3 CDATA_SECTION_N.. 2021. 8. 18.
1.1 The Document Object Model Is a Hierarchy/Three of JavaScript Node Objects HTML 문서를 작성하게 되면 HTML 컨텐트가 다른 HTML 컨텐트를 감싸는 계층적인 구조가 되고 이는 트리로 표현된다. 이러한 계층적 구조는 HTML 문서에서 마크업을 들여쓰기 함으로써 시각적으로 확인이 가능하다. 브라우저는 HTML 문서를 로딩할때 이런 계층적 구조를 파싱해서 object node들로 이루어진 하나의 트리를 만들며 이 트리의 구조는 마크업이 가진 계층적 구조와 유사하다. 따라서 HTML문서는 브라우저에 의해 하나의 live document를 나타내는 object node로 구성된 트리구조로 변환 된다. DOM의 목적은 이렇게 변환된 live document를 JavaScript가 조작할 수 있도록 인터페이스를 제공하는 것이다. DOM의 시초는 XML 문서를 위한 API였고 현재는 H.. 2021. 8. 17.
0.0 intro 평소 js를 쓰면서 DOM에 대해 깊게 알고 싶다는 생각을 늘 했었다. 하지만 수 많은 블로그글을 찾아도, 책을 찾아도 늘 DOM에 대해 간략한 이론적 설명 정도만 나오고 나머지는 DOM에서 제공하는 메서드의 사용법 위주로 설명이 되어 있어서 항상 아쉬움이 존재했다. 그러던 중 DOM Enlightement: Exploring JavaScript and the Modern DOM이라는 DOM에 대해 이론적인 부분은 꽤나 상사하게 설명한 책을 알게 되었다. 내 블로그에서 DOM이라는 카테고리에 작성될 글은 모두 이 책을 읽고, 정리한 글이며, 각 챕터의 제목이 글의 제목이 될 예정이다. https://www.amazon.com/DOM-Enlightenment-Exploring-JavaScript-Moder.. 2021. 8. 17.
728x90

티스토리툴바