[JavaScript] 자바스크립트 Document

1. Document속성

 

브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조한다.
즉 window.document은 현재 브라우저에 렌더링되고 있는 문서를 의미하며,
이 속성을 이용하면 해당 문서에 접근할 수 있다.
window.document는 페이지 콘텐츠, 즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다.
이를 이용하면 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있다.

자바스크립트에서 'window.'은 생략할 수 있다.
document는 문서(HTML, XML, SVG 등)에 대한 공통의 속성과 메소드를 제공한다.
즉, 다양한 API(Application Programming Interface)를 제공한다.

2. 요소를 선택하기 위해 사용할 수 있는 대표적인 메소드

 1) document.querySelector

   · document의 querySelector 메소드는 선택자를 인자로 전달받아,

     전달받은 선택자와 일치하는 문서 내 첫 번째 요소(Element)를 반환한다.

   · 일치하는 요소가 없으면 '없다'라는 의미의 null 데이터를 반환한다.

   · 인자로 전달되는 선택자는 문자열 타입의 '유효한 CSS 선택자'를 의미한다.

 

   ex 1) document.querySelector("p"); // p 태그를 선택하자!

   ex 2) document.querySelector("#text"); // id가 text인 요소를 선택하자!

   ex 3) document.querySelector(".text"); // class가 text인 요소를 선택하자!

 

 2) document.getElementById

   · document의 getElementById 메소드는 id를 인자로 전달받아,

     전달받은 선택자와 일치하는 문서 내 요소(Element)를 반환한다.

   · 일치하는 요소가 없으면 '없다'라는 의미의 null 데이터를 반환한다.

   · 인자로 전달되는 선택자는 문자열 타입의 'id'를 의미한다.

  · querySelector에서는 CSS 선택자를 요구하는 반면, 여기에서는 기호 없이 id만 딱 적어주면 된다. 

 

   ex 1) document.getElementById("text"); // id가 text인 요소를 선택하자!

   ex 2) document.getElementById("image");  // class가 text인 요소를 선택하자!

 

* document의 querySelector, document의 getElementById 두 메소드는
  모두 요소(Element) 객체를 반환한다!

 

 

3. textContent 속성

  · 해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다.

  · textContent를 통해 요소가 포함한 텍스트를 읽을 수도, 변경할 수도 있다.

 

   ex 1) const p = document.querySelector("p"); // p 요소를 반환받아 상수로 이름을 붙인다!

   ex 2) console.log(p.textContent) // p 요소의 textContent 속성을 콘솔에 출력해보자!

   ex 3) p.textContent = "텍스트를 이걸로 바꿔!"  // p 요소의 textContent 값을 변경해보자!

 

 

<렌더링된 모습>

 

const h1 = document.querySelector("h1")

const p = document.getElementById("text")

console.log(h1.textContent); // 기존 h1의 text 내용을 콘솔에서 출력해줘

h1.textContent = " " // 기존 h1 텍스트 내용 대신 문자열 안의 내용으로 바꿔줌

 

p.textContent = " " // 기존 p 태그 안의 내용을 바꿔줘

console.log(p.textContent) // p.textContent로 바꾸고 console.log로 출력을 하면 p.textContent로 인해 바뀐 내용이 출력됨

 

 

 

 

 

 

참고 1 : 유노코딩 입문자를 위한 자바스크립트 기초 #11

 

https://youtu.be/eHUUrPc4oyo

참고 2 : Document - Web API | MDN (mozilla.org)