728x90
1. 문서 객체 선택이란?
문서 객체를 선택한다는 것은?
👉 이미 존재하는 HTML 태그를 자바스크립트에서 문서 객체로 변환하는 것
2. 문서 객체 선택 메서드 종류
🩶 1개를 선택하는 메서드 🩶
- document.getElementyById(아이디) : 아이디로 1개 선택
- document.querySelector(선택자) : 선택자로 1개 선택
👉 이름이 같은 선택자가 여러 개라면 가장 먼저 등장하는 것을 선택함
🩶 여러 개를 선택하는 메서드 🩶
- document.getElementyByName(이름) : name 속성으로 여러 개 선택
- document.getElementByClassName(클래스) : class 속성으로 여러 개 선택
- document.querySelectorAll(선택자) : 선택자로 여러 개 선택
3. 문서 객체 조작 개요
SPA란?
👉 Single Page Application
웹 페이지를 한 번만 읽어들이고, 사용자가 조작할 때 웹 페이지 내용을
자바스크립트를 사용해 바꾸는 형태의 웹 페이지
- SPA의 장점
- 웹 페이지를 여러 번 요청하지 않아도 되어 서버 부담 줄어듦
- 사용자가 웹 페이지를 이동할 때 새로 웹 페이지를 읽어 들이며 발생하는 깜빡임도 없어짐
👉 이러한 웹 페이지 개발을 위해 React, Vue, 자바스크립트 프레임워크가 등장
4. 문서 객체 조작 - 글자 조작
- textContent : 문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경
👉 입력한 글자가 body 태그 내부에 바로 들어감 - innerHTML : 문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경
👉 HTML 태그를 적용해 내부 글자를 변경함
5. 문서 객체 조작 - 스타일 조작
- 자바스크립트로 CSS 속성 값을 수정/변경할 수 있다. 👉 style 속성을 변경
- 자바스크립트는 특수 문자 '-'를 사용할 수 없으므로 -로 연결된 단어의 첫 번째 글자를 대문자로 바꿔주면 됨
더보기
예시)
Element.style.background-color 👉 Element.style.backgroundColor
| 스타일시트의 스타일 속성 | 자바스크립트의 스타일 식별자 |
| background-image | backgroundImage |
| background-color | backgroundColor |
| box-sizing | boxSizing |
| list-style | listStyle |
더보기
문자열을 사용한 스타일 속성 접근
: 문자열을 사용해 스타일 속성에 접근할 때는 다음 두 가지 방법을 모두 사용할 수 있음
document.body.style['backgroundColor'] = 'red';
document.body.style['background-color'] = 'red';
- 아래 예제는 div 태그 256개가 위쪽에서 아래쪽으로 그레디언트를 형성함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Basic</title>
<script>
window.onload = function() {
var output = '';
// body에 256개의 div 생성
for(var i=0; i<256; i++) output += '<div></div>';
document.body.innerHTML = output;
// 아래로 2px씩 내려갈 때마다 색을 점차 밝혀나감
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>
6. 문서 객체 조작 - 속성 조작
- setAttribute(속성 이름, 속성 값) : 속성 지정
- getAttribute(속성 이름) : 속성 추출
더보기
웹 표준에서 지정하지 않은 속성이 있는 경우
문자열 data-로 시작하는 것(사용자 지정 속성)은 반드시 속성 조작 메서드를 사용해서 접근해야 함
🩶 img 태그 속성 조작하기 🩶
- 자바스크립트의 문서 객체 코드에서 src 속성 등을 지정하므로 setAttribute, getAttribute를 쓰지 않고 .src 같은 식으로 속성을 변경할 수 있다.
🩶 body 태그 속성 조작하기 🩶
- 아래 예제는 body 태그에 data-custom 속성을 지정한 후 속성을 다시 추출해서 출력한다.
웹 표준에서 지정하고 있지 않은 속성이므로 속성 조작 메서드를 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
'Language > JavaScript + TypeScript' 카테고리의 다른 글
| JavaScript와 TypeScript는 어떤 차이가 있을까? (1) | 2024.11.14 |
|---|---|
| [JavaScript] 문서 객체 모델 기본 용어 (0) | 2024.03.12 |
| [JavaScript] 객체 (0) | 2024.03.12 |
| [JavaScript] 함수 실행 우선순위 (0) | 2024.03.12 |
| [JavaScript] 콜백 함수 (0) | 2024.03.09 |
