DOM(Document Object Model):문서 객체모델

320x100

DOM은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내주며,이 객체는 수정 가능하다

document 객체는 페이지의 기본 ‘진입점’ 역할하여. document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있다

DOM은 HTML 문서에 대한 인터페이스 이다

DOM이 사용되는 곳은 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용됩니다. 또한 페이지의 컨텐츠 및 구조, 그리고 스타일이 JavaScript 프로그램에 의해 수정되기 위해 사용한다=>API를 이용해 DOM에 접근하여 문서 구조, 스타일, 내용 등을 변경

DOM Tree

문서를 node 구조로 tree 형태로 표시=>node: 어떤 연결망에서 특정 지점과 지점을 연결하는데 표시한 것

DOM 구조를 node tree라고 한다(문서 document는 node들의 집합)

DOM은 문서의 태그를 노드의 계층 구조트리로 표현

웹브라우저는 DOM 을 사용하기 때문에 자바스크립트와 CSS를 사용해서 상호작용 가능

노드를 검색하고 해당 노드의 디테일을 변경하거나, 삭제하고 새롭게 생성 가능

하나의 root node에서 시작됨 ,tree형 자료구조는 흔히 위의 root node에서 아래로 퍼져나가는 형태

tree에서는 위쪽의 node를 부모(parent) 노드 아래쪽 노드를 자식(child)이라고 한다

root node는 가장 위에서 시작되는 node이니까 parent가 없는 node가 된다

children(자식)이 없는 node를 leaf node라고 한다

뿌리(root)에서 시작해서 잎(leaf)에서 끝나는 것

DOM구조를 조회할 때,노드를 탐색할때 console.dir이 사용한다. console.dir은 console.log와 달리 DOM을 객체의 모습으로 출력한다

노드에 접근하기

getElementById();	- argument로 값으로 Id 식별자를 전달해주면 HTML에 있는 형식 그대로 나옴 - 존제하지 않는 값을 넣어주면 null이나옴
getElementsByClassName();	- argument로 class 식벽자를 전달해주면 사용하는 태그들이 싹다 다 유사배열에 담겨진다 - 메소드(push등)는 사용할수 없음 (=유사배열 특징) - 존재하지 않는 class 속성값을 넣어주면 HTMLCollection[]이 출력됨 (비어있는 배열, null과 다름)
getElementsByTagName();	- HTML에서 쓰이는태그를 넣어주면 쓰이는 태그들의 목록을 유사배열의 형태로 가져옴! - 존제하지 않는 태그를 넣어줄 경우나 유사배열에 저장된다는점 getElementsByClassName와 동일 *- 를 넣어주면 모든 태그내용 가져옴**
querySelector()	- HTML에 있는 형식 그대로 나옴 - 식별자 태그 전부 argument로 전달가능 - class 식별자를 넣으면 유사배열이 아니라 첫번째 요소만 출력
querySelectorAll()	- class처럼 여러값을 가져오거나 유사배열로 출력할때 주로씀 - argument에 모든 식별자가 들어갈 수 있음 -기본적으로 NodeList에 저장됨 - 존재하지 않는 class 속성값을 넣어주면 NodeList[] 로 출력

유사배열이란 : 배열과 다름 인덱스로 접근 가능하지만 배열 메소드 사용불가

DOM 다루기

document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제(DELETE) 할수 있다

document 객체의 createElement 메서드를 이용하여 <div> 요소를 만든다

document.createElement('div')
const tweetDiv = document.createElement('div')
=>div element를 변수 tweetDiv 에 할당

아무것도 연결이 되어있지 않은 하나의 노드를 그린다

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)

append 를 사용하여 container의 맨 마지막 자식 요소로 tweetDiv를 추가할수 있다(container에 노드가 연결됨)

.append()선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
.prepend()선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.
.before()선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다.
.after()선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다.

id가 container인 요소 아래에 tweetDiv를 추가하고, remove로 삭제

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

<body>
   <div>
    <div>hello</div>
    <div id="world">
      world
      <a id="javascript"></a>
    </div>
    <span id="code">code</span>
    <span>states</span>
  </div>
</body>

=> 아이디가 "javascript"이고, 내용이 "awesome"인 <a>요소를 생성하기 위해 옳은 방법
let aElement = document.createElement('a')
aElement.setAttribute('id', 'javascript')
aElement.textContent = 'awesome'


=>삭제시
aElement.remove()
document.querySelector("#world").removeChild(aElement)

728x90

'Javascript' 카테고리의 다른 글

일급객체와 고차함수 (0)	2022.09.20
이벤트 객체 (0)	2022.09.14
구조 분해 할당 (0)	2022.09.07
Spread / Rest 문법 (0)	2022.09.07
클로저 ★ (0)	2022.09.06