ID는 유니크한 것으로 하나의 ID는 하나의 input에만 들어갈 수 있고,
name은 중복이 가능하여 여러개의 input에서 같은 name을 가질 수 있다.
공통적으로는 둘다 식별하는 용도로 사용된다.
값을 불러오기 위해서 ID는 getElementById("ID")를 사용하고 name은 getElementsByName("Name")을 사용한다.
주의할 점은 getElementsByName의 경우 가운데 's'가 들어간다.
(하지만 나는 getElementById를 getElementByID로 써놓고 틀린걸 못찾아 한참을 헤맨적이 있다...)
그 이유는 ID는 유일하기 때문에 단수로 사용되는데 Name은 복수로 존재할 수 있기때문이다.
리턴되는것을 사용하는 방법도 조금 다르다.
document.getElementById("txtID").value
document.getElementsByName("txtID")[0].value
ID는 단일값이기 때문에 그대로 value를 받아서 사용하면 되지만,
Name의 경우는 배열로 받아서 인덱스를 지정해 value를 가져와야한다.
사용 방법:
<script>
function testBtn(){
alert("ID: " + document.getElementById("txtID").value
+ "\n password: " + document.getElementsByName("txtID2")[0].value
+ "\n password: " + document.getElementsByName("txtID2")[1].value);
}
</script>
<body>
txt1: <input type = "text" id = "txtID" name = "txtID" value = "ASDF"><br>
txt2: <input type = "text" id = "txtID2" name = "txtID2" value = "bbbb"><br>
txt3: <input type = "text" id = "txtID3" name = "txtID2" value = "cccc"><br>
<input type = "button" value = "Button" id = "btnBtn" name = "btnBtn" onclick = "testBtn()">
</body>
'JavaScript' 카테고리의 다른 글
[JavaScript] AJAX (0) | 2024.11.15 |
---|---|
[JavaScript] AJAX 시작해보기 (1) | 2024.11.14 |
[JavaScript] Enter(엔터) 키 입력 이벤트 (1) | 2023.01.06 |
[JavaScript] JSON과 데이터 전달 (0) | 2022.12.15 |
[Spring - JavaScript] == 와 === (0) | 2021.08.30 |