[JavaScript] DOM 다루기
JavaScript에서 DOM을 다뤄보자
DOM이란?
DOM을 풀어서 약자로 써보면 Document Object Model의 약자입니다.
Document는 문서이고 Object는 객체로 번역이 됩니다. Model은 말그대로 모델로 많이씁니다.
즉 번역하면 문서 객체 모델이라고 할 수 있는데 이렇게 보면 이해가 잘 가지 않습니다.
그럼 문서 객체란 것이 도대체 무엇일까요??
문서 객체란 <html>이나 <body> 같은 html 문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고 합니다.
예를 들어서 보겠습니다.
다음과 같이 id가 'target'인 <div>태그가 있습니다.
가장 위쪽에 타겟이 이에 해당되는 부분이고 이 부분을 JavaScript에서 사용할 수 있는 객체로 가져와보겠습니다.
잠시 뒤에 알아보겠지만 getElementById는 document 객체의 함수로 id값을 매개변수로 입력해서 dom 객체를 가져올 수 있습니다.
a 변수에 id가 'target'인 DOM 객체를 담았고 typeof 함수로 a의 타입을 찍어보니 object가 나온 것을 확인할 수 있습니다.
이처럼 html의 <div>, <body> 등의 태그를 JavaScript의 객체로 사용할 수 있도록 해주는 것이 DOM 객체입니다.
참고로 DOM은 다음과 같은 트리 구조로 되어 있습니다.
이제 조금 이해가 가실까요?
그럼 지금부터 DOM을 어떻게 다루는지 살펴보겠습니다.
다음과 같은 html 코드를 입력해서 실습해 보겠습니다.
특정 요소 찾기
- document.getElementById('아이디')
- document.querySelector('css')
- document.getElementsByClassName('class')
- document.getElementsByTagName('tag')
1. document.getElementById()
첫번째로 document.getElementById() 함수는 아까 설명한대로 매개변수로 id를 입력받아 해당 id값을 가지고 있는 태그를 DOM 객체로 가져옵니다.
<div id="target">타겟</div>
여기서는 id값이 'target' 인 div 태그를 가져오는 것을 확인해 볼 수 있습니다.
두번째로는 querySelector() 함수입니다.
querySelector() 함수도 DOM객체를 가져오는 함수이며
id값을 가져올때는 '#{id}' '#' 뒤에 id값을 입력해서 가져올 수 있고
class를 가져올때는 '.class' '.' 뒤에 class를 입력해서 DOM 객체를 가져올 수 있습니다.
3. getElementsByClassName()
세번째는 getElementsByClassName() 함수입니다.
getElementsByClassName() 함수는 매개변수로 class명을 입력받아서 해당 클래스명을 가지고 있는 태그들을 객체로 담고 있는 리스트를 반환해줍니다.
class명이 'target-class'인 태그 두개를 리스트 객체로 가져온 것을 확인해 볼 수 있습니다.
4. getElementsByTagName()
네번째로 getElementsByTagName() 함수입니다.
getElementsByTagName() 함수는 매개변수로 태그이름을 입력받아서 해당 태그들을 모두 리스트에 담아 반환합니다.
'div' 태그를 입력하여 html 코드에 있는 div 태그 5개를 리스트에 담아 반환된 것 확인할 수 있습니다.
인접 노드 접근
- Node.children : 자식들
- Node.firstElementChild, Node.lastElementChild : 첫번째, 마지막 자식
- Node.previouseElementSibling, nextElementSibling : 이전 형제, 이후 형제
- Node.parentElement : 부모
1. Node.children
첫번째로 Node.children 입니다.
Node.children는 해당 태그의 자식 태그들을 받아올 수 있습니다.
위 실습 예제에서는 id값이 'navigation-menu'인 ul태그를 받아와서
해당 노드의 자식태그인 li 태그들을 받아오는 것을 확인할 수 있습니다.
2. Node.firstElementChild, Node.lastElementChild
두번째는 Node.firstElementChild 와 Node.lastElementChild 입니다.
각각 부모 노드의 첫번째 자식요소와 마지막 자식요소를 가져오는 함수입니다.
실습 예제를 보시면 id값이 'navigation-menu'인 ul태그를 가져와서
ul태그의 첫번째 자식 요소인 <li>상점</li> 과 마지막 자식 요소인 <li>마이페이지</li> 를 가져오는 것을 확인할 수 있습니다.
3. Node.previouseElementSibling, nextElementSibling
세번째로 Node.previouseElementSibling 와 Node.nextElementSibling 입니다.
각각 해당 노드의 이전 노드와 다음 노드를 가져오는 함수입니다.
실습 예제를 보면 id값이 'target2'인 <div id="target2">타겟2</div> 를 가져와서
해당 태그의 이전 노드인 <div id="target">타겟</div> 와
다음 노드인 <div class="target-class">타겟 클래스1</div> 를 가져온 것을 확인할 수 있습니다.
4. Node.parentElement
네번째는 Node.parentElement 함수입니다.
Node.parentElement는 해당 노드의 부모 노드를 가져오는 함수입니다.
실습 예제를 보면 id값이 'navigation-menu'인 ul태그를 가져와서 Node.parentElement 함수를 적용하니
ul태그의 부모태그인 <header></header>가 가져와진 것을 확인해볼 수 있습니다.
요소 만들기
- document.createElement(tag)
- Node.appendChild(Node)
- Node.insertBefore(newNode, refNode)
마지막으로 요소만들기 입니다.
1. document.createElement(tag), Node.appendChild(Node)
document.createElement()는 매개변수로 html태그명을 입력하면 해당 DOM 객체를 생성해준다.
다음과 같이 'p'를 입력하면 p태그를 생성해주는 것을 확인할 수 있다.
appendChild는 해당 노드의 맨 아래쪽에 매개변수로 입력한 DOM 객체를 넣어준다.
위 예제에서는 body 태그 가장 아래쪽에 방금 생성한 p태그를 넣어주고 있다.
innerHtml은 DOM 객체에 값을 할당해준다. 시각적으로 확인하기 위해 '테스트' 라는 값을 넣어주었다.
위와 같이 body 태그 가장 아래쪽에 p태그가 들어가 있는 것을 확인해 볼 수 있다.
2. Node.insertBefore(newNode, refNode)
Node.insertBefore() 함수는 두번째 매개변수로 받는 DOM을 첫번째 매개변수로 받는 DOM 앞에 삽입합니다.
위 예제에서는 id값이 'target'인 DOM 태그를 가져와서 새로 생성한 'p태그' 를 앞에 위치시키고 있습니다.
페이지를 확인해보면 body 태그 안쪽에 있는 '타겟' 앞쪽에 방금 생성한 p태그인 'dom 테스트!!!'가 삽입된 걸 확인할 수 있습니다.
지금까지 JavaScript 기초인 DOM 다루는 방법 몆가지를 살펴보았습니다.
저처럼 이제 막 프론트 공부를 시작하시는 분들께 조금이나마 도움이 되었으면 하네요!
REFRENCE