16. JavaScript Ex.15 DOM(Document Object Model)

본 글은 HTML5, CSS 학습한 상태에서 작성한 글입니다.

 

JavaScript html DOM(Document Object Model)

1. W3C 협회 표준

2. 웹페이지, 웹문서에 엑세스하기 위한 표준

ㄱ. 동적(js)으로 html 요소 내용 변경

ㄴ.   css 변경

ㄷ.   event 처리 (등록, 삭제)

ㄹ.   html 요소 추가/ 수정/ 삭제

3. W3C 표준 DOM 3가지

ㄱ. CoreDOM : 문서 유형에 상관 없이 모든 문서에 대한 표준 모델

   ㄴ. HTML DOM : html 문서의 표준 모델

     ㄷ. XML DOM : xml 문서의 표준 모델

4-1) DOM 메서드 사용해서 객체(요소) 얻어오는 방법(4가지)

document.ElementtById("id");

getElementsByTagName("p");

getElementsByClassName("team");

querySelectorAll("team");

4-2)

element.innerHTML = new content;

element.style.property = new style;

element.attribute = new value;

element.setAttribute( 속성명, 속성값 );

element.getAttribute( 속성명 );

4-3) html : 요소를 추가하고 삭제

document.createElement(element); //요소 생성

document.appendChild(element); //요소 자식으로 추가

document.removeChild(element); // 요소 제거

document.replaceChild(element); // 요소 변경

document.write(text);

4-4) 이벤트 핸들러 추가 / 삭제 (DOM 사용해서 이벤트 처리)