jQuery: attr()과 prop()의 차이점

attr()

일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져오거나 일치하는 모든 요소에 대해 하나 이상의 속성을 설정합니다.
일치하는 요소 집합의 첫 번째 요소를 가져옵니다. 요소의 일치된 요소 속성을 추가하거나 선택한 각 요소에 대해 하나 이상의 속성을 추가합니다

prop()

일치하는 요소 집합의 첫 번째 요소에 대한 속성 값을 가져오거나 하나를 설정합니다. 일치하는 모든 요소에 대해 하나 이상의 속성을 사용합니다.
일치하는 요소 집합에서 첫 번째 요소의 속성을 가져오거나 선택한 각 요소에 대해 하나 이상의 속성을 추가합니다

관찰할 수 있듯이 두 요소 사이의 기능은 다음과 같습니다. 매우 유사하지만 서로 다른 개체에서 작동합니다.

이런 식으로 속성과 속성의 차이로 문제를 축소합니다.

속성과 속성은 모두 속성을 의미합니다. 속성을 속성으로, 속성을 속성으로 명명하는 데 동의합니다.

속성을 이야기해 보겠습니다

먼저, 자바스크립트에는 노드의 속성값을 얻기 위해 특별히 사용되는 getAttribute()가 있습니다.

노드의 속성 값은

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: attr()과 prop()의 차이점" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        console.log(image.getAttribute(&#39;src&#39;));
    </script>

및 setAttribute( ) , 노드의 속성 값을 설정합니다.

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: attr()과 prop()의 차이점" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.setAttribute(&#39;src&#39;, &#39;another.jpg&#39;);
    </script>

노드의 속성값이 변경된 것을 확인할 수 있습니다. setAttribute에 의해 설정된 속성 값은 노드의 속성 값을 변경합니다.

attr()의 기능은 JavaScript에서 getAttribute()와 setAttribut()를 결합하는 것입니다. 작업 대상은 노드의 속성 값입니다.

속성에 대해 이야기해보자

속성은 DOM 요소의 특징이며, 일반적인 객체 사용 방식과 동일합니다. .property 또는 object.property = PropertyValue 메소드를 전달하여 객체의 속성 값을 설정할 수도 있습니다.

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: attr()과 prop()의 차이점" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        console.log(image.src);
    </script>

DOM 요소의 특성값이 얻어지는 것을 확인할 수 있습니다. 노드의 속성값과 동일한 내용을 참조하지만 여전히 형태는 다릅니다.

DOM 요소의 속성값 설정을 보면:

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: attr()과 prop()의 차이점" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.src=&#39;another.jpg&#39;;
    </script>

DOM 요소의 속성값이 변경됨에 따라 node 요소의 속성값도 변경되는 것을 확인할 수 있습니다. 그런 다음 getAttribute() 메서드를 사용하여 방금 설정한 속성 값을 얻을 수 있는지 확인합니다.

<img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/700/563/134/1479446005532065.png?x-oss-process=image/resize,p_40"  class="lazy"  id=&#39;test&#39; src=&#39;test.jpg&#39; alt="jQuery: attr()과 prop()의 차이점" >
    <script type=&#39;text/javascript&#39;>
        var image = document.getElementById(&#39;test&#39;);
        image.src=&#39;another.jpg&#39;;
        console.log(img.getAttribute(&#39;src&#39;));
    </script>

DOM의 속성 값을 변경하면 요소의 속성 값도 변경되는지 확인하세요.

속성과 속성은 동일한가요?

사실 반드시 그런 것은 아닙니다. 실제 상황은 속성과 속성이 동일한 데이터 소스를 참조한다는 것입니다.

1. 내장 속성과 관련하여 속성 및 속성 공유 데이터는 속성에 영향을 미치며, 그 반대의 경우도 마찬가지입니다. 마찬가지로, 서로 영향을 미치지 않습니다. 아래 그림과 같으나 IE6과 7은 구분하지 않고 여전히 사용자 정의 속성 데이터를 공유합니다.

2. 모든 속성이 해당 속성 이름과 일치하는 것은 아닙니다. 예를 들어, 속성의 클래스는 속성의 해당 이름이 className입니다.

3. 값이 true/false인 속성, input의 check 등과 유사하게 속성으로 얻은 값은 HTML 문서의 값(checked)이며, 속성은 다음과 같이 계산하여 얻습니다. 결과(true/false) 및 속성 변경 속성 리터럴에는 영향을 미치지 않지만 속성 변경은 속성 계산에 영향을 미칩니다.

4. 일부 경로 관련 속성의 경우 둘이 얻는 값이 다르지만 마찬가지로 얻은 속성은 리터럴 값이고, 얻은 속성은 와 마찬가지로 계산된 전체 경로입니다. 위의 예에서 src를 반환합니다.

선택 방법

일반적으로 내장 속성에는 prop()을 사용하고, 사용자 정의 속성에는 attr()을 사용합니다. 그림 표면.