JS DOM
문서 객체 모델(Document Object Model)
-웹 문서의 모든 요소를 js를 이용하여 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법.
-텍스트 에디터롤 웹 문서를 작성하여 브라우저로 실행시키면 이 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 적재해야한다. 웹 문서의 모든 Element와 Attribute, Text들을 브라우저가 이해할 수 있도록 각각 개체로 만들고 이 객체들의 관계를 트리 구조로 구성한 것이다.
document Node(문서노드) : document
트리의 최상단에 존재하며, 하위 자식 노드에 접근하기 위해선 DocumentNode를 통해야만 한다. Dom트리에 접근하기 위한 시작점이다.
Element Node(요소 노드): html,head,body, h1,p
웹 문서 태그는 Element Node로 표현된다. 모든 Element Node는 Attribute Node와 Text Node를 자식으로 가질 수 있는데 이 자식 노드들을 변경하여 웹 페이지를 동적으로 조작할 수 있다.
Attribute Node(속성 노드) : h1, p
태그의 모든 속성은 Attribute Node로 표현하며 해당 태그의 자식 노드로 인식된다.
Text Node(텍스트 노드) : 글들
태그가 가지고 있는 텍스트는 해당 Element Node의 자식 노드인 Text Node로 표현된다. Text Node는 dom 트리의 가장 아래쪽에 위치하여 자신의 자식 노드는 가질 수 없다.
dom은 js가 아니다. dom은 웹 문서에서만 존재하는 것이고, 브라우저가 js를 이용해서 웹페이지를 조작할 수 있도록 제공해주는 하나의 요소일 뿐이다. js로 dom을 조작하는 것은 html웹 문서 자체를 수정하는 것이 아니라 dom을 조작하는 것뿐이다.
HTML Element에 접근하기
-1) Tag의 id로 접근하기
<div id ="container">div입니다</div>
<script > var hi = document.getElementById('container');</script>
Tag name으로 접근하기
<ul>
<li>1</li><li>2</li><li>3</li></ul>
<script> var hi = document.getElementByTagName('li');</script>
유사 배열의 형태로 반환된다.
Class name으로 접근하기
<ul>
<li class="list">1</li><li class="list">2</li><li class="list">3</li></ul>
<script> var hi =document.getElementByClassName("list"):</script>
유사 배열의 형태로 가져온다.
css selector로 접근하기
<ul id="myList">
<li class="list">1</li><li class="list">2</li><li class="list">3</li></ul>
<script> var list = document.querySelector('#myList'); ->단일요소
var li = document.querySelectorAll('li'); -> 복수요소
var lis = document.querySelectorAll('.class-name")
querySelector()를 사용하면 위에서부터 해당 속성을 가진 dom 하나만을 가져온다.
복수를 가져오고 싶다면 querySelectorAll();
var a = document.querySelecotr()하고 그 밑에서 찾으려면
var b = li.querySelector 도 가능하다.
var c = list.children; 유사배열의 형태로 반환하는데 자식요소가 없으면 빈배열
var d =list.firstElementChild; 첫번째 자식만
var e = list.lastElementChild: 마지막 자식만
childNodes: 주어진 요소의 자식 노드 모음을 반환한다. element node 만 반환하는 것이 아니라 해당 요소 하위에 존재하는 모든 text node ,comment node를 포함하여 반환한다.
형제 노드 탐색:
-previousElementSibling/ nextElementSibling
list.firstElementChild.nextElementSibling 2번
list.lastElementChild.previoustElementSibling 2번
부모 노드 탐색: parentNode
-li.parentNode