input 상자에 입력한 값들을 가져오기
1. id로 접근
ex) let n = document.getElementById("아이디명").value;
2. class로 접근
ex) let n = document.getElementsByClassName("클래스명").value;
클래스명에 해당하는 모든 값들을 배열 요소형태로 가져온다.
for문을 이용하여 각 요소에 접근이 가능하다.
ex)
for(let i=0; i<n.length; i++) {
n[i].style.fontWeight = "bold";
}
3. 선택자로 접근
(1) 단수 선택
ex) let n = document.querySelector("#아이디명 or .클래스명 or 네임").value;
(2) 복수 선택
ex) len n = document.querySelectorAll(".클래스명 or 네임").value;
※ 네임명이 부여되어 있으면 DOM으로 접근이 가능하다.
1. 네임이 blue인 요소값에 접근
ex) let n = document.blue.value
Math.floor(x) : x를 넘지 않는 최대 정수(버림)
input 태그 속성값
1. type : 입력할 내용이 어떤 것인지 결정
2. id : 요소를 선택할 때 사용하는 고유 아이디명
3. placeholder : 입력 박스에 글자 표기
4. name : 변수명과 비슷한 성질 (type이 radio일 경우, 여러개의 속성을 묶을때 주로 사용)
5. value: 서버로 전송되는 값
6. checked : 기본 체크여부 설정
button 태그 속성값
1. type : button에 type 속성이 없을 경우, submit 버튼 역할
2. onclick : 버튼을 클릭할 경우, 다음에 실행할 기능을 추가
innerHTML : 요소에 HTML을 설정하거나 반환
ex) document.querySelector("#아이디명").innerHTML = 변수명
'Frontend > JavaScript' 카테고리의 다른 글
window 객체의 opener 사용하기 (0) | 2023.10.15 |
---|---|
자바스크립트 null, undefined, NaN의 차이 (0) | 2023.10.08 |
크롬 브라우저에서 자바스크립트 디버깅 하는 법 (0) | 2023.08.27 |
자바스크립트(3) - 객체 생성 (0) | 2022.09.27 |
자바스크립트(2) - Rest, 클로저, 화살표 함수 (0) | 2022.09.26 |