JAVASCRIPT STEP 34 - DOM

★ DOM, Document Object Model

• BOM > name 사용, id/class 인식 불가능
• DOM > name/id/class 모두 사용.(name 비권장)
• BOM 다음 버전
• 모든 태그 조작 가능
• 기능 풍부
• 태그 검색 도구 > 풍부
• DOM LEVEL 1 > DOM LEVEL 2 > DOM LEVEL 3
• DOM LEVEL 0(BOM)
• DOM > BOM 확장 : DOM의 모든 기능을 BOM의 document 내부에 구현해놨다.

 

■ DOM > 태그 검색(식별자)

• 1. id 검색

document.getElementById('id')

• 2. class 검색

document.getElementByClassName('class')

• 3. name 검색

document.getElementByName('name')

• 4. 태그명 검색

document.getElementByTagName('tag')

• 5. CSS 선택자 검색

document.querySelector('selector')
document.querySelectorAll('selector')

 

■ 검색 ex)

• 1. id 검색

// <input type="text" name="txt1" id="txt1" class="txt">

// BOM
window.document.form1.txt1.value = 'BOM';

// DOM
document.getElementById('txt2').value = 'DOM';

//태그를 BOM으로 검색하던, DOM으로 검색하던, 검색 결과는 동일하다
alert(document.form1.txt1 === document.getElementById('txt1'));

• 2. class 검색

//클래스를 검색
let txt = document.getElementsByClassName('txt');
console.log(txt.length);

for (let i=0; i<txt.length; i++) {
    txt[i].value = i;
}

• 3. name 검색

//name 검색
document.getElementsByName('txt1')[0].value = '홍길동';

• 4. 태그명 검색

//태그명 검색
let input = document.getElementsByTagName('input');

for(let i=0; i<input.length; i++) {
    input[i].value = i;
}

• 5. CSS 선택자 검색

//CSS 선택자 사용
document.querySelector('#txt1').value = 'CSS';

alert(document.querySelectorAll('.txt').length);