[JavaScript] 문서 객체 모델(DOM)

document 객체(DOM)

- 웹 문서에 접근하고 제어할 수 있도록, 문서를 체계적으로 정리한 객체 집합

- HTML 페이지 읽으면서 문서 객채 생성(정적)

- Javascript로 문서 객체 생성

DOM 트리

문서 객체 가져오기

메서드	설명
getElementById(id)	Id가 일치하는 요소
getElementsByClassName(class)	class가 일치하는 요소들
getElementsByTagName(tagName)	tagName이 일치하는 요소들
getElementsByName(name)	name이 일치하는 요소들
querySelector('선택자')	선택자로 첫번째 요소
querySelectorAll('선택자')	선택자와 일치하는 모든 요소
- 직접 선택자 : id, class, formName, elementName ... - 간접 선택자 : parentNode, childNode, firstChild, children, nextSibling, previousSibling ...

 

웹 요소 가져오기

- querySelector() : 하나의 요소맊 가져옴 - 여러 개인 경우 첫번째 요소맊 가져옴

- querySelectorAll() : 여러 개의 요소를 배열 형태로 가져옴 - nodelist()에 저장

 

웹 요소 내용 가져오기

- 웹 요소.innerText – 브라우저 창에 보이는 내용맊 가져옴

- 웹 요소.innerHTML – 태그와 함께 가져옴

- 웹 요소.textContent – 소스에 입력되어짂 그대로 가져옴

 

웹 요소 내용 수정하기

- 웹 요소.innerText = 내용

- 웹 요소.innerHTML = 내용

- 웹 요소.textContent = 내용

- 이미지 요소.src = 이미지 파일

- 웹 요소.style.속성명 = 속성값 :

두 단어 이상 속성명 : background-color => backgroundColor

 

문서 객체 속성 변경

<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");
console.log(bigPic.getAttribute('src')); => img/coffee-pink.jpg
bigPic.setAttribute('src', 'coffee-gray.jpg');
</script>

 

문서 객체 스타일 변경

let header = document.getElementById('heading');

header.style.border = '2px solid red';

header.style.backgroundColor = 'pink';

 

문서 객체 제거

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

cup.parentNode.removeChild(cup); //부모 노드를 이용한 삭제

cup.remove() // 바로삭제