Jquery class 값 가져오기 - jquery class gabs gajyeoogi

Question

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
> 0

@ walling unsplash

input 태그에 tom이라고

자바스크립트와 제이쿼리로 각각 id, class, name으로 값을 가져오는 방법에 대해서 알아보도록 하겠습니다.

Tip) jQuery를 사용하기 위해서 최상단에 스크립트를 선언했습니다.

<!DOCTYPE html>
<script src="https://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값을 중복 없는 유일 값이라고 생각하시고 선언해주시면 됩니다.