javascript / jquery 를 이용한 id, name, class 값 가져오기

지난 시간에는 id, name, class를 이용해서 각각의 input value들을 가져와 봤습니다.

 

이번에는 id를 이용해서 name / class를, name을 이용해서 ,id/ class를, class를 이용해서 id와 name을 가져와 보도록 하겠습니다.

(정확히 기억은 안 나는데, 이것들이 필요한 때가 있더군요.)

 

먼저 div를 선언합니다.

 

<div class="test_class" id="test_id" name="test_name"></div>

 

jquery 사용 유무에 따라  나눠서 말씀 드리겠습니다. 

 

Jquery 사용시.

 

//id로 접근하여 가져오기

var name_by_id = $('#test_id').attr('name');

var class_by_id = $('#test_id').attr('class');

 

//class로 접근하여 가져오기

var name_by_class = $('.test_class').attr('name');

var id_by_class = $('.test_class').attr('id');

 

//name으로 접근하여 가져오기

var id_by_name = $('[name="test_name"]').attr('id');

var class_by_name = $('[name="test_name"]').attr('class');

 

순수 javascript 사용시

 

//id로 접근하여 가져오기(getElementById의 element는 단수형입니다. class와 name은 복수형이고요. 주의하세요)

var name_by_id = document.getElementById("test_id").getAttribute('name');

var class_by_id = document.getElementById('test_id').ClassName;

 

//class로 접근하여 가져오기

var name_by_class = document.getElementsByClassName('test_class')[0].getAttribute('name');;

var class_by_class = document.getElementsByClassName('test_class')[0].id;

 

//name으로 접근하여 가져오기

var id_by_name = document.getElementsByName('test_name')[0].id;

var class_by_name = document.getElementsByName('test_name')[0].className;

 

 

끝입니다. 

* class나 name을 중복해서 사용하시는 경우 index값 설정에 주의해서 접근하셔야합니다.

https://codethief.io/ko/get-id-name-and-class-values-using-javascript-jquery/