getAttribute () 대 Element 객체 속성?

같은 식 Element.getAttribute("id")및Element.id 똑같은 것을 반환합니다.

HTMLElement 객체의 속성이 필요할 때 어떤 것을 사용해야합니까?

같은 이러한 방법으로 어떤 크로스 브라우저 문제가 있습니다 getAttribute()및setAttribute() 있습니까?

아니면 객체 속성에 직접 액세스하는 것과 이러한 속성 메서드를 사용하는 것 사이의 성능에 어떤 영향이 있습니까?

getAttribute검색 속성 , 동안 DOM 요소를 el.id검색하는 속성 이 DOM 요소한다. 그들은 동일하지 않습니다.

대부분의 경우 DOM 속성은 속성과 동기화됩니다.

그러나 동기화 가 동일한 값을 보장하지는 않습니다 . 고전적인 예는 앵커 요소 사이 el.href와 el.getAttribute('href')입니다.

예를 들면 :

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

이 동작은 W3C 에 따라 href 속성이 올바른 형식의 링크 여야 하기 때문에 발생 합니다. 대부분의 브라우저는이 표준을 존중합니다 (누가 그렇지 않을까요?).

input의 checked재산에 대한 또 다른 사례가 있습니다. DOM 속성이 반환 true하거나 false속성이 문자열을 반환하는 동안"checked" 또는 빈 문자열을 합니다.

그리고 단방향으로 만 동기화되는 일부 속성이 있습니다 . 가장 좋은 예는 요소 의 value속성입니다 input. DOM 속성을 통해 값을 변경해도 속성은 변경되지 않습니다 (편집 : 더 정확한 첫 번째 주석 확인).

이러한 이유 때문에 브라우저마다 동작이 다르기 때문에 속성이 아닌 DOM 속성 을 계속 사용하는 것이 좋습니다 .

실제로 속성을 사용해야하는 경우는 두 가지뿐입니다.

1. DOM 속성에 동기화되지 않기 때문에 사용자 정의 HTML 속성입니다.
2. 속성에서 동기화되지 않은 기본 제공 HTML 속성에 액세스하려면 속성 (예 value: input요소 의 원본 )이 필요합니다.

더 자세한 설명을 원하시면 이 페이지 를 읽어 보시기 바랍니다 . 몇 분 밖에 걸리지 않지만 정보 (여기서 요약 한 내용)에 기뻐할 것입니다.

getAttribute('attribute') 일반적으로 페이지의 HTML 소스에 정의 된대로 속성 값을 문자열로 반환합니다.

그러나 element.attribute속성의 정규화 또는 계산 된 값을 반환 할 수 있습니다. 예 :

• <a href="https://stackoverflow.com/foo"></a>
  • a.href는 전체 URL 을 포함합니다.
• <input type="checkbox" checked>
  • input.checked는 true (부울)가됩니다.
• <input type="checkbox" checked="bleh">
  • input.checked는 true (부울)가됩니다.
• <img src='http://dummyimage.com/64x64/000/fff'>
  • img.width는 이미지가로드되기 전에 0 (숫자) 이됩니다.
  • img.width는 이미지 (또는 이미지의 처음 몇 바이트)가로드 될 때 64 (숫자)가됩니다.
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img.width는 계산 된 50 %가됩니다.
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img.width는 50 (숫자)입니다.
• <div style='background: lime;'></div>
  • div.style은 객체가됩니다.

에 따르면 이 jsPerf 테스트하는 것은 getAttribute 보다 느린id 속성 .

추신

이상하게도 두 명령문은 다른 브라우저에 비해 IE8에서 매우 나쁘게 수행됩니다.

특별한 이유가없는 한 항상 속성을 사용하십시오.

• getAttribute() 과 setAttribute() 이전의 IE (이상 버전에서 호환 모드) 끊어지는
• 속성이 더 편리합니다 (특히 부울 속성에 해당하는 속성).

있다 몇 가지 예외 :

• 속성에 액세스 <form>요소의
• 사용자 지정 속성에 액세스 (사용자 지정 속성 사용은 권장하지 않지만)

이 주제에 대해 몇 번 썼습니다.

• https://stackoverflow.com/a/7010268/96100
• https://stackoverflow.com/a/4456805/96100

.id함수 호출 오버 헤드를 절약합니다. (매우 작지만 물었다.)

이것을 완전히 이해하려면 아래 예제를 시도하십시오. 아래 DIV의 경우

<div class="myclass"></div>

는 Element.getAttribute('class')반환 myclass하지만 당신은 사용이 Element.classNameDOM을 속성에서 검색합니다.

이것이 큰 차이를 만드는 한 가지 영역은 속성 기반 CSS 스타일링입니다.

다음을 고려하세요:

const divs = document.querySelectorAll('div');

divs[1].custom = true;
divs[2].setAttribute('custom', true);

div {
  border: 1px solid;
  margin-bottom: 8px;
}

div[custom] {
  background: #36a;
  color: #fff;
}

<div>A normal div</div>
<div>A div with a custom property set directly.</div>
<div>A div with a custom attribute set with `setAttribute`</div>

맞춤 속성이 직접 설정된 div는 속성에 값을 반영하지 않으며 속성 선택기 (div[custom] CSS )에 .

setAttribute그러나를 사용하여 맞춤 속성이 설정된 div 는 CSS 속성 선택기를 사용하여 선택할 수 있으며 그에 따라 스타일을 지정할 수 있습니다.