document object는 html 코드를 javascript 관점에서 보여준다.
그 뿐만 아니라 html 코드 변경도 가능하다.
이렇게 html에 있는 태그를 가져다가 쓸 수 있다.
console 창에서 변경도 가능하다.
(물론 새로고침 시에는 다시 돌아간다.)
getElementById
getElementById 함수를 통해 해당 id를 가진 element를 불러온다.
이렇게 title이라는 id를 가진 element로 innertext를 바꾸는 등 여러 작업도 가능하다.
getElementsByClassName
getElementsByClassName 함수를 통해 해당 class들을 가진 elements를 불러온다.
id는 같은 값을 가질 수 없어서 element뒤에 s가 붙지 않은 것이다!
hello라는 class를 가진 element들을 불러봤는데, console창을 보면 이들은 array라서 hellos.속성으로 변화를 주기는 불가능하다.
이 함수는 많은 elements를 불러올 때 사용한다.
getElementsByTagName
tag name을 사용하여 element를 불러오는 것이다.
class를 가진 div는 getElementsByClassName으로 가져오면 되는데, 그냥 태그로만 되어있는 h1을 가져오기 위한 방법이다.
console.dir();
html에 title이라는 id를 가진h1 tag를 추가해준다.
<h1 id="title">Grab me!</h1>그 다음 document.getElementById(문자);를 적어서 console.dir해준다.
console.dir은 element를 더 자세하게 보여주는 것이다.
querySelector
querySelector는 element를 css방식으로 검색이 가능하다.
class name인 것과 그 클래스 속 element를 명시해줘야함!
만약 같은 element 형식이 여러개면 제일 첫번째 element만 가져온다!!!
같은 element 형식들 모두를 가져오고 싶다면, querySelectorAll을 사용하면 된다.
css에서처럼 .으로 class임을 뜻해주었다.
위 코드에서는 (".hello" --> 대신 "div"라고 해도 된다.)
정리
getElement~~로 시작하는 함수는 array로 나타난다.
이를 원하지 않는다면 querySelector를 사용해주면 된다.
querySelector은 css 방식으로 검색을 해준다.
ex)const 변수 = document.querySelector(".해당클래스명 해당태그:nth-child(2)");도 가능하다. 아이디도 마찬가지 #을 사용!!
querySelector은 첫번째로 검색된 element만 반환해준다.
모든 element를 검색하고 싶다면 querySelectorAll을 사용하면 된다.
