HTML 요소(Element) 선택하는 방법

// children : 자식 요소만 모두 선택

// parentElement : 부모 요소 선택

// firstElementChild : 첫 번째 자식 요소 선택

// lastElementChild  : 마지막 자식 요소 선택

// previousElementSibling : 이전 형제 요소 선택

// nextElementSibling     : 다음 형제 요소 선택

document.querySelector("#btn2").addEventListener('click', () => {

    const test2 = document.querySelector('#test2');

    //test2의 모든 자식 요소

    console.log(test2.children);

    console.log(test2.parentElement);

    //test2의 첫번째 자식 요소

    console.log(test2.firstElementChild);

    //test2의 마지막 자식 요소

    console.log(test2.lastElementChild);

    //다음요소

    console.log(test2.previousElementSibling);

    //이전요소

    console.log(test2.nextElementSibling);