[javascript/jQuery] id, name, class 값 가져오기

 

 

 

 

 

안녕하세요, Haddoddo입니다.

 

오늘은 javascript와 jquery에서 자주 사용하는

id, name, class를 사용해 value를 가져오는 방법에 대해 정리해보도록 하겠습니다.

 

 

 

○ id

흔히 HTML에서 사용하는 id는 객체에 이름을 부여할 때 사용하지만 중복을 허용하지 않습니다.

id값을 왜 중복으로 사용하면안될까요? 이유는 여러 가지가 있습니다.

 

1. name의 값은 중복될경우 배열로 처리가 가능하지만 id는 그렇게 사용할 수 없습니다.

2. id는 javascript와 css에서 접근하기 용이합니다. 하지만 중복된 값이 있다면 제대로 수행을 못합니다.

 

사용법

- javascript

<input type="text" id="test" value="ABC">


var x = document.getElementById("test").value;
console.log(x)


result :: ABC

 

 

 

- JQuery

<input type="text" id="test" value="ABC">


var x = $('#test').val()
console.log(x)


result :: ABC

 

 

○ name

name은 id와는 다르게 중복사용이 가능하지만 id나 class같이 CSS에는 접근할 수 없다는 특징을 가지고 있습니다.

 

사용법

- javascript

<input type="text" name="data" value="ABC">

// document.getElementsByName("data")[index]
// name은 중복을 허용하기 때문에 javascript에서 사용할땐 배열 인덱스값을 필수로 넣어줘야 합니다.
var x = document.getElementsByName("data")[0].value
console.log(x)


result :: ABC

 

- JQuery

<input type="text" name="data" value="ABC">


var x = $('inpiut[name=data]').val()

or
// name값이 여러개 존재한다면?
var x = $('input[name=data]').eq('0').val()
console.log(x)


result :: ABC

 

 

○ class

class는 보통 css설정을 적용시키기 위해 사용하지만 javascript 또는 JQuery에서 class로 특정 요소를 찾아야 하는 경우도 많이 있습니다.

class도 마찬가지로 name처럼 중복 사용이 가능합니다.

 

- javascript

<input type="text" class="text" value="ABC">

// class도 name과 동일하게 중복을 허용하여 javascript를 이용하여 사용시엔 배열 인덱스를 필수로 넣어줘야합니다.
var x = document.getElementsByClassName("test")[0].value
console.log(x)


result :: ABC

 

- JQuery

<input type="text" class="test" value="ABC">


var x = $('.test').val()

or

// 중복된 class 요소중 특정 class 요소의 값을 찾는다면?
var x = $('.test').eq('1').val()
console.log(x)


result :: ABC

 

이런 식으로 사용 가능합니다. 

 

 

스크립트는 활용하기 나름인 것 같습니다. 어떨 땐 javascript를 사용해야하지만 또 어떨땐 JQuery를 사용해야 하듯 두 개 모두 사용할 수 있도록 공부를 해두면 필요한 상황에 적재적소로 배치하여 사용하시면 되겠습니다.

 

 

 

구독하기👍 눌러주시고 자주 놀러와 주세요.

공감❤ ,댓글⌨은 저에게 큰 힘이 됩니다.

감사합니다.🤗

.

.

.

🙏잘못된 정보의 피드백은 댓글 남겨주세요.🙏