09009
[Javascript] 문서 객체 조작 본문
글자 조작
문서 객체 내부에 있는 글자를 조작할 때 아래와 같은 속성을 사용한다.
| textContent | 문서 객체 내부 글자를 순수 텍스트 형식으로 가져온다 |
| innerHTML | 문서 객체 내부 글자의 HTML 태그를 반영하여 가져온다 |
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 이벤트를 연결합니다.
window.onload = function() {
// 변수를 선언합니다.
var output = '';
for (var i = 0; i < 10; i++) {
output += '<h1>Haaland - ' + i + '</h1>';
}
// 1. 문서 객체 내부의 글자를 변경합니다.
// document.body.textContent = output; // 1
// 2. HTML 태그를 적용하여 내부글자를 변경합니다.
document.body.innerHTML = output; //2
};
</script>
</head>
<body>
</body>
</html>💻 출력
1. textContent 속성을 사용하면 입력한 글자가 body 태그 내부에 바로 들어간다.
2. innerHTML 속성을 사용하면 HTML 태그를 적용하여 내부 글자를 변경한다.
스타일 조작
자바스크립트로 CSS 속성 값을 추가, 제거, 변경 가능 → 문서 객체의 style 속성을 변경하면 된다.
자바스크립트에서는 특수문자 '-'를 식별자에 사용할 수 없기 때문에 2)처럼 작성하여야 한다.
(연결된 단어의 첫 글자를 대문자로 변경해야함)
1) 에러 발생 코드
2) 올바른 코드
단, 문자열을 사용하여 스타일 속성에 접근할 때는 위 두 가지 방법 모두 가능하다.
아래는 div 태그 256개가 위쪽에서 아래쪽으로 그레이디언트를 형성하는 예시 소스코드이다.
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 이벤트를 연결합니다.
window.onload = function() {
// 문서 객체를 추가합니다.
var output = '';
for (var i = 0; i < 256; i++) {
output += '<div></div>';
}
document.body.innerHTML = output;
// 문서 객체를 선택합니다.
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
// 변수를 선언합니다.
var div = divs[i];
// 스타일을 적용합니다.
div.style.height = '2px';
div.style.background = 'rgb(' + i + ',' + i + ',' + i + ')';
}
};
</script>
</head>
<body>
</body>
</html>💻 출력
속성 조작
문서 객체의 속성을 조작할 때는 아래와 같은 메서드를 사용한다.
| setAttribute(속성 이름, 속성 값) | 속성 지정 |
| getAttribute(속성 이름) | 속성 추출 |
웹 표준에서 지정한 속성은 아래와 같이 곧바로 접근이 가능할 수도 있다.
image src = 'hello.png';
alert(image.src)웹 표준에서 지정하지 않은 속성에 접근할 때 setAttribute() 메서드와 getAttribute() 메서드를 사용한다.
웹 표준에서 지정하지 않은 속성이 무엇일까?
아래 소스코드는 body 태그에 data-custom이라는 속성을 지정한 후 속성을 다시 추출하여 출력한 것이다.
웹 표준에서 지정하지 않은 속성이기 때문에 속성 조작 메서드를 사용해야 한다.
body 태그 속성 조작하기
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 이벤트를 연결합니다.
window.onload = function() {
// 속성을 지정합니다.
document.body.setAttribute('data-custom', 'value');
// 속성을 추출합니다.
var dataCustom = document.body.getAttribute('data-custom');
alert(dataCustom);
};
</script>
</head>
<body>
</body>
</html>💻 출력
img 태그 속성 조작하기
✍ 입력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 이벤트를 연결합니다.
window.onload = function() {
// 변수를 선언합니다.
var image = document.getElementById('image');
// 속성을 변경합니다.
image.src = 'http://via.placeholder.com/300x200';
image.width = 300;
image.height = 200;
};
</script>
</head>
<body>
<img id="image">
</body>
</html>💻 출력
'Front-End > Javascript' 카테고리의 다른 글
| [Javascript] 입력 양식 포커스 - 회원가입 양식 (0) | 2023.04.04 |
|---|---|
| [Javascript] 이벤트 (0) | 2023.04.03 |
| [Javascript] 문서 객체 모델 (0) | 2023.04.03 |
| [Javascript] 함수와 객체 (0) | 2023.04.01 |
| [Javascript] 변수, 조건문, 반복문, 배열 (0) | 2023.04.01 |