Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS jQuery 속성 제어 API , attribute vs property 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS jQuery 속성 제어 API , attribute vs property

호IT 2021. 2. 8. 06:44

 

 

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

 

 

 

 

 

- 속성제어

 

 

jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr입니다.

 

또한 removeAttribute에 대응되는 메소드로는 removeAttr이 있습니다.

 

 

<!DOCTYPE html>
<html>
<body>
    <a id="target" href="http://opentutorials.org">opentutorials</a>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
    var t = $('#target');
    console.log(t.attr('href')); //http://opentutorials.org
    t.attr('title', 'opentutorials.org'); // title 속성의 값을 설정한다.
    t.removeAttr('title'); // title 속성을 제거한다.
    </script>
 

</body>
</html>

 

 

 

 

 

위 그림과 같이 href 속성이 제대로 출력되는 것을 알 수 있습니다.

 

 

 

 

- attribute와 property

 

 

DOM과 마찬가지로 jQuery도 속성(attribute)과 프로퍼티를 구분합니다.

 

 

속성은 attr, 프로퍼티는 prop 메소드를 사용합니다.

 

 

 

<a id="t1" href="./demo.html">opentutorials</a>
<input id="t2" type="checkbox" checked="checked" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
// 현재 문서의 URL이 아래와 같다고 했을 때
// http://localhost/jQuery_attribute_api/demo2.html
var t1 = $('#t1');
console.log(t1.attr('href')); // ./demo.html 
console.log(t1.prop('href')); // http://localhost/jQuery_attribute_api/demo.html 
 
var t2 = $('#t2');
console.log(t2.attr('checked')); // checked
console.log(t2.prop('checked')); // true
</script>

 

 

마치 Atrribute 방식과 Property 가 다른것처럼 attr과 prop는 결괏값이 차이가 납니다.

 

이 둘의 차이점을 모른다면 https://nevertrustbrutus.tistory.com/299 에서 참고하시길바랍니다.

 

 

 

 

하지만

 

jQuery를 이용하면 프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해줍니다.

 

 

 

<div id="t1">opentutorials</div>
<div id="t2">opentutorials</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#t1').prop('className', 'important'); 
$('#t2').prop('class', 'current');  
</script>

 

 

$('#t1').prop('className', 'important'); 
$('#t2').prop('class', 'current');

코드를 보면 알 수 있듯, class 를 사용하나 className 을  제이쿼리가 자동으로 보정해줍니다.

 

 

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] Node 객체  (0) 2021.02.08
[ JavaScript ] JS jQuery api 범위 제한 , .find()  (0) 2021.02.08
[ JavaScript ] JS 속성 API , attribute vs property  (0) 2021.02.08
[ JavaScript ] JS 조회 API, document 객체 vs element 객체  (0) 2021.02.08
[ JavaScript ] JS 식별자 API , Element.tagName , Element.id , Element.className , Element.classList  (0) 2021.02.08
'SUA 정보보안/JavaScript' Related Articles more
Comments