멋쟁이사자처럼 프론트엔드 스쿨 2기 30_Day

aydennote·2022년 5월 12일

JavaScript 멋쟁이사자처럼 프론트엔드 스쿨

멋사 프론트엔드 스쿨2기 회고

목록 보기

30/62

📖 오늘 학습 뽀인트!

JavaScript DOM
1-1 DOM
1-2 innerText VS textContent
1-3 append VS appendChild
1-4 innerHTML VS insertAdjacentHTML
1-5 캡처링 이벤트 VS 버블링 이벤트
1-6 target VS currentTarget

1. JavaScript DOM

1-1 DOM

🕵️‍♀️DOM(Document Object Model)이란?
DOM 은 HTML 문서의 내용을 트리형태로 구조화한 프로그래밍 interface 이다. 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 하며, 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다.

✍ DOM 트리에 접근하는 방법.
document.getElementById("name") // 해당하는 Id를 가진 요소에 접근하기
document.getElementsByTagName("div"); // 해당하는 모든 요소에 접근하기
document.getElementsByClassName("age"); // 해당하는 클래스를 가진 모든 요소에 접근하기
document.querySelector(".age"); // css 선택자로 단일 요소에 접근하기
document.querySelectorAll(".age"); // css 선택자로 여러 요소에 접근하기

1-2 innerHTML VS innerText VS textContent

<p id="test"> 나는    신입 <span>개발자이다</span>. </p>

 나는    신입 <span>개발자이다</span>.         // innerHTML
 나는 신입 개발자이다.                         // inerText
 나는    신입 개발자이다.                      // textContent

innerHTML 속성은 모든 컨텐츠를 다 표시한다.
innerText 속성은 요소의 렌더링된(사람이 읽을 수 있는) 텍스트 콘텐츠를 나타낸다.
textContent 속성은 노드의 텍스트 콘텐츠를 표현한다.

1-3 appendChild VS append

const container = document.createElement('div')
const text = document.createElemment('p')

container.appendChild(text)            // <div><p></p></div>

appendChild는 Node 객체로 자식 요소를 추가할 수 있다.

const container = document.createElement('div');
container.append('hi')                //  <div>hi</div>

append는 appendChild 처럼 사용할 수 있고, 텍스트를 추가할 수도 있다. 다만, IE10 지원 되지 않는다.

1-4 innerHTML VS insertAdjacentHTML

innerHTML = 요소(element)의 내용을 변경.
insertAdjacentHTML() = HTML을 문서(document)에 삽입

✍HTML 문서 기존 내용에 새로운 내용 삽입이 필요하다면, insertAdjacentHTML()을 사용한다.

1-5 캡처링 이벤트 VS 버블링 이벤트

window.addEventListener('click', () => {
	console.log("window capture!");
}, true);   // true == 캡처링 단계의 이벤트가 발생하도록 한다.
btnFirst.addEventListener('click', (event) => {
	console.log("btn bubble!");
})          // 버블링 단계의 이벤트가 발생하도록 한다.
브라우저가 이벤트 대상을 찾아갈 때는 가장 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 내려간다. 이를 캡처링 단계라고 한다. 이벤트 대상을 찾아가는 과정에서 브라우저는 중간에 만나는 모든 캡처링 이벤트 리스너를 실행시킨다. 그리고 이벤트 대상을 찾고 캡처링이 끝나면 이제 다시 DOM 트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행한다. 이를 이벤트 버블링 단계라고 한다.

✍ 캡처링 단계, 버블링 단계에서 이벤트 리스너가 차례로 실행되는것을 이벤트 전파라고 한다.