# textContent

10개의 포스트

DOM

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

2022년 5월 11일
·
0개의 댓글
post-thumbnail

innerHTML을 지양하자

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

2022년 3월 7일
·
0개의 댓글
post-thumbnail

textContent, innerHTML, innerText 특징과 차이점

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

2022년 1월 7일
·
0개의 댓글
post-thumbnail

2021-12-10 TIL

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

2021년 12월 10일
·
1개의 댓글
post-thumbnail

[CS] DOM Day-18

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

2021년 10월 28일
·
0개의 댓글
post-thumbnail

[CS] DOM Day-17

DOM이란? Document Object Model의 약자입니다. 프로그래머 입장에서 바라 본 HTML입니다. DOM을 이해하고 조작할 수 있다면 HTML을 단순화 해 웹앱으로 업그레이드 할 수 있습니다. HTML에 JavaScript 적용하기 HTML에 JavaSc

2021년 10월 26일
·
0개의 댓글
post-thumbnail

innerText vs textContent vs innerHTML

Node, element의 텍스트값을 읽어오고 설정할 수 있다.다루는 값이 text element인가,html element인가엘리먼트 안의 전체 HTML, XML을 가져온다.text만 바뀌는 상황이라면 innerHTML이 아닌 textContent로도 사용할 수 있

2021년 8월 29일
·
0개의 댓글
post-thumbnail

타이핑 애니메이션 만들기 | JS Snippets

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

2021년 8월 5일
·
0개의 댓글
post-thumbnail

TIL 14 day innerText, textContent

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

2020년 9월 12일
·
0개의 댓글