DOM

DOM
플랫폼, 언어와 관게없이 독립적인 인터페이스
XML ,HTML 문서를 트리구조로 표현한 문서

---

DOM과 HTML의 차이점

 

HTML 
화면에 보이고자하는 모양, 구조를 문서로 만든것
최초의 화면을 그릴때 이용한 설계도

 

DOM

실제로 화면에 표현된것들
설계도를 이용해서 만든 실물

화면 조작, 웹페이지 만질 수 있음 => 인터페이스라고 부름

---

node
하나의 단위, 요소 들을 표현시 씀

---

tree structure
node가 하위 node들을 가지면서, 반대로 뒤집었을시에
나무가 뿌리에서 가지를 뻗어가는 모양과 유사

---

DOM Element 선택

querySelector
CSS선택자에 해당하는 첫번째 요소를 가져옴
=>1개 리턴

 

querySelectorAll
CSS선택자에 해당하는 모든 DOM Element들을 가져옴

=> 모든 DOM 요소들을 유사배열 형태로 돌려줌

---

DOM Elements 부모 ,형제 ,자식 요소 선택

parentElement 부모

 

nextElementSibling 다음 형제

 

previousElementSibling 전 형제

 

children 자식 ( 유사배열)
 //children[인덱스]로 접근

---

DOM Elements 추가, 속성, 자식으로 넣기, 삭제

document.createElement('태그'); 태그 추가

setAttribute(속성, 값); 태그의 속성을 추가

부모.appendChild(자식); 자식 태그로 값 넣음

x.remove 태그 삭제

---

addEventListenr에서 target과, currentTarget 차이점

target : 이벤트 발생된 근원지의 요소 element 선택

// body태그 안에 정확히 어떤 요소가 선택 되었느냐 ?

ex) body태그 안의 div , div태그 안의 span

 

currentTarget : dom등록되어진 실행 대상

//addEventListenr를 실행한 대상이 되는 element를 가져옴

 

ex) bodyEle.addEventListenr()

// body태그 안에 어떤 요소를 선택해도 body태그가 나옴