Programming Language/JavaScript
[JavaScript]자바스크립트 DOM API란?
영벨롭
2022. 4. 21. 21:02
[ DOM이란? ]
문서 객체 모델(DOM, Document Obect Model)은 자바스크립트에서 HTML과 XML을 제어하는 여러가지 명령들을 제공해주는 인터페이스입니다.
즉, 웹페이지를 스크립트 또는 프로그래밍 언어들에서 사용할 수 있게 연결시켜주는 역할을 합니다.
[ HTML 요소 검색 ]
- document.querySelector('선택자')
'선택자'로 html 요소 중 첫 번째 요소 하나만 검색
- document.querySelectorAll('선택자')
html 요소 중 '선택자'에 해당하는 모든 요소들 검색, 배열로 리턴
- document.getElementById('아이디')
아이디 이름으로 요소 검색
html 요소 중 '아이디'를 갖고 있는 요소 검색
- document.getElementByTagName('태그')
태그 이름으로 요소 검색
html 요소 중 '태그'에 해당하는 모든 요소들 검색, 배열로 리턴
- document.getElementByClassName('클래스')
클래스 이름으로 요소 검색
html 요소 중 '클래스'에 해당하는 모든 요소들 검색, 배열로 리턴
[ DOM 객체 동적 생성 및 자식 요소로 추가/삭제 ]
- document.createElement('태그')
- el.appendChild(자식 객체)
- el.removeChild(자식 객체)
const parent = document.querySelector('.parent');
const child = document.createElement('div');
parent.appendChild(child);
parent.removeChild(child);
[ 요소의 클래스 정보 객체 활용 : 클래스 추가/삭제/검색 ]
- el.classList.add('클래스')
el 객체에 '클래스' 라는 클래스 추가
- el.classList.remove('클래스')
el 객체에서 '클래스' 라는 클래스 삭제
- el.classList.contains('클래스')
el 객체에 '클래스' 라는 클래스 있다면 true 반환, 없다면 false 반환
const el = document.querySelector('.box');
el.classList.add('active');
el.classList.remove('active');
el.classList.contains('active');
[ 요소의 값 Get / Set : el.textContent ]
다음과 같이 작성하면 웹 브라우저에 당연하게도 아무것도 나타나지 않겠죠?
<body>
<span class="text"></span>
</body>
textContent를 사용하여 값을 지정할 수 있습니다.
const text = document.querySelector('.text');
let val = text.textContent; //get
console.log(val);
text.textContent = 'hello'; //set
val = text.textContent; //get
console.log(val);
반응형