JavaScript 문서객체모델(DOM)과 이벤트에 대한 이해
보고서 작성과 프로젝트 과제를 수행 하느라, 그 동안 미뤄왔던 JavaScript 공부를 마무리하였다
과제를 수행하면서 이것저것 흡수한 게 많은 덕분인지, 처음 시작할 때 보다 JavaScript 공부가 수월하였다
나름 성장한걸지도 모르겠다
공부하는 과정에서, 계속 중요하게 와닿던 부분인 문서객체모델(DOM)과 이벤트에 관해서 정리를 하려고 한다
시작해보겠다
문서객체모델 (Document Object Model)
HTML에서는 head, body, div, a 등 이러한 태그들을 요소라고 부른다 하지만 JavaScript 입장에서는 다르다
JavaScript에서는 이러한 HTML 요소들을 문서객체(Document Object)라고 부른다
그리고 이러한 문서객체에 접근/조작하는 JavaScript 객체들의 집합을 문서객체모델이라고 부른다
문서객체 접근 + 생성 + 삽입 + 삭제
document.body
document.head
document.title간단하게, 위와 같이 HTML 문서에 body, head, title 태그에 접근할 수 있다
document.queryselector(CSS 선택자) // 선택자에 해당하는 문서 객체 중, 하나의 요소만 접근
document.queryselectorAll(CSS 선택자) // 선택자에 해당하는 모든 문서 객체에 접근, 배열로 추출
document.addEventListener('DOMContentLoaded', ()=>{
const test = document.querySelector('td')
test.style.color = 'Red'
test.style.padding = '20px'
})
document.addEventListener('DOMContentLoaded', ()=>{
const test = document.querySelectorAll('td')
test.forEach((i)=>{
i.textContent = '<h1>테스트</h1>' // 단순 문자열로 삽입
i.innerHTML = '<h1>테스트</h1>' // HTML로 삽입
i.style.color = 'red'
i.style.backgroundColor = 'yellow'
})
})
혹은 위와 같이, 전체 문서중에서 특정 태그에만 접근할 수 있다
querySelectorAll의 경우는, 해당되는 모든 문서 객체를 가져와서 배열로 리턴하기 때문에 반복문을 사용해야한다
여기서 textContent은 '<h1>테스트</h1>' 가 그대로 출력되지만, innerHTML은 <h1>태그가 적용되어 출력된다
보안적으로 문제가 될 수 있기 때문에, 자주 사용하지는 않는 거 같다 addEventListener가 무엇인지는 아래, 이벤트에서 알아볼 것이다
document.addEventListener('DOMContentLoaded', ()=>{
const header = document.createElement('h1') // h1 문서 객체(요소) 생성
header.style.color = 'red' // 동적으로 객체 속성 추가
header.textContent = '삽입!' // 동적으로 객체 속성 추가
document.body.appendChild(header) // body에 자식으로 추가
document.body.removeChild(header) // body 객체의 자식 객체 삭제
header.parentNode.removeChild(header) // header의 부모 객체 접근
})문서객체에 접근뿐만 아니라, 위와 같이 문서객체 생성 + 삽입 + 삭제 또한 할 수 있다
이벤트에 대한 이해
이벤트에 대한 설명을 하기 전, 번호를 매기자면 아래와 같다
- 이벤트
- 이벤트 모델
- 이벤트 객체
- 이벤트 발생 객체
- 이벤트 리스너
먼저 이벤트에 대해서 알아보자
이벤트는 말 그대로 이벤트이다
마우스 우클릭, 드래그, 링크 클릭, 키보드 입력, 문서가 로딩 완료 됐을 때 등 브라우저에서는 셀 수 없을 만큼
수 많은 이벤트가 발생한다 이러한 이벤트는 JavaScript에서 컨트롤 할 수 있다
JavaScript에서, 이러한 이벤트에 연결하는 방법을 이벤트 모델이라고 부른다
이벤트 모델은 아래와 같이, 3가지가 존재한다
첫 번째 매개변수로는 이벤트를 지정하고, 두 번째 매개변수에는 이벤트 발생 시, 실행할 함수를 지정한다
// 인라인 이벤트 모델
<script>
const litener = (event) = > {}
</script>
<body onkeyup="listener(event)">
</body>
// 고전 이벤트 모델
document.body.onkeyup = (event) => {}
// 표준 이벤트 모델
document.body.addEventListener('keyup', (event) => {})
'keyup' 이벤트는 키보드에서 키가 떨어질 때 발생하는 이벤트이다
위와 같이 각 이벤트 모델들은, 'keyup'이라는 이벤트가 발생했을 때, 실행할 함수를 통해 이벤트를 컨트롤 한 것이다
여기서, 이벤트가 발생할 때, 실행하는 함수를 이벤트 리스너 혹은 이벤트 핸들러 라고한다
위에 그림을 참고하자
이벤트 모델을 통해 이벤트를 연결하였으면, 해당 이벤트가 발생하는 곳을 이벤트 발생 객체라고 한다
그리고 이벤트가 발생할 때는 이벤트 객체가 발생하는데, 이 객체는 이벤트 리스너의 첫 번째 매개변수로 들어간다
이러한 이벤트 객체는 이벤트에 대한 다양한 정보를 담고 있다
중간 정리
> 브라우저에서는 마우스 우클릭, 키보드 입력 등 수 많은 이벤트가 발생한다
> 이러한 이벤트를 JavaScript에서 컨트롤 할 수 있으며, 이벤트를 연결 하는 방법을 이벤트 모델이라고 한다
> 이벤트가 발생했을 때, 실행할 함수를 이벤트 리스너 혹은 이벤트 헨들러라고 한다
> 이벤트가 발생한 곳(문서 객체)을 이벤트 발생객체라고 하며, 이벤트가 발생하면 이벤트 객체가 생성된다
> 이러한 이벤트 객체는 이벤트 리스너의 첫 번째 매개변수로 들어간다
document.addEventListener('DOMContentLoaded', ()=> {}의 의미
우리는 JavaScript를 작성할 때, 보통 head 태그안에 혹은 body 태그 끝 단에 작성을 한다
하지만 평소와 같이, head 태그 안에 작성을 할 경우, 이벤트를 컨트롤 할 수 없다
왜냐하면, 코드는 위 > 아래로 순서대로 실행되기 때문이다 위에서 body 태그 이벤트를 컨트롤 하는 코드를 작성하였더라도,
body태그는 아직 생성되기 전이기 때문에 오류가 발생한다 이럴 때 사용할 수 있는 것이 DOMContentLoaded 이벤트이다
document.body.addEventListener("DOMContentLoaded", () => {
const textarea = document.querySelector('textarea')
textarea.addEventListener('keyup', (event) => {
const length = textarea.value.length
})
})
DOMContentLoaded 이벤트는, 문서가 모두 로딩 되었을 때 발생하는 이벤트이다
즉, 해당 이벤트를 연결하면 문서가 모두 로딩 된 후, 실행할 행위를 기술할 수 있다는 것이다