DOM (Document Object Model)
웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object)모델이다.
- JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.
-DOM은 HTML인 웹 페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할
-JavaScript가 HTML에 어떻게 접근하는가?
: document라는 전역객체를 통해 접근한다.
-JavaScript의 document 객체는 DOM 구조를 접근하는 관문이고, document 객체는 HTML문서를 나타낸다.
-document객체는 DOM트리의 root node에 접근하게 해준다.document객체로 요소(element)에 접근하듯이 요소의 속성(attribute)에도 접근할 수 있다. class,id도 추가하고 style도 수정할 수 있다.
-요소의 내용(content)는 innerHTML으로 접근하고 수정할 수 있다.
document.body.innerHTML = '내용 다 바꿈';: body태그 내부에 있는 것을 '내용 다 바꿈'이라는 텍스트로 바꾼 것,
body태그 내에 많은 요소가 있더라도 innerHTML을 사용하면 내용이 전부 교체된다.
-특정 element를 접근하고 싶을 때:
let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';tag,class,id와 같은 css selector로 접근이 가능하다.
-JavaScript에서 style 수정할 때는 hypen(-)은 사용할 수 없다.
객체에서 프로퍼티 이름에 hypen(-)을 사용할 수 없던 이유와 같다.
그러므로 style의 프로퍼티에 접근하고 싶을 때 camelCase로 바꾸면 된다.
-element를 생성 : .createElement(tagName) 함수를 사용하면 요소(element)를 만들 수 있다. 이후에 HTML의 어디에 들어가야할 지(elemet에 append) 지정해줘야 한다.
- innerHTML : 내용 전부 대체
appendChild: 요소의 뒤쪽에 붙여준다.
