티스토리 뷰
문서객체모델(DOM)
DOM은 HTML 문서의 구조를 나타내는 표기법인 동시에 브라우저가 HTML 문서를 조작하는 핵심이기도 합니다.
DOM은 트리 구조로 표현합니다. DOM 트리는 노드로 구성됩니다. 루트 노드는 문서(document)이며 자식 노드는 <html> 요소 하나뿐입니다. DOM 트리의 모든 노드는 Node 클래스의 인스턴스입니다. Node 객체에는 트리 구조를 나타내는 parentNode와 childNodes 프로퍼티, 자신에 대한 프로퍼티인 nodeName과 nodeType 프로퍼티가 있습니다.
요소찾기
get 메서드
document.getElementById('content');
// HTML요소의 ID로 요소 찾기
document.getElemnetsByClassNmae('callout');
// HTML요소의 Class 이름으로 요소 찾기
document.getElementByTagName('p');
// HTML요소의 태그 이름으로 요소 찾기
/*
DOM 메서드가 반환하는 컬렉션은 자바스크립트 배열이 아니라 HTMLCollection의 인스턴스로 배열과
비슷한 객체입니다. for 루프를 사용할 수 있지만 map, filter, reduce 나 Array.prototype 메서드
는 사용할 수 없습니다. 대신 [...document.getElementsByTagName(p)]처럼 확산 연산자를 써서
HTMLCollection을 배열로 바꿀 수 있습니다.
*/DOM 요소 조작
const para1 = document.getElementsByTagName('p')[0];
para1.textContent = "텍스트 내용 변경"
para1.innerHTML = "<strong>HTML태그를 그대로 변경</strong>"
const p1 = document.createElement('p');
//새 요소를 만들지만 DOM에 추가하지 않습니다.
const parent = document.getELementById('content');
const firstChild = parent.childNode[0];
parent.insertBefore(p1, firstChild);
//p1 태그 내부의 firstChild 전에 삽입
parent.appendChild(p1);
//p1 태그 내부의 마지막 자식으로 삽입DOM 요소 쿼리
css 선택자를 사용해 요소를 찾습니다.
const id = document.querySelector('#idName');
const classes = document.querySelectorAll('.className');요소 스타일링
//모든 요소에는 클래스를 나열하는 classList 프로퍼티가 있습니다.
let test = document.querySelector(".first");
test.classList.add('highlight'); // classList 프로퍼티의 add 메서드로 highlight 클래스 추가
데이터속성
html 요소에 임의의 데이터를 추가할 수 있습니다. 이 데이터는 브라우저에 의해 완전히 무시되기 때문에 요소에 관한 정보를 쉽게 읽거나 수정할 수 있습니다. 요소의 dataset 프로퍼티로 속성값에 접근합니다.
이벤트
let buttonAction = document.querySelector('[class="hi"]'); // 대괄호로 속성값으로 요소찾기
buttonAction.addEventListener('click', evt => {
evt.preventDefault(); // a 태그를 클릭하면 링크로 이동하는 등 기본적인 동작을 막음
console.log("hi!");
}
});/이벤트 버블링과 캡처링
HTML은 계층적이기 때문에 이벤트를 꼭 한 곳에서 처리할 필요없이 요소의 부모, 부모의 부모등에서 처리해도 무관합니다. 여러 요소에서 이벤트를 처리할 수 있다면 그 이벤트에 응답할 기회는 어떤 순서로 정할 지 두가지 방법이 존재합니다. 캡처링은 가장 먼 조상에서부터 시작하고, 버블링은 이벤트가 발생한 요소에서 시작해 거슬러 올라갑니다.
HTML은 두 가지 방법을 모두 지원하기 위해 먼저 해당 요소의 가장 먼 조상에서 시작해 해당 요소까지 내려온 다음 다시 올라가는 방식을 택했습니다.
이벤트 핸들러는 다른핸들러가 어떻게 호출될지 영향을 주는 세가지 방법이 있습니다. 먼저 preventDefault는 이벤트를 취소합니다. 취소된 이벤트는 계속 전달되나 defaultPrevented 프로퍼티가 true로 바뀐채 전달됩니다. 브라우저는 defaultPrevented 프로퍼티가 true로 바뀐 이벤트를 무시합니다.
두번째 방법은 stopPropagation입니다. 이 메서드는 이벤트를 현재 요소에서 끝내고 더는 전달되지 않게 막습니다.
마지막으로는 stopImmediatePropagation입니다. 이 메서드는 다른 이벤트 핸들러, 심지어 현재 요소에 연결된 이벤트 핸들러도 동작하지 않게 막습니다.