Language/Javascript
Javascript DOM
Jinn
2023. 10. 26. 00:21
DOM(Document Object Model, 문서 객체 모델): 웹 브라우저가 HTML 파일을 분석하고 출력하는 방식
HTML 태그를 자바스크립트 객체로 만든 것을 문서 객체라고 한다.
즉, 자바스크립트 코드로 HTML을 조작할 수 있다.
문서 객체 선택
- document.querySelector(태그)
- document.querySelectotAll(태그)
- document.getElementById(id값)
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
document.querySelector('h1').style.color = 'blue';
}
</script>
</head>
<body>
<h1>javascript - 1</h1>
<h1>javascript - 2</h1>
<h1>javascript - 3</h1>
</body>
</html>
여러개의 h1 태그에서 첫번째만 선택되었다.
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
const headers = document.querySelectorAll('h1');
for(let head of headers)
head.style.color = 'blue'
}
</script>
</head>
<body>
<h1>javascript - 1</h1>
<h1>javascript - 2</h1>
<h1>javascript - 3</h1>
</body>
</html>
h1 태그가 모두 선택되어 배열로 반환한다.
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
const header = document.getElementById('no2');
header.style.color = 'blue';
}
</script>
</head>
<body>
<h1 id="no1">javascript - 1</h1>
<h1 id="no2">javascript - 2</h1>
<h1 id="no3">javascript - 3</h1>
</body>
</html>
이름 그대로 태그의 id값으로 선택한다.
문자 조작
- 문서객체.innerHTML
- 문서객체.textContent
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
const header = document.getElementById('header');
const origin = header.innerHTML;
header.innerHTML = '자바스크립트<br>';
header.innerHTML += 'origin = ' + origin;
}
</script>
</head>
<body>
<h1 id="header">javascript</h1>
</body>
</html>
"javascript"가 아닌 "자바스크립트"로 출력된다.
innerHTML은 문서 객체 내부의 문자를 의미한다.
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
const header = document.getElementById('header');
const origin = header.textContent;
header.textContent = '자바스크립트<br>';
header.textContent += 'origin = ' + origin;
}
</script>
</head>
<body>
<h1 id="header">javascript</h1>
</body>
</html>
textContent는 innerHTML과 달리 태그를 문자로 인식한다.
속성 조작
- setAttribute(속성이름, 속성값) : 속성 지정
- getAttribute(속성이름) : 속성 값 가져오기
- 웹 표준에 정의된 속성
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
const image = document.getElementById('image');
image.src = 'https://via.placeholder.com/300x200';
image.width = 300;
image.height = 200;
}
</script>
</head>
<body>
<img id="image">
</body>
</html>
웹 표준에서 정의된 속성은 메서드 없이 바로 접근할 수 있다.
메서드 없이 img 태그의 속성을 추가했다.