DOM (Document Object Model)

ming0·2022년 5월 22일
1
post-thumbnail

📖Today I Learned

✅ DOM 이란??

✔ DOM은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 한다.
이 때 각각의 요소와 콘텐츠를 표현하는 단위를 node라고 한다.

👉 DOM 트리에 document 객체를 통해 HTML에 접근이 가능하다!

(document는 브라우저가 불러온 웹페이지를 나타내며, DOM 트리의 진입점 역할을 수행한다.)

✅ DOM 트리에 접근하기

✔ HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하기 위해 먼저 요소 노드를 취득해야 한다.

// 해당하는 Id를 가진 첫 번째 요소 노드에 접근하기
document.getElementById()

// 해당하는 태그 이름을 가진 모든 요소 노드에 접근하기
document.getElementsByTagName();

// 해당하는 클래스를 가진 모든 요소 노드에 접근하기
document.getElementsByClassName();

// css 선택자로 첫 번째 요소 노드에 접근하기
document.querySelector("selector");		// 주로 사용

// css 선택자로 모든 요소 노드에 접근하기
document.querySelectorAll("selector");	// 주로 사용

getElementsByTagName getElementsByClassName querySelectorAll
을 이용해 돔트리에 접근하여 노드를 가져오면 항상 유사배열 객체로 가져옴
(유사배열 객체 : 배열처럼 생긴 객체)

querySelector 는 비용이 많이 들어가는 함수
→ 반복적인 사용 자제

✔ DOM 안에서 노드 탐색하기

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) 이 클래스가 없으면 밑에 뭘 추가하겠다.

✔ 요소 제어

  • DOM api를 이용하면 요소를 새롭게 생성, 위치, 제거
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 앞에 생성합니다.

✔ JavaScript 문자열을 사용해 element, text 노드를 생성하거나 추가하기

  • DOM api를 이용하면 요소 안의 값에 접근하여 값을 가져오거나, 변경
innerHTMLinnerTexttextContentouterHTML
요소(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;

✔ 더 인접한곳(Adjacent)으로 정밀하게 배치하기

  • insertAdjacentHTML : 요소 노드를 주어진 위치에 배치합니다.
<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>');

✅ 이벤트 객체

✔ 이벤트 삽입

  • 형태 : target.addEventListener( type , listener [, useCapture] )
  • type : click, mouseover, mouseout, wheel ...
  • listener : 이벤트에 대한 정보가 담겨 있는 함수, 핸들러라고도 한다.
  • useCapture : true - capturing, false - bubbling(기본값)

✔ 이벤트 흐름

  • 캡처링 단계
    가장 상위 window 객체부터 document, body 순으로 DOM 트리를 따라 내려감

  • 버블링 단계
    가장 하위 타겟부터 window 객체까지 DOM 트리를 따라 올라감

👉 이렇게 이벤트리스너가 실행되는 것을 이벤트를 전파한다고 말한다.

0개의 댓글