이것을 자바스크립트로 옮겨 컴퓨터가 데이터를 알게 해 주는 것이 Document Object Model, DOM이다.
2. 각 엘리먼트에 접근하기
HTML도 자바스크립트와 같이 '트리구조'로 이루어져 있다.
그래서 서로의 부모와 자식 요소에 접근이 가능하다.
document.children [원하는 요소의 index]를 사용해서 자식 요소에 접근한다.
document.children [원하는 요소의 index]. parentNode로 부모 요소에 접근한다.
변수로 각 요소의 주소를 할당할 수 있다. document 어쩌고 하면서 적는 것보다 빠르고 간단하다.
Ex) (콘솔 창에서) head = document.children [0]. children [0] => head만 입력해도 됨.
위의 예시를 이용해 다른 방법으로 요소에 접근할 수 있는 방법들을 더 알아보겠다.
head.firstElementChild => head의 첫 번째 자식 요소
head.lastElementChild => head의 마지막 자식 요소
head.nextElementSibling => head의 다음에 올 형재 요소
head.previousElementSibling => head의 이전에 올 형재 요소 ( 정상적 파일에서는 head 이전의 형재 요소는 없다. 뜻만 이해 하자. )
3. 요소 추가와 삭제
요소에 접근하여 수정하는 것은 물론 가능하고, 새로운 요소를 추가할 수도 있다.
document.createElement('추가할 요소의 element 이름')
Ex) document.createElement('div') => 기존의 요소와 아무 상관(형재나 부모 자식 같은 관계가 없는) div요소를 하나 만든다.
위에서 만들어진 element를 기존의 element들과의 관계를 설정한다.
Ex) testDiv = document.createElement('div') => element를 새롭게 만들면서 변수에 할당해 놓는다. document.body.append(testDiv) => body안에 만든 testDiv를 자식으로 넣어준다.
append를 appendChild로 바꿔도 똑같이 자식 요소로 넣어준다.
appendChild는 오직 Node객체만 받을 수 있고, 다중 문자를 넣을 수 없고, 리턴값이 있다는 점이 다르기는 하나 위의 예시에서는 같은 기능을 하고 있다.
4. 샐렉터를 선택해서 값을 변경하기
요소를 만들고 관계를 설정까지 할 수 있다면, 값을 넣어서 화면에 렌더링 시킬 수 도있다.
이때 우리는 querySelector과 querySelectorAll을 사용한다.
Ex) 파일에 class이름이 'user'인 요소가 있을 경우 document.querySelector('. user') => class이름이 user인 가장 처음에 있는 HTML요소를 '유사 배열'로 가져온다.
Ex) 파일에 class이름이 'user'인 요소가 여러 개 있을 경우 document.querySelectorAll('. user') => class이름이 user인 모든 HTML요소를 '유사 배열'로 가져온다.
선택된 요소를 변수로 담아서 계속 사용하는 것이 유리하다. ( 중요하다고 생각되어 한번 더 넣는다! )
Ex) firstUser = document.querySelector('. user') 이후 div로 userInfo를 첫 번째 user에 만들어 넣고 싶을 경우 => userInfo = document.createElement('div') => firstUser.append(userInfo)
선택된 요소에 textContent를 이용해 문자를 값으로 넣을 수 있다. Ex) userInfo.textContent = 'Name: Hendrix'
선택된 요소에 class를 추가할 수 있다. Ex) userInfo.classList.add('name')
class를 넣어 줌으로써, 앞의 요소들과 묶어 주어 원래 있던 CSS를 적용시킨다거나 하는 일들을 할 수 있다.
선택된 요소를 remove를 이용해 삭제할 수도 있다. Ex) userInfo.remove() => 이는 정확히 내가 지울 userInfo가 어디 있는지 알고 있을 때만 사용할 수 있다.
여러 개의 자식 엘리먼트를 다 지우려고 할 경우 Ex) document.querySelector('. user'). innerHTML = '';
하지만 위의 방법의 경우 전달 내용이 빈 string인 원시 데이터 형태로 들어가기 때문에 보안 위험이 있다.
그래서 반복문과 같은 원래 HTML에 포함된 메서드를 이용하는 것이 옳다. Ex) while(body.firstChild) {body.removeChild(body.firstChild);} => body의 첫 번째 자식 요소가 있다면, 그것을 제거한다.
혹은, 반복문의 조건을 body.children.length > 1과 같이 조절하여 요소가 몇 개 남을 때까지(지금은 1개가 남을 때까지) 삭제를 할 수도 있다.
혹은, 배열로 요소를 가져오는 것을 생각해 본다면, 고차 함수를 이용하거나, for... of 구문을 이용하여 삭제하길 원하는 클래스 이름을 가진 모든 요소를 삭제할 수 도 있다.