안녕하세요.
이번엔 js와 html에서 id, class, name의 차이점을 알아보겠습니다.
차례
0. 개념
0-1. id
0-2. class
0-3. name
1. 차이점
0. 개념
0-1. id
identification을 의미하며, 로그인 할 때 id 중복 확인을 하는 것처럼, 중복되지 않는 식별자를 줍니다. 특정 위치에 있는 걸 콕집어 주기위해 사용합니다.
See the Pen Untitled by 김준완 (@svxeiavl-the-styleful) on CodePen.
getElementById : id을 가진 요소를 받아준다.
innerText : 요소 내에 입력된 모든 내용을 텍스트로 받아준다.
innerHTML : 요소 내에 입력된 내용을 html 코드로 받아준다.
- 둘 다 내용을 변경시킬 수 있다.
특이한 점은 div 태그에는 소용이 없는 value와 오타가 적힌 data-tage, 의미를 알 수 없는 vuluvulu가 더 있는데, 이는 custom attribute(사용자 지정 속성)로, 태그에 데이터를 넣어줄 때 사용할 수 있습니다.
그런 속성들을 받아서 쓰기 위해서 getAttribute(속성)를 사용합니다.
0-2. class
class는 같거나 비슷한 것들의 모임을 의미합니다. 동시에 여러개의 요소에 id와 같은 것을 줄 수 있습니다. 여러 요소를 한 번에 통제하기 위해 사용합니다.
See the Pen class by 김준완 (@svxeiavl-the-styleful) on CodePen.
getElementsByClassName : class를 가진 요소를 받아준다. Elements에 s를 빼먹지 않도록 주의.
같은 class를 가진 여러 요소를 한번에 받기 때문에 결과는 배열로 만들어집니다. 따라서 배열을 다루는 함수나 반복문으로 다루게 됩니다.
0-3. name
name은 요소에 이름을 주어, class와 유사한 역할을 하게 만듭니다. 특히 input 태그와 같이 쓰며, 한번에 여러 input 태그의 value 값을 받기 위해 사용합니다.
See the Pen name by 김준완 (@svxeiavl-the-styleful) on CodePen.
getElementsByName : name을 가진 요소를 받아준다. Elements에 s를 빼먹지 않도록 주의.
queryselectorAll(query) : query 조건을 가진 요소를 받아준다.
input의 경우 checkbox, radio는 check 되었는 지 확인하기 위해 name[i].checked를, 이를 포함한 input 태그에는 value를 지정해 name[i].value로 값을 받을 수 있습니다.
1. 차이점
id : 유일한 식별자를 지정해 전체 html에서 한 지점을 콕 집을 때 사용.
class : 여러 같은 역할의 요소를 한꺼번에 내용이나 스타일을 적용하기 위해 사용.
name : 보통 input 태그와 함께 쓰며, 여러 요소의 내용을 한꺼번에 받기 위해 사용. 스타일을 적용하기 위해 사용할 수 없다.
name으로 하는 걸 class로도 할 수 있지만, name을 사용하면 class와는 따로 이름을 지정해줄 수 있어 헷갈리지 않게 쓸 수 있습니다.
감사합니당.