DOM
- DOM(Document Object Model)은 HTML과 XML의 구조를 정의하는 API제공
- 문서의 요소 집합을 트리 형태의 계층구조 HTML로 표현
- 가장 위에는 document 노드가 있고, 아래로는 HTML 태그나 요소들을 표현하는 노드와 문자열을 표현하는 노드가 있음
<html>
<head>
<title> 제목 </title>
</head>
<body>
<h1> 안녕하세요. </h1>
<h2> 잔디입니다! </h2>
</body>
</html>↓
document 객체 만들기
| 함수명 | 설명 |
| createElement(tagName) | element node 생성 |
| createTextNode(text) | text node 생성 |
| appendChild(node) | 객체에 node를 child로 추가 |
| setAttribute(name, value) | 객체 속성 지정 |
| getAttribute(name) | 객체 속성값 가져옴 |
| innerHTML | 문자열을 HTML태그로 삽입 |
| innerText | 문자열을 text node로 삽입 |
let tagH1 = document.createElement('h1');
let msg = document.createTextNode('안녕하세요');
tagH1.appendChild(msg);
document.body.appendChild(tagH1);
//속성 설정
let profile = document.createElement('img');
profile.src = 'profile.png';
profile.width = 100;
profile.setAttribute('src', 'profile.png');
profile.setAttribute('width', 100);
// 텍스트 삽입
let html = document.getElementById('a1');
let text = document.getElementById('a2');
html.innerHTML = '<h2> Hello! </h2>';
text.innerText = 'Hello!';document 객체 가져오기 & 제거
| 함수명 | 설명 |
| getElementById(id) | 태그의 id 속성이 id와 일치하는 element 객체 |
| getElementsByClassName(classname) | 태그의 class 속성이 classname과 일치하는 element 배열 |
| getElementsByTagName(tagname) | 태그의 이름이 tagname과 일치하는 element 배열 |
| getElementsByName(name) | 태그의 name 속성이 name과 일치하는 element 배열 |
| querySelector(selector) | selector에 일치하는 첫번째 element 객체 |
| querySelectorAll(selector) | selector에 일치하는 모든 배열 |
| removeChild(childNode) | 객체의 자식 노드 제거 |
* selector 참고
2022.03.08 - [Web - FE/CSS] - [CSS] 선택자(Selector)
📍 DOM은 HTML 문서의 내용을 조작할 수 있는 API로 HTML을 계층구조 형식의 객체로 표현
📍 DOM을 사용해서 HTML문서의 검색과 조작(추가, 수정, 삭제)이 가능
'JavaScript' 카테고리의 다른 글
| [JavaScript] 웹 스토리지(Web Storage) - localStorage, sessionStorage (0) | 2022.03.08 |
|---|---|
| [JavaScript] 이벤트(Event) (0) | 2022.03.08 |
| [JavaScript] Web Browser와 Window 객체 (0) | 2022.03.08 |
| [JavaScript] JS의 기본 (특징, 문법) (0) | 2022.03.04 |
