# textContent
DOM
DOM(Document Object Model) : XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스BOM(Browser Object Model) 의 하나로, 트리 구조로 되어있다.자바스크립트로 요소에 접근해서 요소를

innerHTML을 지양하자
DOM을 변경할 때 innerHTML을 지양해야 하는 이유는? 도서 '모던 자바스크립트 Deep Dive'를 읽으면 해당하는 부분은 아래와 같이 설명된다. XXS(크로스 사이트 스크립팅) 공격에 취약하다. 대안으로 제시되는 것은 insertAdjacentHTML인

textContent, innerHTML, innerText 특징과 차이점
HTML 내에 텍스트를 동적으로 변경할 때 사용되며 Node의 속성이다.<script>, <style> 은 무시하고, 띄어쓰기, 공백 등을 제거하지 않는다.HTML 내에 텍스트를 동적으로 변경할 때 사용되며 Element의 속성이다.값에 태그들을 삽입하면 자

2021-12-10 TIL
🦁 Day31언제 어느 것을 써야하나innerHTML은 비용이 비싸다 = 렌더링 속도가 느리다.왜냐하면 html태그도 일일이 다 읽어내기 때문이다. 따라서 만약에 태그 내에 텍스트 콘텐츠만 넣을 경우에는 꼭 textContent를 쓸 것!innerText와 textC

[CS] DOM Day-18
DOM Document Object Model JavaScript를 이용해 Element 속성값을 얻어내거나, 변경하는 방법 DOM은 JavaScript가 아닙니다. (JavaScript를 이용해 DOM구조에 접근) HTML문서의 구조와 관계를 객체(Object)로 표

[CS] DOM Day-17
DOM이란? Document Object Model의 약자입니다. 프로그래머 입장에서 바라 본 HTML입니다. DOM을 이해하고 조작할 수 있다면 HTML을 단순화 해 웹앱으로 업그레이드 할 수 있습니다. HTML에 JavaScript 적용하기 HTML에 JavaSc
.png)
innerText vs textContent vs innerHTML
Node, element의 텍스트값을 읽어오고 설정할 수 있다.다루는 값이 text element인가,html element인가엘리먼트 안의 전체 HTML, XML을 가져온다.text만 바뀌는 상황이라면 innerHTML이 아닌 textContent로도 사용할 수 있

타이핑 애니메이션 만들기 | JS Snippets
자기 소개 페이지의 리퍼런스를 찾다보니 많은 분들이 타이핑 애니메이션을 사용한 것을 볼 수 있었다. 아직 내 페이지의 구성이 결정된 건 아니지만 연습 삼아 직접 만들어보기로 했다.문서 편집기에 글을 적을 때 입력 커서가 깜빡이며 하나씩 글자가 입력되는 모습을 볼 수 있

TIL 14 day innerText, textContent
JavaScript를 작성하다가 element에 써져있는 text를 다루고 싶으면 어떻게 해하지라는 생각에 검색을 했다. innerText와 textContent인데 내가 봐서는 비슷해보여서 뭐가 다른지 MDN에 찾아보았다. innerText는 HTMLElement 인