[검색, 탐색]
1. getElementById
'child2'라는 id를 가진 요소가 출력된다. 만약, 여러 요소가 검색되는 경우에는 가장 먼저 찾은 요소를 반환하게 됨. 
만약, 해당 id를 가지는 요소를 찾지 못할 경우 'null' 반환.
2. querySelector
querySelector는 'CSS 선택자'로 검색한 요소를 하나 반환한다. 만약 여러 요소가 검색될 경우, 가장 먼저 찾은 요소를 반환한다. 이도 'getElementById'와 같이 검색 결과가 없으면 'null'을 반환함.
'child' 클래스를 가진 요소는 2개이지만, 먼저 찾은 요소를 반환한다.
3. querySelectorAll
querySelectorAll은 이름에서도 알 수 있듯이 'CSS 선택자'로 검색한 모든 요소를 'NodeList'로 반환한다. 이 객체는 'forEach'를 사용할 수 있다.
사실 이것은 배열처럼 보이지만 '유사 배열'임. 유사 배열의 경우, 배열이 아니므로 배열 메소드를 사용할 수 없다. 하지만 이 경우에는 'forEach'는 사용 가능함. 
prototype을 열어보면, forEach를 사용할 수 있다는 것을 확인 가능.
하지만 NodeList에 직접 적용하는 것보다, 이를 배열로 만든 후 사용하는 경우가 많다. 
유사 배열을 배열로 바꾸는 방법 : 정적 메소드 Array.from 사용하기
잘 출력되었다.
4. N.parentElement
이것은 node에 사용할 수 있으며, 노드의 부모 요소를 반환한다.
5. E.closest()
이 메소드는 요소에 적용 가능하며 자신을 포함한 조상 요소 중 'CSS 선택자'와 일치하는 가장 가까운 요소를 반환한다. 요소를 찾지 못한다면 'null'을 반환한다. 
이 메소드는 자신을 포함하기 때문에 위처럼 출력된다. 'hi'라는 클래스를 가진 요소는 없으므로 'null'이 반환되었다.
6. N.previousSibling / N.nextSibling
이 속성은 노드의 이전 형제 혹은 다음 형제 노드를 반환한다.
열어보면 data에 줄바꿈 처리된 것이 나와있다. 이것이 주석을 뜻함. 이 속성은 요소가 아닌 노드에서 적용 가능한 것이므로 요소뿐만 아니라 주석이나 텍스트도 포함하게 된다. 그래서 previousSibling을 적용하면 주석, nextSibling 적용 결과는 '텍스트1'이라는 텍스트 요소이기 때문에 각각을 콘솔창에 반환하게 된 것이다.
7. E.previousElementSibling / E.nextElementSibling
이 속성은 요소의 이전 형제 혹은 다음 형제를 반환한다. 앞서 살펴본 노드 속성과는 다른 것!
이는 요소에 적용 가능한 속성이므로 첫 번째 콘솔의 결과로는 null이 출력된다. 왜냐하면, child 클래스를 가진 요소의 형제 관계 중 이전 형제에 해당하는 요소는 없기 때문. 요소는 주석을 포함하지 않으므로,,, 두 번째 콘솔의 결과는 잘 출력되었다.
8. E.children
이 속성은 요소의 모든 자식 요소를 반환한다.
배열처럼 인덱스 번호가 나오고 length 속성이 있는 것으로 보아 유사 배열이므로 배열 메소드를 사용할 수 없음. 이를 정적 메소드인 'Array.from'을 활용하여 배열 메소드를 활용할 수 있다.
9. E.firstElementChild / E.lastElementChild
이 속성은 요소의 첫 번째 자식 혹은 마지막 자식을 반환한다.
첫 번째 요소와 마지막 요소만 반환한다.
