(js) 자바스크립트 기초 - HTMLCollection , NodeList

HTMLCollection , NodeList 는 유사배열객체. 

 

두개의 결정적인 차이는 동적 , 정적입니다.

    <div id="app">
        <h1>test</h1>
        <div class="greeting">Hello</div>
    </div>

 

HTMLCollection type으로 가저온경우

       const $app = document.getElementById('app');
        const $greeting = document.getElementsByClassName('greeting');
        console.log($greeting, $greeting.length);
        $app.insertAdjacentHTML('beforeend', '<div class="greeting">Hello</div>');
        console.log($greeting, $greeting.length);

NodeList type으로 가저온경우

        const $app = document.getElementById('app');
        const $greeting = document.querySelector('.greeting');
        console.log($greeting, $greeting.length);
        $app.insertAdjacentHTML('beforeend', '<div class="greeting">Hello</div>');
        console.log($greeting, $greeting.length);

NodeList 의경우 선언해놓으면 계속해서 그값을 갱신해준다.