DOM
DOM이란 무엇일까요?
DOM(Document Object Model)은 문서를 노드 및 객체로 표현한 것입니다. DOM은 웹을 다루는 데 사용되는 일종의 API입니다. DOM 모델을 사용하여 문서를 객체화하여 구조, 스타일, 콘텐츠를 변경할 수 있습니다. DOM은 웹 문서를 트리 구조를 따라 웹 문서를 계층적으로 표현합니다. 다음 그림을 참고해보세요. 이는 기본적인 HTML 문서를 노드 트리를 따라 구조적으로 표현한 DOM의 예시입니다. DOM과 자바스크립트 앞서 DOM이란 웹 문서를 다루는 데 사용되는 인터페이스라 정리했는데요. 대부분의 경우 자바스크립트를 통해 DOM을 제어할 수 있습니다. 다음 예시는 문서의 모든 태그를 선택하고 원하는 문단의 내용을 변경합니다. const paragraphs = document.quer..
자바스크립트 DOM 타겟 이벤트 메소드 활용하기
자바스크립트 DOM에서는 target 이벤트 메소드를 사용하여 이벤트가 발생하는 요소에 접근할 수 있습니다. 아래의 코드는 클릭 시 해당 이벤트를 수신한 클래스 이름을 출력합니다. document.addEventListener('click', function myFunction(e) { console.log(e.target.getAttribute('class')); }) 또는 아래와 같이 target.nodeName을 통해 노드의 이름에 접근할 수도 있습니다. 이외에도 부모 노드(parentNode), 자식 노드 리스트(childNodes), 첫 번째 자식 노드(firstChild), 마지막 자식 노드(lastChild) 등에도 접근할 수 있습니다. document.addEventListener('cli..
