Script

바닐라 JS) 8. Document

송민경's avatar
송민경
Sep 01, 2024
바닐라 JS) 8. Document

1. Document Object Model (DOM)

  • HTML이나 XML 문서의 구조를 프로그래밍적으로 표현한 것
  • 구조는 문서의 각 요소를 객체로 표현
  • JavaScript같은 프로그래밍 언어로 문서의 내용이나 구조를 동적으로 수정 가능
 

2. Document Object

  • DOM의 최상위 객체
  • 현재 웹 페이지
  • 웹 페이지에서 사용하는 모든 HTML 요소들은 이 다큐먼트 오브젝트의 하위에 위치
  • JavaScript에서 document 객체를 사용하여 HTML 요소를 조작하거나, 새로 추가하거나, 삭제하는 등의 작업을 할 수 있음
    • 요소 선택
      • document.getElementById, document.querySelector 등
      • 특정 HTML 요소를 선택 가능
    • 내용 변경
      • 선택된 요소의 텍스트나 HTML을 수정 가능
    • 이벤트 처리
      • document.addEventListener
      • 특정 이벤트에 대한 처리기를 추가 가능
    • 새 요소 추가
      • document.createElement
      • 새로운 HTML 요소를 만들고, 이를 문서에 추가 가능
        •  

3. Document

  • 브라우저에 이미 존재하는 객체(Object)
    • HTML에 JavaScript가 자동으로 연결되어 있음
  • 콘솔 창에서 document 입력한 결과
notion image
  • index.html 코드와 동일
notion image
  • 콘솔창에 document의 목록보기
  • 정말 많은 정보가 들어있는 객체임
console.dir(document);
notion image
  • index.html 코드에 입력된 title과 동일한 결과가 있음
  • document가 JavaScript의 관점으로 HTML을 보여줌
notion image
notion image
  • JavaScript는 HTML에 접근하고 읽을 수 있음
    • 브라우저가 HTML 정보가 많이 들어있는 DOCUMENT라는 객체를 전달해줌
        • document.title
        notion image
  • JavaScript는 HTML에 접근하고 수정할 수 있음
    • 새로고침하면 원래대로 돌아가고 코드 자체에는 영향을 주지 않음
      • document.title = "Hi"
      notion image
      notion image
  • JavaScript로 HTML을 변경했음
    • 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"> <!--style.css 적용하기-->
    <title>Hello From HTML</title>
</head>
<body>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html>
    • app.js 변경하기
      • document.title = "Hello! From JS"
    • app.js의 title이 변경됨
      • notion image
 
  • id를 이용하기 
      • <!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"> <!--style.css 적용하기-->
    <title>Hello From HTML</title>
</head>
<body>
    <h1 id="title">Grab me!</h1>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html>
      notion image
      notion image
       
      const title = document.getElementById("title");

console.log(title);
      notion image
  • autofocus
    • 페이지가 로드될 때 특정 요소에 자동으로 포커스를 맞추는 역할
    • 웹 페이지가 열리거나 새로고침될 때, autofocus 속성이 지정된 요소가 자동으로 선택되어 사용자 입력을 받을 준비가 된 상태
      • <body>
    <h1 autofocus id="title">Grab me!</h1>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
      notion image
      notion image
      notion image
      <!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"> <!--style.css 적용하기-->
    <title>Hello From HTML</title>
</head>
<body>
    <h1 autofocus class="now" id="title">Grab me!</h1>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html>
      notion image
      notion image
  • inner text
notion image
  • JavaScript에 의해 HTML 변경하기
    • 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"> <!--style.css 적용하기-->
    <title>Hello From HTML</title>
</head>
<body>
    <h1 id="title">Grab me!</h1>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html>
    • app.js
      • const title = document.getElementById("title");

title.innerText = "Get you";
      notion image
 
  • html에 있는 요소와 동일한 이름의 요소로만 찾을 수 있음 아니면 오류남
  • ClassName 이용하기
    • 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"> <!--style.css 적용하기-->
    <title>Hello From HTML</title>
</head>
<body>
    <h1 class="hello">Hello!</h1>
    <h1 class="hello">Hello!</h1>
    <h1 class="hello">Hello!</h1>
    <h1 class="hello">Hello!</h1>
    <h1 class="hello">Hello!</h1>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html>
    • app.js
      • const hellos = document.getElementsByClassName("hello");

console.log(hellos);
      notion image
  • tagName 이용하기
    • anchor, div, section, button 등
    • 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"> <!--style.css 적용하기-->
    <title>Hello From HTML</title>
</head>
<body>
    <div class="hello">
        <h1>Hello!</h1>
    </div>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html>
    • app.js
      • const title = document.getElementsByTagName("h1");

console.log(title);
      notion image
  • querySelector 이용하기
    • CSS 처럼 쓸 수 있음
    • hello라는 class를 찾고 그 안에 있는 h1 가져오기
    • app.js
      • const title = document.querySelector(".hello h1");

console.log(title);
      notion image
  • 없으면 null이고 값을 찾으면 첫번째만 반환함
    • 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"> <!--style.css 적용하기-->
    <title>Hello From HTML</title>
</head>
<body>
    <div class="hello">
        <h1>Hello!</h1>
    </div><div class="hello">
        <h1>Hello!</h1>
    </div><div class="hello">
        <h1>Hello!</h1>
    </div>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html>
    • app.js
      • const title = document.querySelectorAll(".hello h1");

console.log(title);
      notion image
    • app.js
      • const title = document.querySelector(".hello h1:first-child");

console.log(title);
      notion image
  • querySelector와 getElementById는 같은 결과값을 반환함
    • getElementById는 id 하위 요소(form 등)를 이용할 수 없음
      • <!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"> <!--style.css 적용하기-->
    <title>Hello From HTML</title>
</head>
<body>
    <div id="hello">
        <h1>Hello!</h1>
    </div><div id="hello">
        <h1>Hello!</h1>
    </div><div id="hello">
        <h1>Hello!</h1>
    </div>
    <script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html> 
      const title1 = document.querySelector("#hello"); // # = id
const title2 = document.getElementById("hello");

console.log(title1);
console.log(title2);
      notion image
 
Share article

More articles

See more posts

바닐라 JS) 10. CSS

September 1, 2024
바닐라 JS) 10. CSS

바닐라 JS) 9. Event Listner

September 1, 2024
바닐라 JS) 9. Event Listner

바닐라 JS) 7. 조건문 사용하기

August 30, 2024
바닐라 JS) 7. 조건문 사용하기

바닐라 JS) 6. 함수 사용하기

August 30, 2024
바닐라 JS) 6. 함수 사용하기

vosw1

RSS·Powered by Inblog