[자바스크립트] DOM 요소에 접근하기 (DOM이란? DOM API 정리)

문서객체모델(DOM)

DOM(Document Object Model)

• Document Object Model의 줄임말로 일반적으로 DOM이라고 부른다
• DOM이란 HTML 문서(document)를 객체 기반 모델로 표현한것을 말한다
• HTML 문서의 모든 요소를 자바스크립트로 조작하기 위해 객체로 해석한다
• DOM을 사용하면 웹 문서의 모든 요소를 객체로 해석이 가능해 웹 문서의 텍스트, 이미지, 표 등 모든 요소를 객체로 생성, 접근, 수정, 삭제가 가능하다

Document

• HTML 문서가 웹 브라우저에 로드되면 document 오브젝트가 된다
• document 오브젝트는 HTML 문서의 최상단 노드다
• document 오브젝트는 window 오브젝트의 프로퍼티다 즉 window.document로 접근할 수 있다
• document를 사용하면 자바스크립트에서 웹 문서의 노드를 전부 인식할 수 있기 때문에 수정도 가능하다

DOM Tree

웹 문서(HTML document)가 DOM으로 어떻게 구성되는지 이해를 해야 자바스크립트로 웹 문서를 제어할수 있다. 이때 DOM의 구조를 쉽게 파악하기 위해 부모, 자식 요소를 나무와 같은 형태로 표현한것을 DOM Tree라고 한다.

• node: 웹 문서에 있는 요소나 속성을 나타낸다
  • 요소 노드: 웹 문서의 태그
  • 텍스트 노드: 태그가 품고 있는 텍스트 (요소 노드의 자식 노드)
  • 속성 노드: 태그의 속성 (요소 노드의 자식 노드)
  • 주석노드: 주석 처리된 텍스트
• branch: 노드와 노드의 연결 관계

 

DOM API

1. DOM 요소에 접근하기

DOM 요소에 접근한다는 것: 자바스크립트로 프로그램에 사용할 요소(HTML element)에 접근하는 것

 

1. Document.getElementById()

• DOM 요소를 id 선택자로 접근하는 document 메서드

2. Document.getElementsByClassName()

• DOM 요소를 class 선택자로 접근하는 document 메서드
• getElementsByClassName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 element에 s가 붙는다

3. Element.getElementsByTagName()

• DOM 요소를 태그 이름으로 접근하는 element 메서드
• id나 class 선택자가 없는 DOM 요소에 접근할때 사용
• getElementsByTagName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 element에 s가 붙는다

4. Document.querySelector(), Document.querySelectorAll()

• DOM 요소를 다양한 방법으로 찾아주는 document 메서드
• id, class, 태그이름으로 모두 요소에 접근이 가능하다
• querySelector()는 인덱스 번호가 0번인 요소 하나만 리턴한다
• querySelectorsAll()은 모든 요소를 리턴한다
• querySelectorsAll()로 받아온 여러 요소는 유사 배열 형태로 저장된다

 

2. DOM 요소의 속성 가져오기, 수정하기

1. Element.getAttribute(attributeName)

DOM 요소의 속성을 가져오는 element 메서드

 

2. Element.setAttribute(name, value)

접근한 DOM 요소의 속성 값을 변경하는 element 메서드

 

3. DOM에 요소 추가하기

1. Document.createElement(tagName)

새 요소 노드를 만든다

 

2. Document.createTextNode(text)

텍스트 노드를 만든다

 

3. Document.createAttribute(name)

속성 노드를 만든다

 

4. Element.setAttributeNode(attribute)

속성 노드를 요소 노드에 연결한다

 

5. Element.setAttribute(name, value)

속성 노드를 만들고 값도 넣어준다