HTML 속성 중 id와 name은 ‘구분’하기 위한 목적으로 사용한다. 여러 태그 중에 특정한 태그에 대해 어떤 값을 주기 위함이다.
Id의 경우 개성을 갖고 있어 모든 id는 다르게 지정을 해줘야 한다. 필수 속성은 아니지만 모든 태그가 아니라 특정한 태그를 제어할 때 유용하게 쓰인다.
Name 속성은 id와 달리 중복이 가능하다. 같은 속성을 적용한 값들을 동시에 제어할 수 있어 배열에도 활용도가 높다.
둘 중 무엇이 좋은가에 대한 부분은 답이 없다. 사용 목적에 따라 필요한 속성을 사용하면 된다.
자바스크립트를 활용해서 두 속성을 자세히 알아보자. 만들어볼 예제는 인터넷 메일함의 모두 선택기능이다.
체크박스를 만들어서 name속성을 주고 모두선택 기능을 할 Id도 지정했다.
<script>
function check(){
var checkAll=document.getElementById("checkAll");
→ getElementById는 문서 안에서 Id에 의한 요소를 가져온다는 의미이다.
var ch=document.getElementsByName("ch");
→ getElementsByName는 문서 안에서 name에 의한 요소를 가져온다는 의미로 중복이 가능하기
때문에 Element에 s가 붙는다.
for(var i=0; i<ch.length; i++ ){
ch[i].checked=checkAll.checked;
}
}
</script>
<body onLoad="init()">
<input type="checkbox" id="checkAll" onClick="check()">모두선택<p>
<input type="checkbox" name="ch">문<br>
<input type="checkbox" name="ch">문돌<br>
<input type="checkbox" name="ch">문돌이<br>
<input type="checkbox" name="ch">문돌이의<br>
<input type="checkbox" name="ch">문돌이의IT<br>
<input type="checkbox" name="ch">문<br>
<input type="checkbox" name="ch">문송<br>
<input type="checkbox" name="ch">문송합<br>
<input type="checkbox" name="ch">문송합니<br>
<input type="checkbox" name="ch">문송합니다<br>
</body>
제대로 작성했다면 각각의 체크박스가 클릭이 되고, 맨 위의 모두선택에 있는 체크박스를 클릭 시 전체 체크박스에 체크가 되는 걸 볼 수 있다.
'문돌이의 IT > JavaScript' 카테고리의 다른 글
| [문돌이의IT] 자바스크립트 변수의 개념을 알아보자 (0) | 2016.01.23 |
|---|---|
| [문돌이의IT]자바스크립트 createElement(), createTextnode()로 요소 추가하기 (0) | 2016.01.22 |
| [문돌이의IT] 자바스크립트 Math객체로 랜덤효과 나타내기 (0) | 2016.01.19 |
| [문돌이의IT] 자바스크립트 Math객체 활용하기(Math.random(), Math.floor() 매서드) (0) | 2016.01.18 |
| [문돌이의 IT]자바스크립트 2차원 배열 익히기(화면의 좌표 출력 방법) (0) | 2016.01.12 |