Way in Wayne

DOM-API

• [Javascript]DOM(2) node 탐색과 조작

  사부작사부작/Javascript 2022. 5. 1. 22:47

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 노드 탐색 요소 노드를 취득한 다음, 취득한 요소 노드를 기점으로 DOM 트리의 노드를 옮겨 다니며, 부모, 형제, 자식 노드 등을 탐색할 수 있다. parentNode, previousSibling, firstChild, childNodes 프로퍼티는 Node.prototype 메서드가 제공하고, 프로퍼티 키에 Element가 포함된 previosElementSibling과 nextElementSibling, children 프로퍼티는 Element.protoype이 제공한다. 노트 탐색 프로퍼티는 setter 없이 getter만 존재하는 참조만 가능한 읽기 전용 접근자 프로퍼티다. 1. 공백 텍스트 노드 HTML 요소 사이의 스페이스,..

  Read More
• [Javascript]DOM(1) node와 node 취득

  사부작사부작/Javascript 2022. 5. 1. 20:06

  #모던자바스크립트_딥다이브 스터디를 진행하면서 정리한 내용입니다. 노드 1. HTML 요소와 노드 객체 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. HTML 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 요소의 콘텐츠 영역에는 텍스뿐만 아니라 다른 HTML 요소가 포함될 수 있다. 이때 이러한 중첩 관계에 의해 계층적 부자관계가 형성된다. HTML 요소 간의 부자 관계를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리자료구조로 구성하고, 이것은 DOM 또는 DOM 트리라고 한다. (1)트리 자료구조 트리 자료구조는 노드들의 계층 구조로 이뤄진다. 트리 자료구조는 부모 노드와 자식 노드로 구성되어 노드 간의..

  Read More