속성값 가져오기 attr, data 차이

속성

class, id, src, href, data-value 등을 모두 속성이라고 하는데

아이디와 클래스, src 등의 속성을 일반속성이라고하고

data- 로 시작하는 속성을 사용자 정의 속성이라고 한다.

 

일반 속성값을 구할 경우에는 attr()

data-로 시작하는 사용자 정의 속성값을 구할 경우에는 data()메서드를 사용하는게 좀 더 효율적이다.

 

속성값 가져오기

$대상.attr("속성이름")
$대상.data("data-속성이름")

 

attr()

<script>
    $(document).ready(function() {
        var $src = $(".logo").attr("src");
        var $href = $(".header > a").attr("href");
        console.log($src);
        console.log($href);
    })
</script>

<div class="header">
    <img src="logo.png" class="logo">
    <a href="https://moo-you.tistory.com/">링크</a>
</div>

 

실행결과

 

data()

<script>
    $(document).ready(function() {

        var $panel = $(".panel");
        console.log($panel.data()); //data-로 시작하는 속성정보를 하나의 오브젝트로 가져옴
        console.log($panel.data("num"));
        console.log($panel.data("link-data")); //data로 시작하지 않으면 값을 찾을 수 없다.
        console.log($panel.attr("link-data")); //data로 시작하지 않으면 attr로 가져와야한다.

    })

</script>

<div class="panel" data-num="123" data-img="logo.png" link-data="https://moo-you.tistory.com/">
    <p class="num">
        123
    </p>
    <img src="logo.png" />
    <a href="https://moo-you.tistory.com/"></a> 
</div>

 

실행결과

 

data() 메서드를 사용하면 data-로 시작하는 속성 정보를 하나의 객체로 가져온다.

attr을 사용해서도 data- 속성을 가져올 수 있지만 data()메서드를 사용하는게 더 간단하다.

data-로 시작하지 않으면 data()메서드로 값을 가져올 수 없다.