✔ DOM은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 한다.
이 때 각각의 요소와 콘텐츠를 표현하는 단위를 node라고 한다.
👉 DOM 트리에 document 객체를 통해 HTML에 접근이 가능하다!
(document는 브라우저가 불러온 웹페이지를 나타내며, DOM 트리의 진입점 역할을 수행한다.)
✔ HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하기 위해 먼저 요소 노드를 취득해야 한다.
// 해당하는 Id를 가진 첫 번째 요소 노드에 접근하기
document.getElementById()
// 해당하는 태그 이름을 가진 모든 요소 노드에 접근하기
document.getElementsByTagName();
// 해당하는 클래스를 가진 모든 요소 노드에 접근하기
document.getElementsByClassName();
// css 선택자로 첫 번째 요소 노드에 접근하기
document.querySelector("selector"); // 주로 사용
// css 선택자로 모든 요소 노드에 접근하기
document.querySelectorAll("selector"); // 주로 사용
✔ getElementsByTagName
getElementsByClassName
querySelectorAll
을 이용해 돔트리에 접근하여 노드를 가져오면 항상 유사배열 객체로 가져옴
(유사배열 객체 : 배열처럼 생긴 객체)
✔ querySelector
는 비용이 많이 들어가는 함수
→ 반복적인 사용 자제
const cont = document.querySelector(".cont");
console.log(cont.firstElementChild); // 첫번째 자식을 찾습니다.
console.log(cont.lastElementChild); // 마지막 자식을 찾습니다.
console.log(cont.nextElementSibling); // 다음 형제요소를 찾습니다.
console.log(cont.previousSibling); // 이전 형제요소를 찾습니다.
console.log(cont.children); // 모든 직계자식을 찾습니다.
console.log(cont.parentElement); // 부모 요소를 찾습니다.
DOM api를 통해 요소의 class 속성을 제어
(DOM api : DOM의 각 노드와 상호작용을 위한 인터페이스)
형태 : target.classList.____()
- add : 추가한다
- remove : 제거한다
- toggle : 추가 + 제거
- contains : 이 클래스 있냐? 없냐? 불리언값으로 나옴
ex) 이 클래스가 없으면 밑에 뭘 추가하겠다.
document.createElement('tagName');
// tagName과 태그 이름이 일치하는 요소를 생성합니다.
document.createTextNode('text');
// target 텍스트를 생성합니다.
element.appendChild(target);
// target 요소를 element의 마지막 자식으로 위치합니다.
element.append(target, "문자열");
// target 요소 혹은 문자열을 element의 자식으로 위치합니다.
element.removeChild(target);
// element의 target 자식 요소를 제거합니다.
parentElement.insertBefore(target, location);
// target 요소를 parentElement의 자식인 location 앞에 생성합니다.
innerHTML | innerText | textContent | outerHTML |
---|---|---|---|
요소(element) 내에 포함된 HTML 마크업을 가져오거나 설정합니다. | 요소의 렌더링된 텍스트 콘텐츠를 나타냅니다. ( innerText는 "사람이 읽을 수 있는" 요소만 처리합니다. | 노드의 텍스트 콘텐츠를 표현합니다. 순수하게 텍스트만 사용할 경우! | 요소의 자식 요소를 포함하여 HTML이 포함된 DOMString을 반환합니다. |
<h3>원본 요소:</h3>
<p id="source">
<style>#source { color: red; }</style>
아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요.
<span style="display:none">숨겨진 글</span>
</p>
<h3>textContent 결과:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
<h3>innerText 결과:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
const source = document.getElementById('source');
const textContentOutput = document.getElementById('textContentOutput');
const innerTextOutput = document.getElementById('innerTextOutput');
textContentOutput.innerHTML = source.textContent;
innerTextOutput.innerHTML = source.innerText;
<strong class="sayHi">
안녕
</strong>
const sayHi = document.querySelector('.sayHi');
sayHi.insertAdjacentHTML('beforebegin', '<span>beforebegin</span>');
sayHi.insertAdjacentHTML('afterbegin', '<span>afterbegin</span>');
sayHi.insertAdjacentHTML('beforeend', '<span>beforeend</span>');
sayHi.insertAdjacentHTML('afterend', '<span>afterend</span>');
캡처링 단계
가장 상위 window 객체부터 document, body 순으로 DOM 트리를 따라 내려감
버블링 단계
가장 하위 타겟부터 window 객체까지 DOM 트리를 따라 올라감
👉 이렇게 이벤트리스너가 실행되는 것을 이벤트를 전파한다고 말한다.