🍎DOM

👌What is DOM?

👍웹페이지의 html을 계층화 시켜 트리구조로 만든 객체모델

👍javaScript는 이 모델로 웹페이지에 접근, 페이지를 수정

👍DOM은 웹페이지(HTML)와 script언어(javascript)를 서로 잇는 역할입니다.

위의 사진에서 보여지듯 DOM은 웹페이지(HTML)에 접근하여 요소를 생성,내용을 추가, 클래스를 부여,스타일을 수정하는등의 일을 합니다.

👌About DOM

document객체는 DOM트리의 root node에 접근한다.
document 객체로 요소(element)에 접근하듯 속성(attribute)값에도 접근할 수 있다.
그런식으로 class, id추가 및 style수정도 가능하다.

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

위의 코드는 body태그 안에 아무리 많은 요소가 있어도 innerHTML을 이용해 모두 교체된것 입니다.

👌특정 요소에 접근할때는?

tag, class, id와 같은 css selector로 접근

const wecodeElement = document.querySelector('.blue');
wecodeElement.style.backgroundColor='blue';

위에서 보이는것중 background-color를 camelCase로 표기한 것이 보인다.
javascript에서 style을 수정 할때는 -을 사용할 수 없어서 그렇다.

이러한 방식을 이용해 element를 생성할 수도 있다.
.createElement(tagName)함수로 요소를 만든다.