Dom 기초2

textContent와 innerHTML

html

<div id="id"><p>text</p></div>

js

document.querySelector('#id').textContent // 'text'
document.querySelector('#id').innerHTML // '<p>text</p>'

공통점

• DOM에서 HTML 요소의 텍스트 내용을 가져오거나 설정하는데 사용되는 프로퍼티이다.

textContent 특징

• HTML 태그를 포함하지 않는 텍스트 내용만 가져온다.
• HTML 태그가 포함된 문자열은 모두 제거하고 텍스트만 추출한다.
• 일반 텍스트의 경우 처리 속도가 빠르다.

innerHTML 특징

• HTML 태그와 텍스트를 모두 가져올 수 있다.
• 요소 내부의 HTML 태그를 쉽게 조작 가능하여 동적인 웹페이지를 만들 수 있다.
• 코드를 주입하여 악성 스크립트가 실행될 위험이 있기 때문에, 보안상 유의해야 한다.

---

setAttribute()

• 요소의 속성을 설정할 수 있다.

html

<div id="id">
  <p>text</p>
</div>

js

document.getElementById('id').setAttribute('class', 'newClass')

html 결과

<div id="id" class="newClass">
  <p>text</p>
</div>

removeAttribute()

• 요소의 속성을 삭제할 수 있다.

html

<div id="id" class="newClass">
  <p>text</p>
</div>

js

document.getElementById('id').removeAttribute('class')

html 결과

<div id="id">
  <p>text</p>
</div>

---

이벤트 객체

• 이벤트가 발생했을 때, 이벤트의 정보를 담고 있는 객체
• 이벤트가 발생하면, 이벤트 핸들러 함수에 인자로 전달된다.
• 이벤트가 발생한 요소, 이벤트 타입, 마우스나 키보드 등에서 발생한 이벤트 정보 등 다양한 정보를 알 수 있다.

주요 프로퍼티

event.target: 이벤트가 발생한 요소를 반환한다.
event.currentTarget: 이벤트 핸들러가 바인딩된 요소를 반환한다.
event.type: 이벤트 타입을 반환한다.
event.preventDefault(): 이벤트의 기본 동작을 취소한다.
event.stopPropagation(): 이벤트의 상위 요소로 이벤트 전파를 막는다.