2022. 7. 5. 02:51ㆍProgram/JavaScript
133_자바스크립트 <html>,<body> 요소 읽어 오기
[적용]
- <html> 요소를 가져오고 싶을 때
- <body> 요소에서 클래스 작업을 하고 싶을 때
[문법]
| 속성 | 의미 | 타입 |
| document.documentElement | 루트 요소 | html 요소 |
| document.head | head 요소 | head 요소 |
| document.body | body 요소 | body 요소 |
[내용]
document.documentElement는 문서의 루트 요소를 지정한다.
HTML 문서의 html 요소를 말한다.
'console.dir(dicument.documentElement)'의 콘솔 로그에서 html 요소가 반환되는 것을 확인할 수 있다.
document.head는 head 요소를 가져오며, head에 script 태그와 link 태그를 동적으로 삽입할 수 있다.
const scriptElement = document.createElement('script');
scriptElement.src = 'script/new-script/js';
document.head.appendChild(scriptElement);
document.body는 body 요소를 가져온다.
console.dir(document.body); // body 요소
[예시]
페이지의 다크 모두를 설정하는 샘플을 확인해 보자.
버튼을 누를 때마다 body 요소에 dark 클래스를 설정한다.
dark 클래스로 화면 배경을 어둡게 하는 스타일을 설정한다.
HTML index.html
<button class="theme-chage-button">배경색 변경</button>
<h1>At the moment of my dream</h1>
...생략...CSS style.css
body {
...생략...
background-color: #f9f9f9;
...생략...
}
body.theme-dark {
background-color: #lelele;
color: #fff;
}JavaScript main.js
const themeChangeButton =
document.querySelector('.theme-change-button');
// 테마 변경 버튼 클릭 시 처리
themeChangeButton.addEventListener('click', () => {
// body 요소 클래스 'theme-dark' 변경
document.body.classList.toggle('theme-dark');
});
실행결과
dark 모드 변경 버튼을 클릭하면 다크 모드로 변환된다.
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 부모 요소에 자식 요소 추가하기 (0) | 2022.07.06 |
|---|---|
| [JavaScript] 자바스크립트 부모/자식/전/후 요소 읽어 오기 (0) | 2022.07.05 |
| [JavaScript] 자바스크립트 클래스명으로 요소 읽어 오기 (0) | 2022.07.05 |
| [JavaScript] 자바스크립트 셀렉터 조건 만족하는 요소 모두 가져오기 (0) | 2022.07.01 |
| [JavaScript] 자바스크립트 ID의 각 요소 값 읽어오기 (0) | 2022.07.01 |