DOM 조작

: 새로운 노드를 생성하여 DOM에 추가하거나 기존 노드를 삭제 또는 교체하는 것
DOM을 조작하는 속성은 여러 가지가 있다.

✅ 변수 앞에 $ : JavaScript 코드에서 사용되는 관례로, DOM 요소를 나타내는 변수 이름 앞에 붙인다.

Element.innerHTML

Getter 및 Setter가 있는 속성( 읽기 전용[getter] 및 쓰기 가능한[setter] 속성 )
: 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정

innerHTML이 웹 페이지에 텍스트를 삽입하는 데 사용되는 것을 종종 볼 수 있으나 이것은 사이트의 공격 경로가 되어 잠재적인 보안 위험이 발생할 수 있기 때문에 일반 텍스트를 삽입할 때는 innerHTML을 사용하지 않는 것이 좋다. (HTML 파싱이 필요한 문자열에 사용)

💡 XSS(Cross-Site Scripting) 공격
사이트 간 스크립팅, 크로스 사이트 스크립팅(Cross-Site Scripting)은 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점이다.

HTMLElement.innerText

Getter 및 Setter가 있는 속성
: 요소와 그 자손의 렌더링 된(화면에 보이는 그대로의) 텍스트 콘텐츠를 반환 ➡ CSS에 의해 숨겨진 텍스트는 포함 ❌
텍스트 내용을 가져올 때 CSS 스타일과 레이아웃을 고려하여 반환

Node.textContent

Getter 및 Setter가 있는 속성
: 노드와 그 자손의 텍스트 콘텐츠를 표현 ➡ 숨겨진 (CSS로 숨겨진) 텍스트도 포함 ⭕
텍스트 내용을 가져올 때 HTML 마크업을 고려하지 않고 순수한 텍스트만을 반환

안녕자두야 ➡ 짱구는 못 말려

nodeValue

getter와 setter 모두 존재하는 접근자 프로퍼티
nodeValue : 텍스트 노드의 프로퍼티 ( vs textContent : 요소 노드의 모든 텍스트)
➡ 즉, 텍스트 노드 이외의 노드에서는 null 반환

---

노드 생성

DOM은 노드를 직접 생성 · 삽입 · 삭제 · 치환하는 메소드를 제공한다
- 반드시 문서 노드를 통해 호출

요소 노드 생성 : Document.createElement( )

tagName의 HTML 요소를 만들어 반환

document.createElement(tagName[, options])

텍스트 노드 생성 : Document.createTextNode( )

텍스트 노드를 생성

document.createTextNode(데이터)

노드 추가

• append
  append(노드, 문자열)
  : 자식노드 node 끝에 삽입
• prepend
  prepend(노드, 문자열)
  : 자식노드 node 앞에 삽입
• before
  before(노드, 문자열)
  : 해당 노드 이전에 삽입
• after
  after(노드, 문자열)
  : 해당 노드 이후에 삽입

복수의 노드 생성과 추가

DocumentFragment

represents a minimal document object that has no parent.

• ocument Object Model (DOM)에서 사용되는 노드 타입 중 하나입니다. * 가벼운 문서 조각이며, DOM 트리의 일부가 아닌 독립적인 노드 그룹이다.

Document: createDocumentFragment() method

새로운 비어 있는 DocumentFragment 객체를 생성하는 데 사용된다