[JavaScript] Node와 Element / DOM 탐색하기 / 유사배열객체

Node와 Element 의 차이?

Node는 텍스트와 태그 모든걸 포함한다. linebreak(줄바꿈 , 앤터키) , 주석 등 모든걸 포함해서 보여준다
Element는 <div> , <p> 등 우리가 알고있는 태그들을 보여준다

 

---

DOM 탐색하기

1. childNodes, firstChild, lastChild로 자식 노드를 탐색할 수 있다.

childNodes는 자식 노드 들을 보여준다.

firstChild는 자식 노드중 첫번째 노드를 보여준다.

lastChild 는 자식 노드중 마지막 노드를 보여준다.

 

자식들을 보여주는 메소드중 children도 있다

 

childNodes는 자식 노드 전체를 보여주며

children 은 자식 태그들을 보여준다.

밑의 예시를 보자

첫번째 로그의 노드리스트를 보면 childNodes를 이용해 parent의 하위 노드들을 보여준다

 

0번째는 <div class="parent"> 이후의 줄바꿈이 들어가있다 . 열어서 보면 nodeValue  : "\n" 으로 표기되어있다

 

1번째는 p태그와 그안의 택스트가 들어가있다.

 

7번재는 주석이다 주석도 포함되어있는걸 볼 수 있다.

 

두번째 로그를 보면 p 태그 4개만 보인다.

 

노드들을 보여주는가 , 태그들을 보여주는가의 차이가 childNodes와 children의 차이 인것 같다.

 

---

유사 배열 객체

childNodes, children는 마치 배열처럼 보입니다.

하지만 배열이아닌 반복가능한(iterable, 이터러블) 유사 배열 객체인 컬렉션입니다.

 

이터러블

ES6에서 도입된 순회 가능한 자료를 '이터러블 ' 로 통일하여 for..of문, 스프레드 문법, 배열할당으로 사용할 수 있다

나중에 좀더 자세히 정리해봐야겠다.

 

이터러블과 유사 배열 객체

유사 배열 객체는 마치 배열처럼 index로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다.

유사 배열 객체는 length 프로퍼티를 갖기 때문에 for 문으로 순회할 수 있고, 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로 가지므로 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.

(배열 메소드는 사용할 수 없다)

 

유사 배열 객체이 전부 다 이터러블은 아니지만, arguments, NodeList, HTMLCollection 은 유사 배열 객체이면서 이터러블이다.

ES6 에 도입된 Array.from 메서드를 사용하여 유사 배열 객체 또는 이터러블을 배열로 변환할 수 있다.

 

Array.from을 사용하여 유사 배열 객체를 배열 만들기

---

 

참고

https://ko.javascript.info/iterable

iterable 객체

https://velog.io/@thumb_hyeok/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%9D%B4%ED%84%B0%EB%9F%AC%EB%B8%94https://velog.io/@thumb_hyeok/