[javascript] JAVASCRIPT / JQUERY 를 이용한 ID, NAME, CLASS 값 가져오기

document에서 id를 이용해서 name / class를, name을 이용해서
id/ class를, class를 이용해서 id와 name을 가져올 수 있다.

javascript에서 object로써 값을 불러오거나 갱신할 때 등 사용할 필요가 있을 경우가 많기에 알아두면 좋다.

페이지 전환시 name으로 값을 전달하고, 해당페이지에서 javascript를 활용할 때 id로 참조하는 경우가 많기에
<div> <input> <select> 등 요소에 id와 name을 같이 입력하기도 한다.

jQuery 사용시

//1. By id
var name_by_id = $('#test_id').attr('name');
var class_by_id = $('#test_id').attr('class');
//2. By class
var name_by_class = $('.test_class').attr('name');
var id_by_class = $('.test_class').attr('id');
//3. By name
var id_by_name = $('[name="test_name"]').attr('id');
var class_by_name = $('[name="test_name"]').attr('class');

javascript 사용시

//1. By id
var name_by_id = document.getElementById("test_id").getAttribute('name');
var class_by_id = document.getElementById('test_id').ClassName;
//2. By class
var name_by_class = document.getElementsByClassName('test_class')[0].getAttribute('name');
var class_by_class = document.getElementsByClassName('test_class')[0].id;
//3. By name
var id_by_name = document.getElementsByName('test_name')[0].id;
var class_by_name = document.getElementsByName('test_name')[0].className;

기억해두자.