[12.10] TIL

Jiyun Park ·2021년 12월 10일

JavaScript 멋사프론트엔드스쿨

멋사프론트엔드스쿨 TIL

목록 보기

10/13

오늘은 DOM요소에 대해 더욱 깊이 알아보았다.

DOM은 웹페이지(HTML)과 프로그래밍 언어를 연결하는 다리 역할을 하는 것을 알 수 있었다.

DOM을 통해 HTML 요소에 접근하는 방법은 다음과 같다.

getElementByID - id이름으로 접근
getElementsByTagName - 태그로 접근
getElementsByClassName - 클래스 이름으로 접근
querySelector - CSS문법을 활용한 선택자 접근
querySelectorAll - 해당 이름을 가진 모든 선택자 선택

addEventListener

이벤트의 흐름을 간략히 설명하면 다음과 같다.

상위 window객체, document, body 순 DOM트리를 내려가며 캡처링을 한다.
만나는 보든 이벤트리스너를 실행시킨다.
캡처링이 끝나면 DOM트리를 따라 올라가며 모든 버블링 이벤트 리스너를 실행한다.
*버블링이란 거품처럼 쌓여가는 것. -> 이벤트 버블링 단계
이렇게 이벤트가 차례대로 실행되는 것을 이벤트 전파(event propagation) 이라고 한다.

addEventListner는 다음과 같이 사용한다.

const button = document.querySelector("button");

button.addEventListener('click', function(){
	console.log("hello world");
})


// 클래스 생성, 제거 가능 
myBtn.addEventListener('click', function(){

// blue 라는 클래스의 속성 값 추가 
	myBtn.classList.add("blue");
  
//이외 remove, toggle(있으면 없어지고, 없으면 생기는), contains(해당 속성있는지 확인) 사용 가능하다.

노드 탐색

여기서 노드란 DOM의 다양한 요소, 컨텐츠를 의미한다.
다음과 같이 apple이라는 요소 안의 노드를 찾아준다.

// 제코베 예제 참고 
const apple = document.querySelector(".apple");
console.log(apple.firstElementChild);  // 첫번째 자식을 찾습니다.
console.log(apple.lastElementChild);   // 마지막 자식을 찾습니다.
console.log(apple.nextElementSibling); // 다음 형제요소를 찾습니다.
console.log(apple.previousSibling);    // 이전 형제요소를 찾습니다.
console.log(apple.children);           // 모든 직계자식을 찾습니다.
console.log(apple.parentElement);      // 부모 요소를 찾습니다.

target

이벤트가 발생한 진원지의 정보를 target이 보여준다.

<article class="parent">
    <ol>
        <li><button class="btn-first" type="button">버튼1</button></li>
        <li><button type="button">버튼2</button></li>
        <li><button type="button">버튼3</button></li>
    </ol>
</article>

<script>
    const parent = document.querySelector('.parent');
    parent.addEventListener('click', function (event) {
        console.log(event.target);
  		//버튼1을 눌렀을 때 버튼1에 대한 정보를 반환해준다 
        console.log(event.currentTarget);
  		//버튼1의 부모인 parent의 정보를 반환해준다
    })
</script>

위의 코드를 실행하고 버튼 2를 눌러보면 target은 버튼2에 대한 정보를,
currentTarget은 버튼2가 속한 부모 즉 클래스 이름 "parent" 의 정보를 반환해준다. 이렇게 찾을 수 있는 것은 이벤트의 특징 덕분이다.

이벤트 위임

이러한 이벤트의 흐름을 통해 이벤트리스너가 없는 요소도 이벤트가 있는 것처럼 만들 수 있다. 이것을 '이벤트 위임'이라고 한다.

<article class="parent">
        <ol>
            <li><button class="btn-first" type="button">버튼1</button></li>
            <li><button type="button">버튼2</button></li>
            <li><button type="button">버튼3</button></li>
        </ol>
    </article>

    <script>
        const parent = document.querySelector('.parent');
        parent.addEventListener('click', function (event) {
            console.log(event.target);
      		//nodeName은 대문자로 표기해야함
            if (event.target.nodeName === "BUTTON") {
      		//버튼의 텍스트를 '버튼4'로 변경해줌
                event.target.innerText = "버튼4";
            }
        })
    </script>

해당 코드 실행 후 버튼을 눌러보면, 누르는 버튼들의 텍스트가 "버튼4"로 변경되는 걸 알 수 있다.

이벤트의 this

const parent = document.querySelector('.parent');
        parent.addEventListener('click', function (event){
            console.log(this);
        })

// 화살표함수의 this는 상위스코프(부모스코프)를 표시한다 
const parent = document.querySelector('.parent');
        parent.addEventListener('click', (event) => {
            console.log(this);
        })