Node와 Element의 차이

Node : 태그(요소 노드), 속성, 주석, 내용(텍스트 노드) 등 모두 표현.
Element : Node의 하위 개념 요소 노드만을 표현

Node로 탐색하는 방법

자식노드 검색 시 공백 -> text

부모

요소.parentNode : 요소의 부모 노드를 탐색해서 반환

자식

요소.childNodes : 요소의 자식 노드를 모두 반환(NodeList 형태)
요소.firstChild : 첫 번째 자식 노드를 탐색해서 반환
요소.lastChild : 마지막 자식 노드를 탐색해서 반환
요소.childNodes[인덱스] : 인덱스 번째 자식 노드를 탐색해서 반환

형제

요소.previousSibling : 요소의 이전 형제 노드를 반환
요소.nextSibling : 요소의 다음 형제 노드를 반환

[Element만 탐색하는 방법]

children : 자식 요소만을 모두 선택
parentElement : 부모 요소 선택
firstElementChild : 첫 번째 자식 요소 선택
lastElementChild : 마지막 자식 요소 선택
previousElementSibling : 이전 형제 요소 선택
nextElementSibling : 다음 형제 요소 선택

---

요소 생성 및 추가

innerHTML 을 이용한 요소 생성 및 추가

    * innerHTML 원리
    1) 특정 요소의 내부 내용을 새로운 내용으로 덮어씌움
         (기존 내용이 사라지는 문제 발생)
    
    2) 덮어씌워지는 새로운 내용을 단순 문자열로 추가하는 것이 아닌
        HTML 요소가 포함되어 있으면 이를 해석 할 수 있도록
        HTMLParser를 이용함
        (추가적인 해석 진행하기때문에 속도가 느림)
        

document.createElement("태그명");

-> 해당 태그의 요소를 생성하여 반환
-> 요소가 생성될 뿐이지 화면 추가되는것이 아니다!

input을 div의 마지막 자식으로 추가

순서 // #div4 > div > input
div.append(input);
div4.append(div);