돔돔돔돔돔돔🎵 🐟 🐠 🐡 html과 js를 가깝게 해주는 DOM의 역할과 사용법에 대해 알아보자.
DOM의 정의
문서 객체 모델(The Document Object Model, DOM)이란 브라우저가 HTML 웹페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체(Object) 모델을 말한다.
쉽게말해서, 객체화한 모델을 통해 HTML 웹페이지와 js를 서로 잇는 역할을 하는 것이다.
HTML DOM 메소드와 프로퍼티
html 요소 불러오기
document.getElementById('id'): id이름 이용해서 요소를 불러온다.
document.getElementsByTagName('name'): tag이름 이용해서 요소를 불러온다.
document.getElementsByClassName('class'): class이름 이용해서 요소를 불러온다.html 요소 바꾸기
element.innerHTML = new html content: 새로운 내용으로 요소를 바꾼다.
element.attribute = new value: 속성 값을 바꾼다.
element.style.property = new style: 요소 스타일을 바꾼다.요소들 더하거나 삭제하기
document.createElement(element): 요소를 생성한다.
document.removeChild(element): 요소를 삭제한다.
document.appendChild(element): 요소를 더한다.
document.replaceChild(new, old): 요소를 대체한다.
<h1 class="test">Good Morning</h1>
<script>
const element = document.getElementById("test");
element.innerHTML = "Good Evening";
</script>
// "Good Morning"에서 "Good Evening"으로 바뀜.DOM 이벤트
해당프로그램에서 사용자가 어떤 동작을 하면 지정한 이벤트를 발생시킨다. 이벤트 종류는 워낙 많아서 필요할 때마다 찾아보는 것이 좋다.
UI 이벤트
load: 웹페이지의 로드가 완료됐을 경우
error: 브라우저가 js오류를 만났거나 요청한 자원이 없는 경우
scroll: 사용자가 페이지를 스크롤할 경우키보드 이벤트
onkeydown: 사용자가 모든 키를 눌렀을 경우
onkeypress: 실제로 글자가 써질 경우
onkeyup: 사용자가 키보드에서 손을 뗀 경우마우스 이벤트
click: 사용자가 요소를 클릭하는 경우
mouseup: 눌렀던 마우스 버튼을 떼는 경우
mousedown: 마우스를 누르고 있는 경우
mouseover: 요소 위로 마우스를 움직였을 경우
mouseout: 요소 바깥으로 마우스를 움직였을 경우form 이벤트
input: input요소값이 변경됐을 경우
submit: 사용자가 버튼키를 이용하여 폼을 제출할 경우
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>*getElement VS querySelector
둘 다 html 요소를 불러와 js에 연결해주는 역할을 한다. '굳이 두개가 있는 이유가 있을까' 궁금해서 차이점에 대해 알아보았다.
getElement는 HTMLCollection를 반환하고, querySelector는 NodeList를 반환한다고 한다.(무슨 소리지... 😳)
HTMLCollection의 경우 동적으로 DOM의 변경요소가 실시간으로 변경되는 반면,
NodeList의 경우 정적이기때문에 DOM의 변경요소가 실시간 변경되지 않는다.
<h1 class="a"></h1>
<h1 class="a"></h1>
<h1 class="a"></h1>
const htags = document.getElementByclassName('a');
for(i = 0; i < htags.length; i++) {
htags[i].className = 'b';
}
//결과는 "b,b,b"가 아닌 "b,a,b"가 나왔다.
<h1 class="b"></h1>
<h1 class="a"></h1>
<h1 class="b"></h1> 'live collection'이기때문에 이러한 문제가 발생했다.
0번째 인덱스에 접근하여 'a'를 'b'로 바꾸었다. 그 다음 i가 증감하여 index1번을 찾아야하는데, 실시간 변경탓에 0번을 제외한 나머지 두 요소 중 2번째가 index1이 되어버린다.
이런 문제를 해결하기 위해서 querySelector를 사용하면 된다.
*onclick VS addEventListener
두 메소드는 지정한 이벤트가 발생하면 function을 구현한다.
onclick에는 하나의 콜백만 지정할 수 있지만, addEventListener를 사용하면 여러 개의 이벤트 리스너를 추가할 수 있다. addEventListener사용하는 것이 더 감각적인 개발자라고 여겨지는 경향이 있다.
element.attachEvent('onclick', function() { /* do stuff here*/ });
element.addEventListener('click', function() { /* do stuff here*/ }, false);
