javascript dom에 관하여...(1)

자바스크립트에서 꽤나 중요하고 잘 알아야 하는 부분이라고 생각해서 정리를 하려고 한다.

dom객체는 쉽게 말해 window에서 퍼블릭하게 제공하는 api라고 생각하면 될거같다.

가장 많이 쓰이고 중요하다고 생각하는 것이 접근하는 방법이라고 생각한다.

밑 예제를 살펴보자.

문제를 분석해보면,
1.html에 P태그를 생성한다.
2.P태그 요소에 dom이라는 class 이름을 만든다.
3.p태그 요소에 DOM이라는 텍스트를 넣는다.
4.h1태그 자식으로 추가한다.

html에 접근하지 않고 dom객체를 이용하여 자바스크립트를 통해 html을 만들 수 있다.

1. html에 P태그를 생성한다.
   => let createPtag = document.createElement('p');

2. P태그 요소에 dom이라는 class 이름을 만든다..
   => createPtag.className('dom')

3. p태그 요소에 DOM이라는 텍스트를 넣는다.
   => createPtag.innerHTML('DOM')

4. h1태그 자식으로 추가한다.

let head = document.getElementsByTagName('h1')[0]
(getElementsByTagName은 배열을 반환 하므로 얻고자하는 배열의 인덱스값을 넣어야함!!!)

head.appendChild(createPtag);