[HTML+CSS+JS] DOM

1.DOM ( Document Object Model )

• DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델이다.

• javascript는 이 model로 웹 페이지에 접근하고, 페이지를 수정 할 수 있습니다.

• DOM은 HTML인 웹페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할이다.
  

• javascript는 document라는 전역객체를 통해 HTML에 접근할 수 있다.

• javscript의 document 객체는 DOM 구조를 접근하는 관문이며, document 객체는 HTML 문서를 나타낸다고 말할 수 있다.

2.html 접근

• document객체는 DOM트리의 root node에 접근하게 해준다.
• document객체로 요소(element)에 접근하듯이 요소의 속성(attribute)에도 접근할 수 있다.
• class, id도 추가하고 style도 수정할 수 있다.
• element의 내용(content)는 innerHTML으로 접근하고 수정할 수 있다.

document.body.innerHTML = '내용 다 바꿈';

• 위는 body태그 내부에 있는 것을 '내용 다 바꿈'이라는 텍스트로 바꾼 것이다.
• body태그내에 엄청나게 많은 요소가 있더라도 innerHTML을 사용하면 내용이 전부 교체된다.

3.element 접근

• 특정 element를 접근하고 싶을 때도 tag, class, id와 같은 css selector로 접근이 가능하다.

let blueElement = document.querySelector('.blue');
blueElement.style.backgroundColor = 'blue';

• 위의 코드로 css가 수정되었는데 css에서 사용하던 property명과는 조금 다르다.
• javascript에서 style을 수정할 때 하이픈(-)은 사용할 수 없다.
• 객체에서 프로퍼티 이름에 하이픈을 사용할 수 없던 이유와 같다.
• style의 프로퍼티에 접근하고 싶을 때 camelCase로 바꾸면 된다.

4. element 생성

• .createElement(tagName) 하수를 사용하면 요소(element)를 만들 수 있다.
• 요소를 만들기만 할 뿐, 아직 html의 어디에 들어가야 할지 지정해준 것은 아니다.
• innerHTML는 내용을 전부 대체 시켰다면 appendChild함수는 요소의 뒤쪽에 붙여준다.