.prop() 대비 .attr()

selector = '#id'
$(selector).click(function() {
    //대신에:
    var getAtt = this.getAttribute('style');
    //이용할 수 있을까요:
    var thisProp = $(this).prop('style');
    //아니면:
    var thisAttr = $(this).attr('style');
    console.log(getAtt, thisProp, thisAttr);
});

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js></script>
<div id='id' style=color: red;background: orange;>테스트</div>

(또한 이 jsfiddle도 참조하세요.: http://jsfiddle.net/maniator/JpUF2/)

콘솔은 getAttribute을 문자열로, 그리고 attr을 문자열로, 그러나 prop을 CSSStyleDeclaration으로 기록합니다. 왜 그럴까요? 그리고 이것이 미래의 코딩에 어떤 영향을 미칠까요?

답변 1

속성보다 속성(props)이 더 간단하게 처리되는 예로, 초기에 선택된 확인란(checkbox)을 고려해보십시오. 이를 수행하기 위한 두 가지 유효한 HTML 코드의 예는 다음과 같습니다:

<input id=cb type=checkbox checked>
<input id=cb type=checkbox checked=checked>

그래서, jQuery를 사용하여 확인란이 체크되었는지 어떻게 확인합니까? Stack Overflow에서는 일반적으로 다음과 같은 제안을 찾을 수 있습니다:

• if ( $(#cb).attr(checked) === true ) {...}


• if ( $(#cb).attr(checked) == checked ) {...}


• if ( $(#cb).is(:checked) ) {...}

실제로 1995년 이후 모든 주요 스크립트가 가능한 브라우저에서 완벽하게 작동하는 checked 불리언 속성을 사용하여 이 작업을 가장 간단하게 수행할 수 있습니다:

if (document.getElementById(cb).checked) {...}

이 속성은 체크 박스를 선택하거나 선택 해제하는 것이 간단하게 됩니다:

document.getElementById(cb).checked = false

jQuery 1.6에서는 이렇게 명확하게 됩니다:

$(#cb).prop(checked, false)

체크 박스에 대해 checked 속성을 사용하여 스크립팅하는 것은 도움이 되지 않고 불필요합니다. 당신이 필요한 것은 속성입니다.

• checked 속성을 사용하여 체크 박스를 선택하거나 선택 해제하는 올바른 방법이 명확하지 않습니다.


• 이 속성 값은 현재 표시 상태가 아니라 기본 상태를 나타냅니다(일부 오래된 IE 버전에서만 제외하고, 따라서 여전히 어려움을 겪게 됩니다). 이 속성은 페이지의 체크 박스가 선택되었는지에 대한 정보를 전달하지 않습니다. http://jsfiddle.net/VktA6/49/를 참조하세요.

답변 2

.prop()와 .attr()의 차이점은 무엇인가요? 이 주제에 대해 SEO에 유의한 글을 작성해주세요.
.prop()와 .attr()은 jQuery에서 요소의 속성(attribute)을 변경하는데 사용되는 메서드입니다. 두 가지는 비슷해 보이지만, 실제로는 약간의 차이가 있습니다. 이 글에서는 두 가지 메서드의 차이점과 SEO에 대한 영향에 대해 알아보겠습니다.
.prop() 메서드는 요소의 속성(attribute)에 상태(status)를 나타내는 값을 설정하기 위해 사용됩니다. 일반적으로 체크박스나 라디오 버튼과 같은 요소의 상태를 변경하기 위해 사용됩니다. 예를 들어, 체크박스가 체크되었는지 여부를 확인하고 싶을 때 .prop('checked')를 사용할 수 있습니다. 이를 통해 체크박스가 선택되었는지 확인하거나 선택 취소할 수 있습니다. 또한, 속성(attribute)을 변경하는 것은 사이트의 기능에 영향을 줄 수 있으므로 SEO 면에서도 중요합니다. 특정 기능이 제대로 작동하지 않으면 검색 엔진이 사이트의 사용자 경험을 평가할 때 하위 순위로 평가할 수 있습니다.
반면 .attr() 메서드는 요소의 속성(attribute)을 가져오거나 설정하는 데 사용됩니다. 예를 들어, 이미지 요소(img)의 src 속성을 변경하려면 .attr('src', '이미지 경로')와 같이 사용할 수 있습니다. 이 외에도 href 속성을 변경하여 링크를 다른 페이지로 이동시킬 수도 있습니다. 또한, .attr() 메서드를 사용하여 요소의 속성을 변경하면 사이트의 검색 엔진 최적화(SEO)에 영향을 줄 수 있으므로 주의해야 합니다. 예를 들어, 이미지의 alt 속성을 변경하면 웹페이지의 검색 가능한 텍스트에 영향을 줄 수 있습니다. 검색 엔진은 이미지의 alt 텍스트를 읽어서 웹페이지의 내용을 평가하므로, 가능한 한 정확하고 설명적인 텍스트를 사용해야 합니다.
두 가지 메서드의 차이점을 요약하자면, .prop() 메서드는 요소의 상태를 나타내는 값을 설정하고 .attr() 메서드는 요소의 속성을 가져오거나 설정하는 데 사용된다는 것입니다. 둘 다 사용할 수 있는 경우가 있기 때문에 어느 것을 사용해야 하는지 다소 헷갈릴 수 있습니다.
SEO 면에서는 두 가지 메서드는 사이트의 기능과 내용을 수정하는데 사용될 수 있으므로 중요한 요소입니다. 특히 이미지의 alt 텍스트와 같은 텍스트 기반 속성은 사이트의 검색 가능성을 높이기 위해 정확하고 설명적으로 설정해야 합니다.
요약하자면, .prop()와 .attr() 메서드는 jQuery에서 요소의 상태와 속성을 변경하는데 사용됩니다. .prop()은 상태를 설정하고, .attr()은 속성을 가져오거나 설정합니다. 두 가지의 사용법을 정확히 이해하고 웹페이지의 검색 엔진 최적화를 위해 적절하게 사용해야 합니다.