728x90
반응형
반응형
728x90
자바스크립트 class로 값 가져오기
- class는 여러 요소에 동일하게 적용될 수 있습니다. 이를 통해 여러 요소를 한꺼번에 선택하고 처리할 수 있습니다.
사용 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('getValuesBtn').addEventListener('click', function() {
const elements = document.getElementsByClassName('myInput'); // class로 요소 선택
for (let i = 0; i < elements.length; i++) {
const value = elements[i].value; // 각 요소의 값 가져오기
console.log(`Input ${i + 1}: ${value}`);
}
});
});
</script>
</head>
<body>
<input type="text" class="myInput" value="Value 1">
<input type="text" class="myInput" value="Value 2">
<button id="getValuesBtn">Get All Values</button>
</body>
</html>- document.getElementsByClassName('className'): 지정된 클래스 이름을 가진 모든 요소 선택(HTMLCollection 반환).
- elements[i]: HTMLCollection에서 특정 요소에 접근.
- .value: 각 요소의 값을 가져옴.
(참고글) [JavaScript] 자바스크립트 페이지 로드 이벤트 총정리
[JavaScript] 자바스크립트 페이지 로드 이벤트 총정리
목 차1. DOMContentLoaded 이벤트2. load 이벤트3. beforeunload 이벤트4. unload 이벤트5. pageshow 이벤트6. pagehide 이벤트7. error 이벤트8. abort 이벤트 1. DOMContentLoaded 이벤트 설명: HTML 문서의 구조가 모두 로드되
spirit0833.tistory.com
728x90
반응형
'프로그래밍 > [javascript] 자바스크립트' 카테고리의 다른 글
| [JavaScript] 자바스크립트 innerHtml 사용법과 주의사항 (93) | 2024.12.14 |
|---|---|
| [JavaScript] 자바스크립트 name으로 값 가져오기 (108) | 2024.12.11 |
| [JavaScript] 자바스크립트 id로 값 가져오기 (136) | 2024.12.10 |
| [JavaScript] 키보드 이벤트 총정리 (keypress, keyup, keydown) (75) | 2024.12.07 |
| [JavaScript] 자바스크립트 페이지 로드 이벤트 총정리 (123) | 2024.12.03 |