[TIL] DOM 조작하기

DOM이란?

HTML을 구조적으로 접근하는 DOM(Document Object Model)은 HTML을 단순한 문서 이상인 웹 앱으로 만들어주는 도구이다.
[DOM을 활용하면 HTML을 조작할 수 있다.]

브라우저 환경에서 DOM은 자바스크립트를 이용해 조작할 수 있으며, 기존 엘리먼트에 대한 접근 혹은 새로운 엘리먼트 생성 및 삭제를 가능하게 합니다.
쉽게 표현하면 Dom은 개발자 도구 엘리먼트 탭에서 보이는 코드
즉, 페이지소스 보기를 통해 보이는 코드가 dom이다.

자바스크립트에서 DOM은 document 객체에 구현되어 있습니다. (window는 BOM)
[BOM - 브라우져 모델은 그것뿐만아니라 브라우저 전체로직을 담당한다. 더 큰 개념이다

DOM 구조를 조회하기 위해서는 console.dir가 유용하다.

console.dir(document.body);//doc객체안의 body를 출력

조회할때 변수를 지정해서 값을 넣어주고 호출만 해주면
번거롭게 여러번 반복하지 않아도 쉽게 원하는 곳을 조회할 수 있다.

let 변수 = document.body.children[1];
console.dir(변수) //호출

1.createElement - CREATE

let a = document.createElement('div')

=> <div></div> 

document.body.append(a)

a라는 변수에 담긴 것을 append메서드를 이용하여 body안에 넣어주면 실제 html의 화면에 나타날 것이다.

append - FormData 인터페이스의 append() 메서드는 FormData 객체의 기존 키에 새 값을 추가하거나, 키가 없는 경우 키를 추가합니다.

prepend - ParentNode.prepend() 메소드는 Node 객체 또는DOMString 객체를 ParentNode의 첫 자식노드 앞에 삽입한다. DOMString 객체는 Text 노드와 동일하게 삽입된다.

즉, 자바스크립트의 배열에서 append는 push개념 prepend는 unshift개념으로 보면 된다.

appendChild -Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노드를 현재 위치에서 새로운 위치로 이동시킵니다.

append와 appendChild 의 차이점 https://developer.mozilla.org/ko/docs/Web/API/ParentNode/append

2.querySelector, querySelectorAll - READ

querySelector - 하나
querySelectorAll - 전부를 조회한다

하지만, document.querySelector('.door')
이처럼 .door클래스를 조회하면 door 클레스 이름으로 가진 모든 HTML 엘리먼트를 조회할 수 있습니다.

hello를 추가한다.
let container = document.querySelector('#container')
let hello = document.createElement('div')
container.append(hello)

3.textContent, id, classList, setAttribute - UPDATE

Node.textContent='값';
-> 우항에 있는 값을 전부 텍스트로 넣어준다

one.classList.add('hello');
->클래스 리스트에 의해 클래스 값이 할당되어진다

div class="hello">값</div>

SetAttribute(‘id’,’javascript’)
=>id란 키에 javascript란 값을 넣어주는것.

4.remove, removeChild

node.remove(); //트리로 부터 객체를 제거

removeChild 는 자식 엘리먼트를 지정해서 삭제하는 메소드입니다.
모두 삭제하기 위해서, while문을 활용

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

자식 엘리먼트를 하나는 남기게 하려면 조건식을 1보타 크게 (>1)

6.innerHTML과 textContent의 차이

innerHTML = ""
->이너는 ""의 문자를 텍스트로 받을 뿐 아니라 태그 까지 받을 수 있다.

textContent = ""
->단순히 텍스트를 받는다.

태그를 받는 다는게 굉장히 다른 점인데 옛날에 유명했던 Xss 해킹공격이 바로 이점에서 온 것이다.
태그를 삽입하기 떄문에 원하는 명령이가능하다
하지만 텍스트컨텐트는 ""안에 값이 어떠한 거라도 단지 텍스트로써 받기 때문에 안전하다.