JS - Document 실습

IRISH·2023년 12월 9일

JS

목록 보기

18/80

실습일 : 20231123

참고 URL

Document 정의

Document 인터페이스는 모든 종류의 문서에 대한 공통의 속성과 메소드를 묘사
문서 유형(HTML / XML / SVG 등)에 따라 더 다양한 API 존재

생성자

Document()
- 새로운 Document 객체를 생성

속성 및 메소드

속성 및 메소드는 너무 많아서, 참고 URL에 들어가서 볼 것
실습에 대표적인 Document의 속성과 메소드 사용

CSS

style.css

body{
    background-color: aqua;
}

실습 - 속성

Document.body

소스코드 - index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>vanillaJS</title>
</head>
<body>
    <div id="parent-id">
        <h1 class="test">PCY 1</h1>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

소스코드 - app.js

const oldBody = document.body;

oldBody.id = "first-id";

alert(oldBody.id);

newBody = document.createElement("body");
newBody.id = "second-id";
document.body = newBody;
alert(document.body.id);

index.html의 body 태그에 id를 setting하고, 추후에 변경하는 코드를 작성하였음

oldBody ⇒ "first-id"라고 하는 body 태그 id 할당
newBody ⇒ body의 id 값을 "first-id"에서 “second-id”로 변환하고자 함

결과

oldBody

newBody

Document.head

소스코드 - index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>vanillaJS</title>
</head>
<body>
    <div id="parent-id">
        <h1 class="test">PCY 1</h1>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

소스코드 - app.js

alert(document.head.id); // null

document.head.id = "first_head_id";

alert(document.head.id);
alert(document.head.baseURI);
alert(document.head.outerHTML);