DOM
- DOM은 Document Object Model의 약자로, 웹 피이지의 구조와 콘텐츠를 표현하는 데 사용되는 API를 말합니다.
- 웹 페이지를 스크립트나 프로그래밍 언어와 연결하여 상호작용할 수 있도록 해줍니다.
- 문서를 논리적인 트리 구조로 표현하며, 각 노느에는 객체가 포함됩니다.
- DOM메서드를 사용하면 문서의 구조, 스타일 또는 콘텐츠를 프로그래밍적으로 변경할 수 있습니다.
- 웹 브라우저에서 HTML, XML 문서를 표현하는데 사용되며, 문서를 노드 트리로 나타냅니다. 또한 노드를 생성, 이동 및 변경할 수 있으며, 이벤트 리스너를 추가할 수 있습니다.
DOM 메서드
- getElementById : 주어진 ID를 지니고 있는 요소를 DOM 트리에서 찾아서 접근하는데 사용됩니다.
- getElementsByTagName
- querySelector : CSS 선택자를 사용하여 요소를 선택하는 데 사용됩니다. querySelectorAll()메서드를 사용하면 여러개의 요소를 선택할 수 있습니다.
- appendChild: 특정 부모 노드의 자식 노드 목록에 새로운 노드를 추가하는데 사용됩니다. 즉 새로운 요소를 기존 요소의 자식으로 추가할 수 있습니다.
- innertHTML : 요소의 내부 HTML 콘텐츠를 나타내는 데 사용됩니다. innerHTML를 사용하면 HTML요소의 내용을 가져오거나 변경할 수 있습니다.
- removeChild: 특정 부모 노드에서 자식 노드를 제거하는 데 사용됩니다. 제거하려는 요소를 부모 요소에서 삭제할 수 있습니다.
- createDocumentFragment(): 비어있는 DocumentFragment를 생성하는 데 사용됩니다. DocumentFragement는 메모리상에 존재하는 가상의 컨테이너로, 여러 개의 요소를 일괄적으로 추가하거나 조작할 때 유용합니다.
- addEventListener() : 특정 이벤트가 발생했을 때 실행할 함수를 등록하는 데 사용됩니다. 예를 들어 클릭 이벤트가 발생했을 때 실행할 함수를 등록할 수 있습니다.
노드
자바스크립트에서 "노드"는 HTML 문서의 구성 요소를 나타내는 추상적인 개념입니다. HTML 파일에 있는 <p>, <div>, <section> 등과 같은 HTML 요소 뿐만 아니라 HTML 주석, 줄 바꿈, 텍스트 내용 및 HTML 속성도 포함됩니다. 브라우저는 HTML 파일을 읽고 W3C HTML DOM 표준에 따라 HTML 문서를 개별 노드로 분해합니다.
- <p>,<div>,<section>등은 요소 노드로 처리됩니다.
- 주석(comment)는 주석 노드로 처리됩니다.
- 텍스트 객체는 텍스트 노드로 줄 바꿈 또한 텍스트 노드로 처리됩니다.
※ 모든 HTML 요소는 노드가 되지만 모든 노드가 요소는 아니라는 점에 주의가 필요합니다.
노드의 종류
- 요소(Element) 노드 : HTML 요소를 나타냅니다. <p>, <div>, <section>등이 이에 해당합니다. 요소 노드는 HTML 문서의 구성 요소를 표현하며, 다른 노드를 자식으로 가질 수 있습니다.
- 속성(Attribute) 노드 : HTML 요소의 속성을 나타냅니다. class, id, src 등이 이에 해당합니다. 속성 노드는 텍스트 노드를 자식으로 가지며, 특정 요ㅗ소에 대한 정보를 제공합니다.
- 텍스트(text) 노드 : HTML 요소 내의 텍스트 콘텐츠를 나타냅니다. 예를 들어 <p> 요소 내의 텍스트가 텍스트 노드입니다. 텍스트 노드는 자식을 가질 수 없으며. 특정 요소의 내용을 담고 있습니다.
- 주석(Comment) 노드 : HTML 문서의 주석을 나타냅니다. 주석 노드는 텍스트 노드를 자식으로 가지며, 주석을 표현합니다.
- 문서(Document) 노드 : HTML 문서 전체를 나타냅니다. 문서 노드는 다른 모든 노드의 최상위 부모 노드이며, DOM의 시작접입니다. 모든 노드는 문서 노르를 통해 접근할 수 있습니다.
노드의 관계
모드 노드는 서로 계층적 관계를 맺고 있습니다. 노드의 관계의 종류에는 부모 노드, 자식 노드, 형제 노드 3가지가 존재합니다.
- 부모 노드 : 특정 노드의 상위 노드를 나타냅니다. 모든 노드는 하나의 부모를 가집니다. 단 최상위 노드인 루트 노드는 부모 노드가 없습니다.
- 자식 노드 : 특정 노드의 하위 노드를 나타냅니다. 노드는 여러 개의 자식을 가질 수 있습니다.
- 형제 노드 : 같은 부모를 가지는 노드들을 나타냅니다. 형제 노드는 같은 부모를 가지므로 서로 연결되어 있습니다.
위와같은 노드 간의 관계를 통해 DOM 트리를 탐색하고, 노드를 추가, 수정 또는 삭제할 수 있습니다.