영벨롭 개발 일지

[JavaScript]자바스크립트 DOM API란? 본문

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

 

반응형
저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript]자바스크립트 Swiper 라이브러리 사용하기  (0) 2022.04.22
[JavaScript]자바스크립트 lodash 라이브러리: debounce, throttle  (0) 2022.04.21
[JavaScript]자바스크립트 GSAP 라이브러리 사용하기: gsap.to()  (0) 2022.04.19
[JavaScript]자바스크립트로 input 박스 제어  (0) 2022.04.19
[JavaScript]자바스크립트 이벤트 event : 이벤트 리스너, 이벤트 종류, preventDefault  (0) 2022.04.15
'Programming Language/JavaScript' Related Articles more