웹페이지

JAVASCRIPT STEP 34 - DOM

2023. 4. 26. 11:14
728x90

★ 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);

 

728x90
저작자표시 비영리 변경금지 (새창열림)

'웹페이지' 카테고리의 다른 글

JAVASCRIPT STEP 36 - AXIS  (0) 2023.04.26
JAVASCRIPT STEP 35 - Content  (0) 2023.04.26
JAVASCRIPT STEP 33 - Constructor  (0) 2023.04.26
JAVASCRIPT STEP 32 - Function  (0) 2023.04.26
JAVASCRIPT STEP 31 - Timer 예제2  (0) 2023.04.25
'웹페이지' 카테고리의 다른 글
  • JAVASCRIPT STEP 36 - AXIS
  • JAVASCRIPT STEP 35 - Content
  • JAVASCRIPT STEP 33 - Constructor
  • JAVASCRIPT STEP 32 - Function
IT의 큰손
IT의 큰손
IT계의 큰손이 되고 싶은 개린이의 Log 일지
Developer Story HouseIT계의 큰손이 되고 싶은 개린이의 Log 일지
IT의 큰손
Developer Story House
IT의 큰손
전체
오늘
어제
  • 분류 전체보기 (457)
    • 정보처리기사 필기 (18)
    • 정보처리기사 실기 (12)
    • 정보처리기사 통합 QUIZ (12)
    • 빅데이터 (11)
    • 안드로이드 (11)
    • 웹페이지 (108)
    • 자바 (49)
    • SQLD (3)
    • 백준 알고리즘 (76)
    • 데이터베이스 (41)
    • 깃허브 (2)
    • Library (14)
    • Server (31)
    • 크롤링&스크래핑 (3)
    • Spring (23)
    • Vue.js (13)
    • React (27)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • Developer Stroy House

인기 글

태그

  • DBA
  • 개발블로그
  • jsp
  • 웹페이지
  • 백준
  • it
  • ajax
  • IT자격증
  • 알고리즘
  • html
  • java
  • DB
  • 정보처리기사필기
  • 자바
  • JavaScript
  • 웹개발자
  • 앱개발자
  • 정보보안전문가
  • IT자격증공부
  • 백엔드
  • React
  • 데이터베이스
  • 웹개발
  • 프론트엔드
  • 코딩테스트
  • jquery
  • IT개발자
  • css
  • 개발자
  • 정보처리기사

최근 댓글

최근 글

Designed By hELLO
IT의 큰손
JAVASCRIPT STEP 34 - DOM
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.