[Javascript] DOM - (1)

자바스크립트를 사용하여 html element에 접근하기 위해 사용할 수 있는 메소드
- getElementsByTagName
- getElementsByClassName
- getElementById
- querySelector
- querySelectorAll

******
클래스와 태그는 여러 번 사용할 수 있으므로
그 결괏값이 하나 이상인 경우가 많기 때문에 Element에 s를 붙여 사용한다.
getElementsByTagName과 getElementsByClassName는 결괏값을 하나하나 저장해서 유사 배열 형태로 리턴해준다.(유사 배열은 key 값이 숫자여서 인덱스를 사용해 접근할 수 있다.)+) id는 하나이므로 Element에 s를 붙이지 않는다 (getElementById)
******

<getElementsByTagName>
- 태그 이름을 통해 선택하는 메소드

dom을 선택한 변수는 다른 변수들과 구분해주기 위해 $ 표시를 함 (생략해도 무방)

html 코드에 있는 body 태그를 해당 메소드를 사용해 선택하여 콘솔 창에 출력해보면
HTMLCollection이 뜬다. 이것은 key 값이 숫자로 이루어진 유사 배열이다.

$body가 아닌 $body[0]을 콘솔 창에 출력할 시

$body가 아닌 $body[0]을 콘솔창에 출력하면 이렇게 뜬다.

innerText를 사용하여 $body[0]의 텍스트만 출력할 시
(innerText는 태그를 제외한 텍스트만 나열해준다.)

$body[0].innerText

innerHTML을 사용하여 $body[0] 태그와 텍스트를 출력할 시
(innerHTML은 태그도 문자열로 바꾸어 출력해준다.)

$body[0].innerHTML

<getElementsByClassName>
- 클래스 이름을 통해 선택하는 메소드

getElementsByTagName도 유사 배열로 만들어지는 것을 볼 수 있다.
이것도 인덱스를 사용해 접근할 수 있으며 getElementsByTagName과 사용법이 동일하다.

<getElementById>
- 아이디를 통해 선택하는 메소드

getElementById는 유사 배열(HTMLCollection)이 아닌 element가 반환되는 것을 볼 수 있다.

만약 위 ul 안에 li를 가지고 오고 싶다면?
- document가 아닌 $cityList를 써주면 된다.

getElementsByTagName을 사용하여 유사 배열이 반환됨

<querySelector>
- css 선택자처럼 동일하게 사용 가능하여 더 복잡한 조합의 선택자 이용 가능
- css 선택자처럼 사용해야 함 (id 선택 시 #, class 선택 시 . 사용)
- querySelector는 조건을 만족하는 첫 번째 엘리먼트만을 선택
(조건을 만족하는 모든 엘리먼트를 선택하고 싶으면 querySelectorAll 사용)

위에 작성했던 $cities를 querySelector를 사용하여 li 태그를 가져오면

맨 처음 li 태그인 Bangkok만 출력되는 것을 볼 수 있다.

<querySelector>
- css 선택자처럼 동일하게 사용 가능하여 더 복잡한 조합의 선택자 이용 가능
- css 선택자처럼 사용해야 함 (id 선택 시 #, class 선택 시 . 사용)
- 조건을 만족하는 모든 엘리먼트를 선택

querySelectorAll은 NodeList가 반환된다.
이것도 HTMLCollection과 같은 유사 배열이지만, 이 둘의 차이점은 forEach 지원 여부이다.
(HTMLCollection은 forEach가 지원되지 않지만 NodeList는 지원됨)

map이나 filter은 배열에만 사용 가능해서 유사 배열에는 사용하지 못하는데,
이때 NodeList면 forEach로 반복문을 돌릴 수 있다.
=> 만약 받아온 유사 배열을 하나씩 접근하고 싶으면 querySelectorAll과 forEach 사용
하지만 어쩔 수 없이 HTMLCollection을 사용해야 하거나,
map이나 filter 같은 배열 메소드를 사용할 경우에는 유사 배열을 그냥 배열로 변환하면 된다.

유사 배열을 그냥 배열로 변환하는 법

- spread 연산자, Array.from

 

1) spread 연산자

- [...원하는 변수]

이전 포스팅에서 $cities는 querySelectorAll 메소드를 사용하여 NodeList를 반환했는데, 

spread 연산자를 사용하여 $cities라는 유사 배열을 하나씩 돌아 배열에 하나씩 담았다.

(배열로 변환되었기 때문에 map이나 filter 메소드를 사용할 수 있다.)

map 메소드가 잘 적용된 것을 볼 수 있다.

 

2) Array.from

- Array.from(배열로 바꿔주고 싶은 대상)

$cities라는 유사 배열이 Array.from을 사용함으로써 그냥 배열로 변환된 것을 볼 수 있다.

(배열로 변환되었기 때문에 map이나 filter 메소드를 사용할 수 있다.)

map 메소드가 잘 적용된 것을 볼 수 있다.

 

DOM을 조작하는 방법은 다음 포스팅으로 정리할 것이다!

---

강의 출처: 컴공 선배