Document 객체

@2023/10/04

안녕하세요 lika-7입니다

이번시간에는 document 객체가 무엇인지 정리하겠습니다

Document 객체

Document 객체는 웹 페이지 그 자체를 의미합니다.

💡

웹 페이지에 존재하는 HTML 요소에 접근할 때 사용합니다

HTML 요소 생성 메소드

const insertTag= document.createElement('태그명')

document에 새로운 태그를 만들 때 사용합니다.

⚠️

만든다고 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다. append 메소드를 통해 node에 추가 합니다.

document.querySelector('붙일 테그명').append(insertTag)

HTML 요소 내부 콘텐츠 접근 메소드

<div id="myDiv">
  <p>Hello, World!</p>
</div>

자바스크립트를 사용하여 이 요소의 innerHTML을 읽거나 수정할 수 있습니다. 예를 들면:

// 요소의 innerHTML 읽기
var divContent = document.getElementById("myDiv").innerHTML;
console.log(divContent); // "Hello, World!"

// 요소의 innerHTML 수정
document.getElementById("myDiv").innerHTML = "<p>New Content</p>";

✅

위 코드에서 innerHTML 속성은 <div id="myDiv"> 요소 내부의 HTML 콘텐츠를 나타냅니다.

⚠️

innerHTML을 사용할 때 HTML 콘텐츠를 문자열로 다루므로, 주의해서 사용해야 합니다. 사용자 입력과 같이 신뢰할 수 없는 데이터를 innerHTML에 직접 대입하는 경우 XSS (Cross-Site Scripting) 취약점을 유발할 수 있으므로 보안 주의가 필요합니다.