이전에 우리는 HTML 코드와 HTML element를 JS로 접근하는 방법을 배웠다.
querySelector는 element를 CSS 방식으로 검색할 수 있다.
이것은 hello라는 class 내부에 있는 h1을 가지고 올 수 있는 것을 의미한다.
ex.
<'div class="hello">
<'h1>Grab me!<'/h1>
<'/div>
(CSS selector에는 앞에 .을 붙인다. ex. querySelector(".hello h1") 이전에 geElementsByClassName() 함수를 사용할 때는 . 없이 hello만 썼다. 왜냐하면 JS에서 우리가 class name을 넘겨준다는 것을 알기 때문이었다. 하지만 querySelector에서는 hello가 class name이라는 것과 그 안의 h1을 명시해주어야 한다.)
querySelector는 단 하나의 element를 return해준다.
hello h1이 여러 개라면, 맨 처음 h1만 나온다. querySelector를 사용할 때, hello class 안에 h1이 많을 수도 있다. querySelector는 첫 번째 element만 가져온다. 만약 세 개를 다 가져오고 싶으면 querySelectorAll 함수를 사용하면 된다. querySelectorAll은 세 개의 h1이 들어있는 array를 가져다 줄 것이다. 즉 querySelectorAll은 이 selector 안의 조건에 부합하는 모든 element를 가져다 줄 것이다.
지난 시간 - getElementById
이번 시간 - getElementByClassName/getElementByTagName에 대해 배웠고 이것은 array를 가져다 줌. getElementByName에 대해 배웠고 이것 역시 array 가져다 줌.
이것 대신에 우린 querySelector를 사용. querySelector는 CSS selctor를 사용하여 검색할 수 있다. (ex. querySelector(".hello hi:first-child")) 그리고 이건 첫 번째로 검색된 하나의 element만 반환해준다. 만약 이 조건에 맞는 모든 element를 찾고 싶다면 querySelectorAll 함수를 사용하면 됨. querySelector를 활용하면 element를 id를 통해 찾을 수 있다. (ex. querySelector("#hello"))
즉 querySelector("#hello")와 getElementById("hello") 이 두 코드는 같은 일을 한다. getElementById에서 id(#)를 안 쓰는 이유는 ById 즉 우리가 id를 찾고 있다는 것을 알고 있기 때문이다. querySelector에서는 CSS selector 자체를 전달하기 때문에 우리가 무엇을 찾고 있는지 알지 못하므로 명시해주는 것.
이렇게 JS에서 HTML element를 가져오고 검색하는 것을 배웠다.
<'div class="hello">
<'h1>Grab me!<'/h1>
<'/div>
Grab me!를 Hello로 바꾸기 위해서
(JS에서)
const title = document.querySelector(".hello h1");
title.innerText = "Hello"; // 브라우저에 Hello 출력.
Document.querySelctor()
Returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
hello class 안에 h1이 많을 수 있어도, querySelctor는 첫 번째 값만 가져온다. (세 개의 h1을 모두 가져오고 싶다면 querySelctorAll을 사용하면 된다. 세 개의 h1이 들어있는 array를 가져다 줄 것이다. querySelctorAll은 이 selector 안의 조건에 부합하는 모든 element를 array로 가져다 줄 것이다.)
#3.1, getElementsById
getElementsByClassName - array를 가져다 준다.
getElementsByTagName - array를 가져다 준다.
getElementsByName - array를 가져다 준다.
이것 대신에
querySelctor 사용. 이것은 CSS selector를 사용하여 검색할 수 있다. 그리고 첫 번째로 검색된 하나의 element만 반환해준다. 만약 이 조건에 맞는 모든 element를 찾고 싶다면, querySelctorAll을 사용하면 된다.
대부분 querySelctor 사용할 것이고, 만약에 id를 통해서 찾고 싶다고 하더라도(getElementsById) querySelctor를 사용해서 찾을 수 있다. id만 전달해주면 된다.
ex.
document.querySelctor("#hello");
document.getElementsById("hello");
// 두 코드가 하는 일은 완전히 같다. getElementsById에서는 id(#)를 적어줄 필요가 없다.(id를 찾고 있다는 것을 알기 때문에) querySelctor에서는 우리가 무엇을 검색하는지 명확하지 않으니까 id(#)라고 명시해줘야 한다. querySelctor에서는 CSS selector 자체를 전달하기 때문이다.
두 코드가 하는 일은 완전히 같지만, h1을 가지고 오고 싶다거나("#hello h1"), hello라는 id 하위의 form을 가져오는("#hello form") 것은 getElementsById에서는 할 수 없다.
<'div class="hello">
<'h1>Grab me!<'/h1>
JS에서 HTML element를 가져오고 검색하는 것을 배웠다.
대부분 querySelctor를 사용할 것이고, 가끔 getElementsById를 사용하고, 또 가끔은 array를 반환해주는 querySelctorALL을 사용하게 될 것이다. 대부분의 경우에는 querySelctor와 getElementsById 사용하게 될 것!
//hello라는 class 안의 h1을 가져오기 위해서는 JS에서,
const title = document.querySelctor(".hello h1");
//title의 innerText를 hello로 바꿔보자.
title.innerText = Hello
//브라우저에서 Hello 출력 된다.
** (영상댓글)
- getElementsByClassName() : 많은 element를 가져올때 씀(array를 반환)
- getElementsByTagName() : name을 할당할 수 있음(array를 반환)
- querySelector : element를 CSS selector방식으로 검색할 수 있음 (ex. h1:first-child)
단 하나의 element를 return해줌
⇒ hello란 class 내부에 있는 h1을 가지고 올 수 있다(id도 가능함) - 첫번째 element만 가져옴
- 조건에 맞는 세개 다 가져오고 싶으면 querySelectorAll
⇒ 세개의 h1이 들어있는 array를 가져다 줌 - querySelector("#hello); 와 getElementById("hello"); 는 같은 일을 하는 것임
하지만 후자는 하위요소 가져오는 것을 못하므로 전자만 쓸거다
