그럼에도 불구하고

innerHTML, innerText, textContent 속성은 텍스트를 읽어오고 설정할 수 있다는 점에서 비슷해 보이지만, 조금씩 다른 차이가 있다. 그 차이에 대해 알아보자 :) [ innerHTML ] innerHTML은 'Element'의 속성으로, element내에 포함된 HTML 또는 XML 마크업을 가져오거나 태그와 함께 입력하여 내용을 직접 설정할 수 있다. 즉, innerHTML을 사용하면 내부 HTML 코드를 JavaScript 코드에서 새 내용으로 쉽게 변경할 수 있는 것이다. HTML 삽입 미리보기할 수 없는 소스 innerHTML은 유용한 메서드이고, 자주 사용하지만 치명적인 단점을 가지고 있다. ※ innerHTML의 단점 MDN에 따르면 innerHTML은 XSS(Cross..

DOM(document object model)에 대해 알아보자 [ 문서 객체 모델이란 ] 웹이나 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹문서 전체 또는 일부분이 동적으로 반응하게 하는 것이다. 이렇게 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야 한다. ※ 문서 객체 모델(DOM)의 정의 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM은 웹 문서를 하나의 객체로 정의한다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 예를 들어 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체이다. 이처럼 DOM은 웹 문서와 그 안..