IT기술/javascript
[javascript] JAVASCRIPT / JQUERY 를 이용한 ID, NAME, CLASS 값 가져오기
도미노드 2021. 9. 30. 16:07
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'); | cs |
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; | cs |
기억해두자.
<div id="main" class="main-home"> ... </div>
위와 같은 div 엘리먼트에서 Class 확인 방법 3가지
Class 존재/미존재로 나눈 사용 예제.
// 1. hasClass 함수 사용 > $("#main").hasClass("main-home") > true > $("#main").hasClass("home") > false // 2. is 함수 사용 - class 외에 id, name 등도 사용 가능 > $("#main").is(".main-home") > true > $("#main").is(".home") > false // 3. length 속성 체크 > $("#main.main-home").length > 1 > $("#main.home").length > 0input 태그에 tom이라고
자바스크립트와 제이쿼리로 각각 id, class, name으로 값을 가져오는 방법에 대해서 알아보도록 하겠습니다.
Tip) jQuery를 사용하기 위해서 최상단에 스크립트를 선언했습니다.
<!DOCTYPE html> <script src="//code.jquery.com/jquery-3.3.1.min.js" ></script> <html> <head></head> <body> <input type="text" class="name" id="name" name="name" value="tom"> </body> </html>
혹시나 테스트 파일이 필요하신 분들을 위해서 html 다운로드할 수 있게 올려 드립니다.
name.html
0.00MB
자바스크립트 제이쿼리 id를 이용해서 value 값 가져오기
jQuery: $("#name"). val();
javascript: document.getElementById("name"). value;
jQuery의 경우에는 #을 통해서 id값을 가져올 수 있습니다.
javascript는 getElementById("id값"). value로 값을 가져올 수 있습니다.
각각 이렇게 선언해 준다면 아래처럼 tom이라는 값을 가져오는 걸 볼 수 있습니다.
※ id값은 html 문서에서 명칭이 겹치지 않게 해 주셔야 됩니다. 예를 들어 제가 id를 name이라고 선언 했다면 다시 또 id를 name 이라고 선언하게 된다면 오류가 발생할 것이니 조심하셔야 됩니다. HTML작성 시 id값을 중복 없는 유일 값이라고 생각하시고 선언해주시면 됩니다.
자바스크립트 제이쿼리 class를 이용해서 value 값 가져오기
jQuery: $(". name"). val();
javascript:document.getElementsByClassName("name")[0]. value;
jQuery의 경우에는 닷(.)을 이용하시면 값을 가져올 수 있습니다.
javascirpt를 이용해서 class로 값을 가져오기 위해서는 배열 인덱스( 예: [0] )를 필수로 넣어 주셔야 됩니다.
▼ 각각 이렇게 선언해 준다면 아래처럼 tom이라는 값을 가져오는 걸 볼 수 있습니다.
자바스크립트 제이쿼리 name를 이용해서 value 값 가져오기
jQuery: $("[name=name]"). val();
$("input [name=name]"). val();
javascript:document.getElementsByName("name")[0]. value;
jQuery의 경우에는 [name=name명] 또는 앞에 태그를 붙여서 input [name=name]을 이용하시면 값을 가져올 수 있습니다.
javascirpt를 이용해서 name 값을 가져오기 위해서는 class와 마찬가지로 배열 인덱스( 예: [0] )를 필수로 넣어 주셔야 됩니다.
▼ 각각 이렇게 선언해 준다면 아래처럼 tom이라는 값을 가져오는 걸 볼 수 있습니다.