728x90 반응형 프로그래밍/[javascript] 자바스크립트49 [JavaScript] 자바스크립트 innerText 사용법 목 차1. innerText 설명2. innerText 특징3. 사용 예제3-1. HTML 요소 내용 읽기3-2. HTML 요소 내용 쓰기3-3. CSS로 숨겨진 문자열 텍스트 확인 4. innerText 장점과 단점 1. innerText 설명 innerText는 JavaScript에서 DOM(Document Object Model) 요소의 텍스트 콘텐츠를 가져오거나 수정하는 데 사용되는 속성입니다.innerText는 사용자에게 실제로 보이는 텍스트를 기반으로 작동하며, 요소의 스타일과 렌더링 상태에 영향을 받습니다. 2. innerText 특징 렌더링된 텍스트 기반:요소가 화면에 보이는 경우에만 값을 반환하거나 설정합니다.CSS 스타일에 따라 숨겨진 텍스트(display: none 또는 visib.. 2024. 12. 16. [JavaScript] 자바스크립트 textContent 사용법과 주의사항 목 차1. textContent 설명2. textContent 특징3. 사용 예제3-1. HTML 요소의 텍스트 읽기3-2. HTML 요소의 텍스트 쓰기3-3. 텍스트 수정하기3-4. 사용자 입력 값 표시 4. 주의 사항4-1. 하위 요소의 텍스트도 포함4-2. 화이트스페이스 유지4-3. 기존 내용 덮어쓰기 5. textContent의 장점 1. textContent 설명 textContent는 JavaScript에서 DOM(Document Object Model) 요소의 텍스트 콘텐츠를 가져오거나 설정할 수 있는 속성입니다. 이 속성은 특정 HTML 요소 내부의 텍스트를 조작하는 데 사용되며, HTML 태그를 무시하고 순수한 텍스트만 다룹니다. 2. textContent 특징 HTML 태그를 무시.. 2024. 12. 15. [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. 이전 1 2 3 4 ··· 9 다음 728x90 반응형