728x90 반응형 프로그래밍118 [JavaScript] 자바스크립트 innerHtml 사용법과 주의사항 목 차1. innerHtml 설명2. innerHtml의 특징3. 사용 예제3-1. HTML 요소 내용 읽기3-2. HTML 요소 내용 쓰기3-3. 동적 컨텐츠 업데이트 (시계 만들기)4. 주의 사항4-1. 기존 콘텐츠 덮어쓰기4-2. 스크립트 실행 문제4-3. XSS(크로스 사이트 스크립팅) 공격 위험5. 대안6. innerHtml 장점과 단점 1. innerHtml 설명 innerHTML은 JavaScript에서 DOM(Document Object Model) 요소의 HTML 콘텐츠를 가져오거나 수정하는 데 사용되는 속성입니다. 이 속성을 사용하면 특정 HTML 요소의 내부 내용을 동적으로 변경할 수 있습니다. 2. innerHtml의 특징 HTML 포함 콘텐츠 조작: 단순 텍스트뿐 아니라 HTM.. 2024. 12. 14. [JavaScript] 자바스크립트 name으로 값 가져오기 자바스크립트 name으로 값 가져오기name 속성은 폼 요소에서 자주 사용됩니다. 같은 이름을 가진 여러 요소를 그룹화할 때 유용합니다. 사용 예제 Male Female Get Selected Value document.getElementsByName('name'): name 속성값이 동일한 모든 요소 선택(NodeList 반환). .checked: 라디오 버튼, 체크박스 등 선택 여부 확인. .value: 선택된 요소의 값을 가져옴. (참고글) [JavaScript] 자바스크립트 페이지 로드 이벤트 총정리 [JavaScript] 자바스크립트 페이지 로드 이벤트 총정리목 차1. DOMContentLoaded 이벤트2. load 이벤트3. beforeunload 이벤트4. unload 이벤트5.. 2024. 12. 11. [JavaScript] 자바스크립트 class로 값 가져오기 자바스크립트 class로 값 가져오기class는 여러 요소에 동일하게 적용될 수 있습니다. 이를 통해 여러 요소를 한꺼번에 선택하고 처리할 수 있습니다. 사용 예제 Get All Valuesdocument.getElementsByClassName('className'): 지정된 클래스 이름을 가진 모든 요소 선택(HTMLCollection 반환).elements[i]: HTMLCollection에서 특정 요소에 접근..value: 각 요소의 값을 가져옴. (참고글) [JavaScript] 자바스크립트 페이지 로드 이벤트 총정리 [JavaScript] 자바스크립트 페이지 로드 이벤트 총정리목 차1. DOMContentLoaded 이벤트2. load 이벤트3. beforeunload 이벤트4... 2024. 12. 10. [JavaScript] 자바스크립트 id로 값 가져오기 자바스크립트 ID로 값 가져오기id는 고유한 값을 가지므로, 특정 요소를 정확하게 선택할 수 있습니다. 사용 예제 Get Valuedocument.getElementById('id'): id 속성으로 요소 선택..value: 입력 필드의 값을 가져오거나 설정. (참고글) [JavaScript] 자바스크립트 페이지 로드 이벤트 총정리 [JavaScript] 자바스크립트 페이지 로드 이벤트 총정리목 차1. DOMContentLoaded 이벤트2. load 이벤트3. beforeunload 이벤트4. unload 이벤트5. pageshow 이벤트6. pagehide 이벤트7. error 이벤트8. abort 이벤트 1. DOMContentLoaded 이벤트 설명: HTML 문서의 구조가 모두 로드되spi.. 2024. 12. 10. [jquery] 제이쿼리를 사용하여 class로 값 가져오기 제이쿼리 class로 값 가져오기Class는 여러 요소에 동일하게 적용될 수 있습니다. 따라서, 여러 요소에서 값을 가져오거나 설정할 때 사용됩니다. 사용 예제 Get All Values$('.myInput'): class="myInput"인 모든 요소 선택..each(): 선택된 모든 요소에 대해 반복 수행. (여러개 나올 수 있기 때문에)$(element).val(): 각 요소의 값을 가져옴. 2024. 12. 9. [jquery] 제이쿼리를 사용하여 name으로 값 가져오기 제이쿼리 name으로 값 가져오기name 속성은 주로 폼 요소에서 사용됩니다. 같은 이름을 가진 여러 요소를 그룹화할 때 유용합니다. 사용 예제 Male Female Get Selected Value$('input[name="gender"]'): name="gender"인 요소 선택.:checked: 선택된 상태인 요소 필터링..val(): 선택된 요소의 값을 가져옴. 2024. 12. 9. 이전 1 2 3 4 5 ··· 20 다음 728x90 반응형