본문 바로가기
반응형

전체 글65

addEventListener 오류 해결방법 Uncaught TypeError: Cannot read property 'addEventListener' of null 💥에러 원인 script를 body의 상단에 작성하게 되면, 간혹 html이 로드 되기 전에 script를 먼저 불러와버리는 경우가 생긴다. 그렇게 되면 addEventListener을 부여할 DOM을 찾지 못하게 되어 에러가 발생하게 된다. 🔅해결방법 1. script는 body태그의 가장 아래에 작성한다. (내가 사용한 방법😁) body태그 하단에 js를 작성하면 html이 먼저 로드되고, js 가 그 다음 로드되기 때문에 오류가 발생하지 않는다 변경 전 변경 후 2. window.onload = function(){} 사용한다. window.onload = function(){}.. 2023. 5. 11.
[Javascript] 새로운 태그 생성 및 추가하기(createElement, appendChild, prepend) 새로운 태그를 생성하는 순서 Element를 생성합니다. 태그를 생성하는 부분입니다. 태그에 속성을 추가합니다. class, value등 원하는 속성을 추가할 수 있습니다. 태그안에 내용을 추가합니다. 태그안에 텍스트 또는 또 다른 태그를 추가할 수 있습니다. appendChild를 사용하면 뒷쪽에 추가됩니다. prepand를 사용하면 앞쪽에 추가됩니다. 생성한 태그를 원하는 태그안에 추가합니다. 1. body태그에 테스트를 위한 태그를 추가합니다. ul: 새로운 태그가 추가될 부모태그 입니다. input: 새로운 태그에 추가할 내용을 입력합니다. button: 새로운 태그를 앞에 추가하는 버튼과 뒤에 추가하는 버튼입니다. 앞에 추가 뒤에 추가 2. 테스트용 자바스크립트 소스내용 입니다. 테스트 페이지에.. 2023. 5. 10.
textContent 1. textContent는 와 요소를 포함한 모든 요소의 콘텐츠를 가져옵니다. 반면 innerText는 "사람이 읽을 수 있는" 요소만 처리합니다. 2. textContent는 노드의 모든 요소를 반환합니다. 그에 비해 innerText는 스타일링을 고려하며, "숨겨진" 요소의 텍스트는 반환하지 않습니다. 3. 전체 문서의 모든 텍스트와 CDATA 데이터를 얻으려면 document.documentElement.textContent를 사용하세요. https://developer.mozilla.org/ko/docs/Web/API/Node/textContent 2023. 2. 16.
연기처럼 사라지는 텍스트 애니메이션 http://www.gisdeveloper.co.kr/?p=10985 2023. 2. 16.
반응형