HTML, CSS, JS
HTML은 웹페이지의 구조를 담당하는 마크업 언어, CSS는 디자인 요소를 시각화하는 스타일시트 언어, JS는 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용 할 수 있게 하는 프로그래밍 언이이다. 이렇게 나눠서 만드는 걸 관심사 분리라고 한다.
그런데 JS로 상황에 맞게 HTML을 바꿔야 하는 상황도 존재한다.(버튼을 클릭할 때 안보이던 div 박스 보이게 한다던가?) 그렇게 JS로 HTML에 접근하여 조작할 수 있도록 만들어 놓은 것이 DOM이다.
Documnet Object Model 이라는 이름에서도 드러나듯이 HTML의 요소들을 JS에서 document라는 객체로 접근할 수 있다.
DOM은 HTML을 박스구조에서 자신을 둘러싼 박스를 부모(parent), 자신 내부의 박스를 자식(child)로 보는 트리구조로 생각한다.
기본적으로 dom으로 HTML을 조작하기 위해 알아야 할 내용은
create, append, read, update, delete 가 있다.
create
element를 생성(html 태그라 볼 수 있다.)하는 과정이다.
사용되는 명령어는
document.createElement(태그속성) 이다.
ex)
const div1 = document.createElement('div')append
createElement로 만든 엘리먼트는 허공에 붕 뜬 상태라 html에 나타내려면 어딘가에 자식요소로 넣어줘야하는데 그 과정이다.
baseElement.append(element), baseElement.appendChild(element)
등이 있는데 위 두 명령어는 주어진 엘리먼트를 부모 요소의 마지막 자식요소로 만든다.
다만 append는 한번에 여러개를 넣을 수 있고 apppendChild는 한번에 하나만 가능하다.
ex)
const div1 = document.createElement('div')
const div2 = document.createElement('div')
document.body.append(div1)
document.body.append(div2)read
엘리먼트들에 저장된 값에 접근할 방법도 물론 있어야 할 것이다.
대표적으로
baseElement.querySelector(selector), baseElement.querySelectorAll(selector)
가 있다.
querySelector는 baseElement의 하위 엘리먼트 중 selector에 대응되는 엘리먼트 하나를 호출하고 querySelectorAll은 하위 엘리먼트 중 대응되는 모든 엘리먼트를 유사배열로 반환한다.
대표적인 셀렉터는
.classname', #id 등이 있다.
update
createElement로 만들거나 querySelector로 찾은 엘리먼트는 변수에 저장해두고
속성을 바꿔줄 수 있다.
dom은 (Document Object Model)의 약자로써 이런 엘리먼트들의 속성을 객체처럼 접근이 가능하다.
element.textContent = '내용'
이와같이 바로 집어넣어 줄 수 있는 속성도 있고
element.classList.add('클래스명')
element.classList.remove('클래스명')
이와같이 메소드로 존재하는 것들도 있다.(클래스명 같은 경우는 여러개가 가능하므로)
element.setAttribute('속성', '값')
으로 속성을 지목해서 바꿔줄 수도 있다.
delete
삭제할 엘리먼트를 찾은 다음 Element.remove() 메소드로 없앨 수 있다.
Node.removeChild(node)는 노드의 하위 노드 중 삭제할 노드를 골라서 없앨 수 있다.
Node, Element
노드와 엘리먼트의 차이는 노드는 태그가 아닌 그냥 텍스트도 포함하는 용어이다. Element의 메소드들은 텍스트노드에 적용되지 않는다.
하위 요소들은 아마 연결이 끊겨서 둥둥 떠있다 없어지는 상태가 될 거 같은데 모르겠어서 한번 해봤다.
const div1 = document.createElement("div");
div1.classList.add("div1");
div1.textContent = "im div1";
const div2 = document.createElement("div");
div2.classList.add("div2");
div2.textContent = "im div2";
const div3 = document.createElement("div");
div3.classList.add("div3");
div3.textContent = "im div3";
document.body.append(div1);
div1.append(div2);
div2.append(div3);이렇게 div 엘리먼트 세개를 나란히 붙이면
im div1
im div2
im div3
이런 결과가 나온다. 여기서
div1.remove();remove()로 없애주면 싹 없어진다.
그런데
document.body.append(div1)을 해주면
im div1
im div2
im div3
다시 다 생기는 것으로 봐선 엘리먼트와 부모의 연결을 끊는 메소드로 볼 수 있을 듯 하다.
또한
const div4 = document.body.removeChild(div1);
document.body.append(div4);이 두 구문을 하나씩 실행해 봐도 싹 다 없어졌다가 다 같이 생기는 것으로 보아 remove, removeChild 한 부분의 연결만 끊는 다고 보면 될 듯 하다.
