jQuery-04.dom_속성

태그 속성 JavaScript-jQuery 비교

                          | JavaScript                     | jQuery
      --------------------|--------------------------------|--------------------
      attribute 가져오기  | 요소.getAttribute('속성')      | 요소.attr('속성')
      attribute 설정하기  | 요소.setAttribute('속성', 값)  | 요소.attr('속성', 값)
      attribute 삭제하기  | 요소.removeAttribute('속성')   | 요소.removeAttr('속성')

jQuery 객체 생성

var img = $('#p1 > img');

attribute 확인

console.log(img.attr('src'));
console.log(img.attr('width'));

attribute 설정

img.attr('src', '../../assets/image/flower2.jpg');
img.attr('width', '192px');

attribute 제거

img.removeAttr('src');
img.removeAttr('width');

객체 속성 JavaScript-jQuery 비교

                       | JavaScript    | jQuery
   --------------------|---------------|--------------------
    property 가져오기   | 요소.속성      | 요소.prop('속성')
                       | 요소['속성']   | 요소.prop('속성')
    property 설정하기   | 요소.속성      | 요소.prop('속성', 값)
                       | 요소.['속성']  | 요소.prop('속성', 값) 
    property 삭제하기   | 요소.속성      | 요소.removeProp('속성') : built-in property 삭제 금지
                       | 요소['속성']   | 요소.removeProp('속성') : built-in property 삭제 금지

jQuery 객체 생성

var radio = $('#p2 > :radio:checked');

property 확인

console.log(radio.prop('type'));         // 'radio'
console.log(radio.prop('name'));         // 'gender'
console.log(radio.prop('id'));           // 'male'
console.log(radio.prop('class'));        // 'blind',    class 속성을 다루는 메소드는 별도로 존재함, addClass(), removeClass(), toggleClass()
console.log(radio.prop('value'));        // 'M',        value 속성을 다루는 메소드는 별도로 존재함, val()
console.log(radio.prop('data-gender'));  // undefined,  data- 속성을 다루는 메소드는 별도로 존재함, data()
console.log(radio.prop('checked'));      // true,       동일한 결과 : radio.is(':checked')

property 설정

radio.prop('id', 'man');
radio.next().prop('for', 'man');  // 동일한 결과 : radio.next().attr('for', 'man')
radio.prop('checked', false);

value 속성 JavaScript-jQuery 비교

           		      | JavaScript         | jQuery
     -----------------|--------------------|--------------------
      value 가져오기   | 요소.value         | 요소.val()
      value 설정하기   | 요소.value = 값    | 요소.val(값)

value 가져오기

console.log($('#p3 > select').val());

value 설정하기

$('#p3 > :text').val('Hello World');
$('#p3 > select').val(3);
$('#p3 > textarea').val('안녕하세요. 반갑습니다.');

data- 속성 jQuery

data() 메소드로 설정한 data-속성

                    	  | jQuery
      --------------------|----------------------------------------------------
      data-item 가져오기   | 요소.data('item')
      data-item 설정하기   | 요소.data('item', 값)
      data-myName 가져오기 | 요소.data('myName')        요소.data('my-name')
      data-myName 설정하기 | 요소.data('myName', 값)    요소.data('my-name', 값)
      data-my-age 가져오기 | 요소.data('my-age')        요소.data('myAge')
      data-my-age 설정하기 | 요소.data('my-age', 값)    요소.data('myAge', 값)

data-속성 설정하기

$('#p4').data('range', {'first': 1, 'last': 10});  // data-range="{'first': 1, 'last': 10}"

data-속성 가져오기

var range = $('#p4').data('range');

data-속성 설정하기

$('#first').data('firstNo', range.first).text(range.first);  // data-firstNo="1"
$('#last').data('last-no', range.last).text(range.last);     // data-last-no="10"

data-속성 가져오기

var first = $('#first').data('first-no');
var last = $('#last').data('lastNo');
console.log(first, last);

모든 data-속성 가져오기

console.log($('#first').data());  // {'firstNo': 1}
console.log($('#last').data());   // {'lastNo': 10}

attribute로 명시한 data-속성 JavaScript-jQuery 비교

attribute로 작성한 data-속성에서는 camel case를 사용하지 말자.

                          | JavaScript                | jQuery
      --------------------|---------------------------|-------------------------------------------------
      data-item 가져오기   | 요소.dataset.item         | 요소.data('item')
      data-item 설정하기   | 요소.dataset.item = 값    | 요소.data('item', 값)
      data-myName 가져오기 | 요소.dataset.myname       | 요소.data('myname')
      data-myName 설정하기 | 요소.dataset.myname = 값  | 요소.data('myname', 값)
      data-my-age 가져오기 | 요소.dataset.myAge        | 요소.data('my-age')       요소.data('myAge')
      data-my-age 설정하기 | 요소.dataset.myAge = 값   | 요소.data('my-age', 값)   요소.data('myAge', 값)

jQuery 객체 생성

var p5 = $('#p5');

data-속성 가져오기

console.log(p5.data('role'));        // admin
console.log(p5.data('member-no'));   // 1,          p5.data('memberNo')도 가능함
console.log(p5.data('memberName'));  // undefined,  p5.data('membername')으로 가능함

[04dom속성.html]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../assets/js/lib/jquery-3.7.1.min.js"></script>
</head>
<body>
  
  
  <!-- 태그 속성 -->
  <p id="p1">
    <img src="../../assets/image/flower1.jpg" width="384px">
  </p>
  <script>

    /*
                          | JavaScript                     | jQuery
      --------------------|--------------------------------|--------------------
      attribute 가져오기  | 요소.getAttribute('속성')      | 요소.attr('속성')
      attribute 설정하기  | 요소.setAttribute('속성', 값)  | 요소.attr('속성', 값)
      attribute 삭제하기  | 요소.removeAttribute('속성')   | 요소.removeAttr('속성')
    */

    // jQuery 객체 생성
    var img = $('#p1 > img');

    // attribute 확인
    console.log(img.attr('src'));
    console.log(img.attr('width'));

    // attribute 설정
    img.attr('src', '../../assets/image/flower2.jpg');
    img.attr('width', '192px');

    // attribute 제거
    img.removeAttr('src');
    img.removeAttr('width');

  </script>


  <hr>


  <!-- 객체 속성 -->
  <p id="p2">
    <input type="radio" name="gender" value="M" id="male" class="blind" checked="checked" data-gender="1">
    <label for="male">남자</label>
    <input type="radio" name="gender" value="F" id="female" class="blind" data-gender="2">
    <label for="female">여자</label>
  </p>
  <script>

    /*
                          | JavaScript     | jQuery
      --------------------|----------------|--------------------
      property 가져오기   | 요소.속성      | 요소.prop('속성')
                          | 요소['속성']   | 요소.prop('속성')
      property 설정하기   | 요소.속성      | 요소.prop('속성', 값)
                          | 요소.['속성']  | 요소.prop('속성', 값) 
      property 삭제하기   | 요소.속성      | 요소.removeProp('속성') : built-in property 삭제 금지
                          | 요소['속성']   | 요소.removeProp('속성') : built-in property 삭제 금지
    */
    
    // jQuery 객체 생성
    var radio = $('#p2 > :radio:checked');
    
    // property 확인
    console.log(radio.prop('type'));         // 'radio'
    console.log(radio.prop('name'));         // 'gender'
    console.log(radio.prop('id'));           // 'male'
    console.log(radio.prop('class'));        // 'blind',    class 속성을 다루는 메소드는 별도로 존재함, addClass(), removeClass(), toggleClass()
    console.log(radio.prop('value'));        // 'M',        value 속성을 다루는 메소드는 별도로 존재함, val()
    console.log(radio.prop('data-gender'));  // undefined,  data- 속성을 다루는 메소드는 별도로 존재함, data()
    console.log(radio.prop('checked'));      // true,       동일한 결과 : radio.is(':checked')
    
    // property 설정
    radio.prop('id', 'man');
    radio.next().prop('for', 'man');  // 동일한 결과 : radio.next().attr('for', 'man')
    radio.prop('checked', false);

  </script>


  <!-- value 속성 -->
  <p id="p3">
    <input type="text" placeholder="입력상자">
    <br>
    <select>
      <option value="1">1</option>
      <option value="2" selected>2</option>
      <option value="3">3</option>
    </select>
    <br>
    <textarea></textarea>
  </p>
  <script>

    /*
                       | JavaScript         | jQuery
      -----------------|--------------------|--------------------
      value 가져오기   | 요소.value         | 요소.val()
      value 설정하기   | 요소.value = 값    | 요소.val(값)
    */

    // value 가져오기
    console.log($('#p3 > select').val());

    // value 설정하기
    $('#p3 > :text').val('Hello World');
    $('#p3 > select').val(3);
    $('#p3 > textarea').val('안녕하세요. 반갑습니다.');

  </script>


  <hr>


  <!-- data- 속성 -->
  <p id="p4">
    <span id="first"></span>부터 <span id="last"></span>까지
  </p>
  <script>

    /*

      data() 메소드로 설정한 data-속성

                           | jQuery
      ---------------------|----------------------------------------------------
      data-item 가져오기   | 요소.data('item')
      data-item 설정하기   | 요소.data('item', 값)
      data-myName 가져오기 | 요소.data('myName')        요소.data('my-name')
      data-myName 설정하기 | 요소.data('myName', 값)    요소.data('my-name', 값)
      data-my-age 가져오기 | 요소.data('my-age')        요소.data('myAge')
      data-my-age 설정하기 | 요소.data('my-age', 값)    요소.data('myAge', 값)

    */

    // data-속성 설정하기
    $('#p4').data('range', {'first': 1, 'last': 10});  // data-range="{'first': 1, 'last': 10}"

    // data-속성 가져오기
    var range = $('#p4').data('range');
    
    // data-속성 설정하기
    $('#first').data('firstNo', range.first).text(range.first);  // data-firstNo="1"
    $('#last').data('last-no', range.last).text(range.last);     // data-last-no="10"

    // data-속성 가져오기
    var first = $('#first').data('first-no');
    var last = $('#last').data('lastNo');
    console.log(first, last);

    // 모든 data-속성 가져오기
    console.log($('#first').data());  // {'firstNo': 1}
    console.log($('#last').data());   // {'lastNo': 10}

  </script>


  <hr>


  <!-- attribute로 작성한 data-속성에서는 camel case를 사용하지 말자. -->
  <p id="p5" data-role="admin" data-member-no="1" data-memberName="홍길동">홍길동</p>
  <script>

    /*
      
      attribute로 명시한 data-속성

                           | JavaScript                | jQuery
      ---------------------|---------------------------|-------------------------------------------------
      data-item 가져오기   | 요소.dataset.item         | 요소.data('item')
      data-item 설정하기   | 요소.dataset.item = 값    | 요소.data('item', 값)
      data-myName 가져오기 | 요소.dataset.myname       | 요소.data('myname')
      data-myName 설정하기 | 요소.dataset.myname = 값  | 요소.data('myname', 값)
      data-my-age 가져오기 | 요소.dataset.myAge        | 요소.data('my-age')       요소.data('myAge')
      data-my-age 설정하기 | 요소.dataset.myAge = 값   | 요소.data('my-age', 값)   요소.data('myAge', 값)

    */

    // jQuery 객체 생성
    var p5 = $('#p5');

    // data-속성 가져오기
    console.log(p5.data('role'));        // admin
    console.log(p5.data('member-no'));   // 1,          p5.data('memberNo')도 가능함
    console.log(p5.data('memberName'));  // undefined,  p5.data('membername')으로 가능함

  </script>


  <hr>


  <style>
    #p6::before {
      content: attr(data-ho);
      margin-right: 0.5em;
    }
  </style>
  <p id="p6" data-ho="추사">김정희</p>


</body>
</html>