DOM


DOM(돔)이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object) 모델이다.
JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.

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

스크린샷 2019-08-09 오후 2.46.23.png

document라는 전역객체를 통해 접근할 수 있다.
document는 HTML 문서를 나타낸다고 말할 수 있습니다.

스크린샷 2019-08-09 오후 2.58.49.png

스크린샷 2019-08-09 오후 2.57.53.png

스크린샷 2019-08-09 오후 3.00.52.png

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

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

특정 element를 접근하고 싶을 때

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

JavaScript에서는 style 수정할 때 hypen(-)은 사용할 수 없다

.createElement(tagName)로 elemnt를 생성할수도 있다.
함수를 사용하면 요소(element)를 만들 수 있습니다.

createElement

HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환한다.(새로운 Element) tagName을 인식할 수 없으면 HTMLUnknownElement를 대신 반환한다.

className

특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다.

let elm = document.getElementById('item');

if(elm.className === 'active'){
    elm.className = 'inactive';
} else {
    elm.className = 'active';
}

getElementById() 함수 , 자바스크립트 id 접근

이 함수는 태그에 있는 id 속성을 사용하여 해당 태그에 접근하는 함수이다.
만약 해당하는 id 를 가진 태그가없을경우 null 에러가 발생한다.