뮁이의 개발새발
[HTML] DOM 본문
[DOM이란!?]
- Document Object Model
- HTML과 XML문서의 구조를 정의하는 API를 제공
[문서 객체 만들기]
- createElement(tagName) : element node 생성
- createTextNode(text): text node 생성
- appendChild(node): 객체에 node를 child로 추가.
window.onload = function () {
// 변수를 선언하고 element node와 text node 생성.
var title = document.createElement('h2');
var msg = document.createTextNode('Hello SSAFY !!!');
// text node를 element node에 추가.
title.appendChild(msg);
document.body.appendChild(title);
};[문서 객체 속성 설정]
- setAttribute(name, value)
- getAttribute(name);
* 웹 브라우저가 제공하지 않는 태그의 속성도 가능
- innerHTML : 문자열을 html태그로 삽입
- innerText: 문자열을 text node로 삽입
[문서 객체 가져오기]
- getElementById(id): 태그의 id 속성이 id와 일치하는 element 객체 얻기
- getElementsByClass(classname): 태그의 class 속성이 class name과 일치하는 element 배열 얻기.
- getElementsByTagName(tagname): 태그 이름이 tagname과 일치하는 element 배열 얻기
- getElementsByName(name): 태그의 name 속성이 name과 일치하는 element 배열 얻기
- querySelector(selector): selector에 일치하는 첫번째 element 객체 얻기
- querySelectorAll(selector): selector에 일치하는 모든 element 배열 얻기
[문서 객체 제거]
- removeChild(childnode): 객체의 자식 노드를 제거.