[javascript] .prop () 대 .attr ()

나는 Tim이 꽤 잘 말했다고 생각 하지만 뒤로 물러서 봅시다.

DOM 요소는 메모리에있는 객체입니다. OOP의 대부분의 객체와 마찬가지로 속성 이 있습니다 . 또한 별도로 요소에 정의 된 속성 맵이 있습니다 (일반적으로 브라우저가 요소를 작성하기 위해 읽는 마크 업에서 가져옴). 요소의 일부 특성은 그들의 얻을 초기 의 값을 속성이 동일하거나 유사한 이름 (와 value, “값”속성에서 초기 값을 가져옵니다 href은 “HREF”속성에서 초기 값을 가져옵니다,하지만 정확히 같은 값 아니다; className으로부터 “클래스”속성). 다른 속성은 다른 방법으로 초기 값을 가져옵니다. 예를 들어 parentNode속성은 부모 요소가 무엇인지에 따라 값을 가져 옵니다 .style “스타일”속성이 있는지 여부

다음 페이지의이 앵커를 고려해 봅시다 http://example.com/testing.html.

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

약간의 무료 ASCII 아트 (그리고 많은 것들을 제외하고) :

+ ----------------------------------
| HTMLAnchorElement |
+ ----------------------------------
| href : "http://example.com/foo.html"|
| 이름 : "fooAnchor"|
| id : "fooAnchor"|
| className : "테스트 하나"|
| 속성 : |
| href : "foo.html"|
| 이름 : "fooAnchor"|
| id : "fooAnchor"|
| 수업 : "테스트 하나"|
+ ----------------------------------

속성과 속성은 서로 다릅니다.

이제 그것들은 별개이지만,이 모든 것들이 처음부터 설계되기보다는 진화 되었기 때문에, 많은 속성들이 그것들을 설정하면 그들이 파생 한 속성에 다시 쓰여집니다. 그러나 모든 href것이 아니며, 위에서 볼 수 있듯이 매핑이 항상 “값을 전달”하는 것은 아니며 때로는 해석이 필요합니다.

객체의 속성 인 속성에 대해 이야기 할 때, 나는 초록으로 말하지 않습니다. 비 jQuery 코드는 다음과 같습니다.

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(이 값은 대부분의 브라우저에 따라 다르며 약간의 차이가 있습니다.)

link객체는 진짜이며, 당신은 접근 사이의 진정한 차이 거기에 볼 수있는 속성을 그것에 및 액세스하는 속성 .

Tim이 말했듯이 대부분 의 시간 동안 우리는 속성을 다루기를 원합니다. 부분적으로는 값 (이름조차도)이 브라우저에서보다 일관된 경향이 있기 때문입니다. 그것은 (사용자 정의 속성)에 관련된 프로퍼티가 없을 때 우리는 대부분의 속성 만 작업 할, 또는 우리가 특정 속성, 속성 및 속성이 1이 아닌 것을 알고 : (와 마찬가지로 1 href위 “HREF”) .

표준 속성은 다양한 DOM 사양에 설명되어 있습니다.

• DOM2 HTML (대부분 더 이상 사용되지 않으며 대신 HTML 사양 참조 )
• DOM2 코어 (더 이상 사용되지 않음)
• DOM3 코어 (더 이상 사용되지 않음)
• DOM4

이 스펙은 훌륭한 색인을 가지고 있으며 그에 대한 링크를 편리하게 유지하는 것이 좋습니다. 나는 항상 그들을 사용합니다.

예를 들어, 사용자 정의 속성에는 data-xyz코드에 메타 데이터를 제공하기 위해 요소에 추가 할 수 있는 모든 속성이 포함됩니다 (이제 data-접두사 를 고수하는 한 HTML5부터 유효 함 ). (최신 버전의 jQuery data-xyz는 data함수 를 통해 요소에 액세스 할 수 있지만 해당 함수는 속성에 대한 접근 자만 이 아닙니다data-xyz . 실제로 그 기능이 필요하지 않으면 attr함수를 사용하여 상호 작용합니다. 와 data-xyz속성.)

이 attr함수는 문자 그대로 속성을 얻는 것이 아니라 원하는 것을 얻는 것에 대한 복잡한 논리를 사용했습니다. 그것은 개념을 혼란시켰다. 에 이동 prop및 attr해제 conflate에게 그들을 의미했다. v1.6.0에서 jQuery는 그 점에서 너무 멀리 나갔지 만 기술적으로 사용해야 할 때 사람들이 사용하는 일반적인 상황을 처리 하기 위해 기능 이 빠르게 다시 추가되었습니다 .attrattrprop

답변

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

<input blah="hello">

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');

<input style="font:arial;"/>

<input value="hello" type="text"/>

$('input').prop('value', 'i changed the value');

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>