글을 시작하며..
DOM이란, html이나 xml 같은 문서에 요소들을 트리구조의 형태로 표현하여 조작이 가능하게끔 해주는 인터페이스입니다.
DOM에 대해 자세하게 알기 전 우선 가족 족보에 대해 생각해봅시다.
왼쪽의 사진을 예시로 들어 설명하도록 하겠습니다.
부모님으로부터 아들과 딸이 있고 이들은 부모 자식의 관계입니다.
또 아들과 딸은 서로 형제 관계이며, 손자와 손녀와는 부모 자식 관계라고도 할 수 있습니다.
HTML 문서와 족보를 연관지어서 생각해본다면
부모님은 <html>, 아들과 딸을 각각 <head>와 <body>라고 할 수 있고,
그 아래에 손자와 손녀들은 <head>와 <body> 안에 있는
다양한 요소들이라고 할 수 있습니다.
이러한 트리 구조를 통해 HTML 문서의 각 요소를 접근, 수정, 생성 등을 하는 방법에 대해 글을 작성하도록 하겠습니다.
( 맨 마지막에 요약있습니다. )
1. Document
DOM은 Document Object Model의 약자 입니다. 여기에서 Document란 무엇일까요?
Document는 문서라는 뜻을 가지고 있습니다. 이 Document는 HTML문서를 가리키는 것이죠.
한마디로 'Document === HTML' 이라고 생각하시면 됩니다.
이 Document는 자바스크립트에서 객체 취급을 하기 때문에
자바스크립트에서 Document가 제공하는 메소드를 활용하여 HTML 요소들을 사용 할 수 있게 합니다.
2. 요소의 접근
요소에 접근 하는 방법은 여러가지가 있습니다. 하나하나 알아가도록 하겠습니다.
1. document.getElementById("아이디")
getElementById()는 document의 정적 메소드입니다.
이 방법은 아이디 값을 사용하여 요소에 접근하는 방식입니다.
아이디는 아이디 당 하나의 요소만 가리킬 수 있기 때문에 단일 요소로 반환됩니다.
2. document.getElementsByClassName("클래스")
getElementsByClassName()은 document의 정적 메소드입니다.
이 방법은 클래스 이름을 사용하여 요소에 접근하는 방식입니다.
클래스는 여러 개의 요소를 가리킬 수 있기 때문에
HTML 요소 중 해당 클래스를 가진 요소를 모두 배열의 형태로 반환됩니다.
3. document.getElementsByTagName("태그")
getElementsByTagName()은 document의 정적 메소드입니다.
이 방법은 태그 이름을 사용하여 요소에 접근하는 방식입니다.
태그도 클래스와 마찬가지로 여러 개의 요소를 가리킬 수 있기 때문에
HTML 요소 중 해당 태그를 가진 요소를 모두 배열의 형태로 반환됩니다.
4. document.querySelector("아이디 | 클래스 | 태그")
querySelector()는 document의 정적 메소드입니다.
이 방법은 아이디, 클래스, 태그 중 하나를 사용하여 요소에 접근하는 방식입니다.
요소를 CSS방식으로 검색하기 때문에
- 아이디 값 => #아이디 값
- 클래스 이름 => .클래스 이름
- 태그 이름 => 태그 이름
이러한 방식으로 인자를 작성하면 됩니다.
querySelector()는 지정한 인자를 기준으로 해당하는 첫번째 요소를 반환하기 때문에 단일 요소로 반환됩니다.
5. document.querySelectorAll("아이디 | 클래스 | 태그")
querySelectorAll()은 document의 정적 메소드입니다.
이 방법은 querySelector() 와 마찬가지로 아이디, 클래스, 태그 중 하나를 사용하여 요소에 접근하는 방식입니다.
요소 검색 방법도 CSS방식으로 동일합니다.
두 메소드의 차이점은 첫번째 요소만 반환하느냐, 모두 반환하느냐 입니다.
당연히 querySelectorAll() 메소드에 'All'이 붙어있으니 이 메소드가 해당 요소를 모두 반환하는 것 입니다.
그래서 querySelectorAll()dms 지정한 인자를 기준으로
해당하는 모든 요소를 반환하기 때문에 배열의 형태로 반환됩니다.
3. 요소 수정
HTML의 모든 요소들은 HTMLElement로 부터 상속받는 자식 요소들로
HTMLElement가 제공하는 메소드나 속성을 사용할 수 있는데요.
HTMLElement의 인스턴스 속성 중 하나인 innerText는 요소의 텍스트 콘텐트를 설정하거나 반환하는 속성으로
지정되어있는 텍스트를 수정할 수 있습니다.
또 다른 속성으로 style은 요소를 이용하면 요소의 스타일을 수정할 수도 있습니다.
4. 요소 생성&추가
요소를 새로 생성하기 위해서는 createElement()로 새롭게 만들 요소의 태그를 인자에 작성하여 생성합니다.
생성한 요소를 문서에 추가하려면 기존 HTML 문서에 있는 어떤 요소를 선택한 후
그 요소의 자식 요소로 생성한 요소를 추가해주면 되는데 이때 사용하는 속성은 appendCild()입니다.
const title = document.createElement('h1'); // 요소 생성
const body = document.querySelector('body'); // 부모 요소 지정
title.innerText = 'Hello';
body.appendChild(title); // 자식 요소로 추가글을 마무리하며..
이렇게 DOM을 이용하여 요소를 가져와서 바꾸기도, 요소를 새로 생성하는 법을 꼭 알고
이벤트와 함께 더 다채로운 코딩을 하는 멋찐 개발자가 됩시다. 글 읽어주셔서 감사합니다.
요약
Document란?
>> HTML문서를 가리키는 것
요소의 접근 방법
1. document.getElementById("아이디")
2. document.getElementsByClassName("클래스")
3. document.getElementsByTagName("태그")
4. document.querySelector("아이디 | 클래스 | 태그")
5. document.querySelectorAll("아이디 | 클래스 | 태그")
요소의 수정
>> HTMLElement가 제공하는 메소드나 속성을 사용하여 수정
요소 생성
>> document.createElement()
요소 추가
>> 부모요소.appendCild()
'져진의 JS 공부' 카테고리의 다른 글
| 이벤트란? (1) | 2024.09.25 |
|---|---|
| 함수? 함 배워볼까?? (0) | 2024.08.13 |
| Var는 사용하면 안되나Var... (0) | 2024.08.08 |
