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 해킹공격이 바로 이점에서 온 것이다.
태그를 삽입하기 떄문에 원하는 명령이가능하다
하지만 텍스트컨텐트는 ""안에 값이 어떠한 거라도 단지 텍스트로써 받기 때문에 안전하다.
