DOM

DOM 이란 HTML 또는 XML document와 상호작용하고 표현하는 API이다

 

페이지의 구조, 컨텐츠 및 스타일을 구현할 수 있는 인터페이스이다.

 

다음은 자바스크립트에 의해 구현되는 DOM의 예시이다.

let newdiv = document.querySelector('.id')
let divElement = document.createElement('div')
divElement.classList.add('newid');
divElement.textContent = document.getElementById('namebox').value;
newdiv.appendChild(divElement);

 

DOM의 요소를 선택하는 방법에 대해 하나하나씩 찾아보기로 하자.

 

---

querySelector를 사용한 요소 선택

 

• document.querySelector  :  CSS선택자에 대한 가장 첫번째 DOM element를 선택한다
• document.querySelectorAll : CSS선택자에 대한 모든 DOM element를 선택한다.

위의 예제를 보면

let newdiv = document.querySelector('.id')

변수 newdiv에 'id' 라는 id를 가진 첫번째 DOM element를 선택해 올 수 있다는 것을 알 수 있다.

 

 

id/class/tag name을 이용한 요소 선택

• getElementById  :  일치하는 id를 가진 요소를 선택
• getElementByClassName : 일치하는 class를 가진 모든 요소를 선택
• getElementByTagName : 주어진 tag명을 반환

document.getElementById('namebox').value;

위의 예제에서 해당 id를 가진 요소의 value값을 반환한다.

 

부모,형제,자식

• parentElement : element의 부모 호출
• children : element의 자식 호출

---

DOM 생성

 

• createElement() : DOM element를 생성하여 반환

let divElement = document.createElement('div')

divElement라는 변수를 만든 후 'div' HTML element를 만들어 준다.

 

classList를 이용한 class 제어하기

• divElement.classList.add('class')     :  class값 추가
• divElement.classList.remove('class')  : class값 제거
• divElelment.classList.toggle('class')  :  class값이 존재한다면 추가, 아니면 제거

divElement.classList.add('newid');

해당 변수에 class 값은 'newid'를 추가해준다.

 

 

• textContent : 텍스트 형태로 공백 값 까지도 그대로 가져옴
• innerHTML : HTML 형태 그대로 가져옴
• innerText : 텍스트 형태로 불필요한 공백은 제거하고 값을 가져옴

divElement.textContent = document.getElementById('namebox').value;

divElement에 'namebox' 라는 id를 가진 요소의 value값을 텍스트 형태로 가져오게 된다.

 

• appendChild  : 부모 노드에 자식 노드를 추가

newdiv.appendChild(divElement);

newdiv라는 부모 노드에 자식노드로 divElement를 추가해준다.

 

---

DOM Event

 

해당 DOM Element에 Event를 걸어주는 역할을 한다.

 

• target.addEventListener( type, listener) : 

function test() {
  console.log('버튼을 클릭하셨습니다')
}


const button = document.getElementById("id");
button.addEventListener("click", test);

target에는 이벤트를 추가하고자 하는 대상, type에는 하고자 하는 이벤트, listener에는 함수를 넣으면 된다.

 

 

또는 onclock 등 직접 Event interface를 적용할 수 도 있다.

 

button.onclick = handleClick; 

function handleClick() { 
  console.log('버튼을 클릭하셨습니다.');
}