[JavaScript] DOM

DOM 이란?

ㅇ

DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식

자바스크립트가 DOM을 통하여  HTML 과 CSS로 구성된 웹의 구조에 접근하고 컨트롤 가능

 

객체 접근

querySelector(’선택자’) : 선택자로 첫 번째 요소

querySelectorAll(’선택자’) : 선택자와 일치하는 모든 요소

 

문서 객체 속성변경

<h1 id="heading">문서 객체 속성 변경</h1>
<img src="coffee-pink.jpg" id="cup" width="200" height="200">
 
<script>
	document.querySelector('#heading').innerHTML ='이미지 변경';
	let bigPic = document.querySelector("#cup"); 
	bigPic.setAttribute('src', 'coffee-gray.jpg');
</script>

 

문서 객체 스타일 변경

<h1 id="heading">문서 객체 스타일 변경</h1>

<script>
	let header = document.getElementById('heading');
	header.style.border = '2px solid red';
	header.style.backgroundColor = 'pink';
</script>

 

문서 객체 제거

let cup = document.getElementById('cup');
cup.parentNode.removeChild(cup);

 

추후 줄서 프로젝트로 더욱 다룰 예정

 

 

 

- Just Do It -