자바스크립트에서 DOM 요소의 텍스트 내용을 다루는 세 가지 주요 속성 innerHTML, innterText, textContent의 차이점을 알아보자. 안녕하세요 저는 woodstock입니다. innerHTML이 속성은 요소의 HTML 내용을 그대로 다룬다.HTML 태그를 포함한 모든 내용을 문자열로 반환하고, 새로운 HTML을 설정할 수 있다. 다음 코드는 요소 내부의 HTML 태그를 포함한 모든 내용을 출력한다.const element = document.getElementById('example');console.log(element.innerHTML); 그리고 이렇게 새로운 HTML을 설정하면 태그가 실제로 적용되어 이탤릭체로 표시된다.const element = document.getE..

DOM(Document Object Model) API를 활용하여 웹 페이지의 요소를 동적으로 조작하는 방법을 알아보자.버튼 클릭으로 텍스트 변경하기버튼을 클릭하면 텍스트 요소의 내용이 변경되도록 이벤트 리스너를 추가해보자. 기본 텍스트 텍스트 변경 // DOM 요소 선택const button = document.getElementById('changeTextButton');const text = document.getElementById('text');// 텍스트 요소의 내용을 변경하는 함수const onClickButton = () => { text.innerText = "미션 1. DOM API 클리어 🥳";}// 이벤트 리스너 추가bu..

웹이란웹이란 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미한다.웹에서 HTML로 작성된 페이지를 웹 페이지라고 하며, 이 웹 페이지들이 여러개 모여있는 집합을 웹 사이트라고 부르는데 웹 사이트는 보통 HTML, CSS, Javascript로 이루어져 있다.웹 사이트의 구성HTML (Hyper Text Markup Language)브라우저에게 웹 페이지의 요소들이 어떻게 구성되어있는지를 알려주는 역할을 한다. CSS (Cascading Style Sheet)웹 페이지의 요소들을 꾸며주는 역할을 한다. JavaSCript웹 페이지의 요소들을 생성, 삭제, 변형하는 역할을 한다. 그렇다면, 자바스크립트는 어떻게 HTML로 작성된 웹 요소에 접근해 웹 페이지를 동적으로 만들고 변형시킬 수..