DOM — 태그 검색
BOM vs DOM 최상위 객체
-
BOM → window
-
DOM → document
태그 검색 방법
| 메서드 | 식별자 | 반환 |
|---|---|---|
| getElementById('id') | id | 단일 객체 |
| getElementsByClassName('class') | class | 배열 |
| getElementsByName('name') | name | 배열 |
| getElementsByTagName('tag') | 태그명 | 배열 |
| querySelector('CSS선택자') | CSS 선택자 | 단일 객체 (첫번째) |
| querySelectorAll('CSS선택자') | CSS 선택자 | 배열 |
- BOM / DOM 검색 결과는 동일한 객체 → === 비교 시 true
- querySelector / querySelectorAll — ES6(2014) 추가, 이전엔 jQuery가 대신함
콘텐츠 조작
- 시작 태그 ~ 끝 태그 사이 내용물 읽기/쓰기 — BOM 불가, DOM만 가능
프로퍼티| 태그 인식| 표준
innerText |❌ 문자열 그대로 |❌ 비표준(MS)
innerHTML |✅ 태그 실행| ✅
textContent| ❌ 문자열 그대로 |✅
div1.innerHTML = '아<u>무</u>개'; // <u> 태그 실행됨
div1.innerText = '아<u>무</u>개'; // <u> 문자 그대로 출력
div1.innerHTML = ''; // 전체 삭제DOM 조작 — 태그 생성
방법 비교
| 방법 | 난이도 | 비용 | 복잡한 조작 |
|---|---|---|---|
| innerHTML | 쉬움 | 저렴 | 어려움 |
| 표준 기능 | 복잡 | 고가 | 용이 |
표준 방식 태그 생성 흐름
// 태그 생성
var input = document.createElement('input');
// 속성 추가 방법 1 — createAttribute
var type = document.createAttribute('type');
type.value = 'text';
input.setAttributeNode(type);
// 속성 추가 방법 2 — setAttribute (간결, 권장)
input.setAttribute('type', 'text');
input.setAttribute('size', '10');
// 텍스트 추가
p.textContent = '문단입니다.';
// 또는
var txt = document.createTextNode('문단입니다.');
p.appendChild(txt);
// 이벤트 등록 후 DOM에 추가
input.onclick = function() { alert(); };
div1.appendChild(input);
// 태그 삭제
div1.removeChild(hr);innerHTML로 버튼 생성 후 이벤트 등록은 사용 금지 ❌ → 표준 방식으로 생성 후 onclick 직접 등록
DOM 이벤트 — addEventListener
BOM 방식 vs DOM 방식
| 구분 | 등록 방식 | 다중 이벤트 |
|---|---|---|
| BOM | btn.onclick = 함수 | ❌ 덮어쓰기 |
| DOM | btn.addEventListener('click', 함수) | ✅ Invocation List |
// 동일 버튼에 이벤트 여러 개 등록
btn3.addEventListener('click', m6);
btn3.addEventListener('click', m7); // m6, m7 모두 실행
// 특정 이벤트 제거
btn3.removeEventListener('click', m6); // m7만 남음DOM 축(Axis) — 노드 탐색
노드 타입
| 타입 | 번호 | nodeName | nodeValue |
|---|---|---|---|
| 태그 | 1 | 태그명(대문자) | null |
| 속성 | 2 | 속성명 | 속성값 |
| 텍스트(PCDATA) | 3 | #text | 문자열 |
| 주석 | 8 | #comment | — |
탐색 프로퍼티
| 방향 | 노드 포함 | 태그만 |
|---|---|---|
| 자식 전체 | childNodes | children ⭐ |
| 첫 자식 | firstChild | firstElementChild |
| 마지막 자식 | lastChild | lastElementChild |
| 부모 | parentNode | parentElement |
| 이전 형제 | previousSibling | previousElementSibling |
| 다음 형제 | nextSibling | nextElementSibling |
// 자식 중 태그만 className 변경
for (var i = 0; i < me.childNodes.length; i++) {
if (me.childNodes[i].nodeType == 1) {
me.childNodes[i].className = 'check';
}
}
// 형제 탐색
me.previousElementSibling.className = 'check'; // 작은형
me.nextElementSibling.className = 'check'; // 동생childNodes — 텍스트/주석 노드 포함 → children 사용 권장 ⭐
