Post

JQUERY attr() & prop()의 차이

Posted Updated
Preview Image
By HwangInJi 6 min read

attr() 와 prop()

▶ jQuery는 DOM 조작을 쉽게 할 수 있도록 도와주는 라이브러리로, 여기서 attr()과 prop() 메서드는 HTML 요소의 속성이나 속성값을 다룰 때 주로 사용됩니다.
특히 이 두 메서드는 매우 유사해 보이지만 약간의 차이가 존재하기 때문에 각기 다른 상황에서 사용되어야 합니다. 오늘은 이 두 메서드가 어떤 차이가 있는지 알아볼까합니다!

1. attr() 메서드

01. 정의 및 사용

  • attr() 메서드는 HTML 요소의 속성(attribute)을 가져오거나 설정하는 데 사용됩니다.
    여기서 HTML 속성은 요소의 시작 태그 내에 정의되며, 요소의 초기 상태를 나타냅니다.
1
2
3
4
5

// 속성값 가져오기
var id = $('div').attr('id');

// 속성값 설정하기
$('div').attr('id', 'new-id');
  • 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
  <title>jQuery attr() Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv" class="myClass">Hello, World!</div>
  <script>
    // 'id' 속성 가져오기
    console.log($('#myDiv').attr('id')); // 출력: myDiv

    // 'id' 속성 설정하기
    $('#myDiv').attr('id', 'newId');
    console.log($('#newId').attr('id')); // 출력: newId
  </script>
</body>
</html>
  • 위의 예시에서 attr() 메서드는 div 요소의 id 속성을 가져오고, 새로운 값으로 설정합니다.

2. prop() 메서드

01. 정의 및 사용

  • prop() 메서드는 DOM 요소의 속성(property)을 가져오거나 설정하는 데 사용됩니다.
    여기서 DOM 속성은 자바스크립트 객체의 속성으로, 요소의 현재 상태를 나타냅니다.
1
2
3
4
5

// 속성값 가져오기
var checked = $('input').prop('checked');

// 속성값 설정하기
$('input').prop('checked', true);
  • 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html>
<head>
  <title>jQuery prop() Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="checkbox" id="myCheckbox">
  <script>
    // 'checked' 속성 가져오기
    console.log($('#myCheckbox').prop('checked')); // 출력: false

    // 'checked' 속성 설정하기
    $('#myCheckbox').prop('checked', true);
    console.log($('#myCheckbox').prop('checked')); // 출력: true
  </script>
</body>
</html>
  • 위의 예시에서 prop() 메서드는 checkbox 요소의 checked 속성을 가져오고, 새로운 값으로 설정합니다.

주요 차이점

  1. HTML 속성 vs. DOM 속성
    • attr()는 HTML 속성을 다룹니다. HTML 속성은 요소의 시작 태그 내에 정의된 속성입니다.
    • prop()는 DOM 속성을 다룹니다. DOM 속성은 자바스크립트 객체의 속성으로, 요소의 현재 상태를 반영합니다.
  2. 사용 용도
    • attr()는 HTML 속성을 읽거나 설정하는 데 사용됩니다. 예를 들어, id, class, data- 속성 등을 다룰 때 사용됩니다.
    • prop()는 DOM 속성을 읽거나 설정하는 데 사용됩니다. 예를 들어, checked, selected, disabled와 같은 상태를 나타내는 속성을 다룰 때 사용됩니다.
  3. 상태 반영
    • attr()는 요소의 초기 상태를 반영합니다.
    • prop()는 요소의 현재 상태를 반영합니다.

예시를 통한 차이점 이해

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
<head>
  <title>attr() vs prop() Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="checkbox" id="myCheckbox" checked>
  <script>
    // 초기 상태 확인
    console.log($('#myCheckbox').attr('checked')); // 출력: 'checked'
    console.log($('#myCheckbox').prop('checked')); // 출력: true

    // 상태 변경
    $('#myCheckbox').prop('checked', false);

    // 변경된 상태 확인
    console.log($('#myCheckbox').attr('checked')); // 출력: 'checked' (초기 상태)
    console.log($('#myCheckbox').prop('checked')); // 출력: false (현재 상태)
  </script>
</body>
</html>
  • 위의 예시에서 attr()는 체크박스의 초기 상태를 반영하는 반면, prop()는 현재 상태를 반영합니다.

결론

▶ attr()와 prop() 메서드는 jQuery에서 요소의 속성을 다루는 데 중요한 역할을 합니다.

  • attr()는 주로 요소의 초기 상태를 정의하는 속성을 다룰 때 사용됩니다.
  • prop()는 요소의 현재 상태를 나타내는 속성을 다룰 때 사용됩니다.
    이러한 차이점을 명확히 이해함으로써, 보다 효율적이고 정확한 DOM 조작을 수행할 수 있습니다.


이렇게 오늘은 JQUERY attr() & prop()의 차이에 대해 알아봤는데요,
면접에서도 충분히 나올 수 있는 질문이기 때문에 미리 공부해두면 좋을 것 같네요! 그렇다면 저는 다음에 또다른 면접에 대비한 내용을 들고오도록 하겠습니다 😁!

자바스크립트
JQUERY attr() prop()
This post is licensed under CC BY 4.0 by the author.