javascript 에서 attribute 와 property 의 차이 에 대한 상세 한 설명

DOM 요소 의 attribute 와 property 는 쉽게 혼 합 됩 니 다.많은 초보 친구 들 도 예전 의 나 를 포함해 서 잘 모 르 는 경우 가 많다.attribute 는 중국어 용 어 를 '특성' 으로 번역 하고, property 는 중국어 용 어 를 '속성' 으로 번역 합 니 다. 중국어 의 글자 뜻 으로 볼 때 확실히 차이 가 있 습 니 다. 먼저 attribute 를 말씀 드 리 겠 습 니 다.attribute 는 하나의 특성 노드 입 니 다. 모든 DOM 요 소 는 대응 하 는 attributes 속성 을 가지 고 모든 attribute 노드 를 저장 합 니 다. attributes 는 하나의 클래스 배열 의 용기 입 니 다. 정확하게 말 하면 NameNodeMap 입 니 다. 한 마디 로 배열 과 유사 하지만 배열 과 다른 용기 입 니 다.attributes 의 모든 디지털 인덱스 는 이름 값 쌍 (name = "value") 형식 으로 attribute 노드 를 저장 합 니 다.

   
hello
 
 

위의 div 요소 의 HTML 코드 에는 class, id, 그리고 사용자 정의 gameid 가 있 습 니 다. 이러한 특성 들 은 attributes 에 저장 되 어 있 습 니 다. 다음 과 같은 형식 입 니 다.

   [ class="box", id="box", gameid="880" ] 
 

attribute 노드 에 이렇게 접근 할 수 있 습 니 다:

 
  
var elem = document.getElementById( 'box' ); 
  
console.log( elem.attributes[0].name ); // class 
  
console.log( elem.attributes[0].value ); // box 
  
 
 

그러나 IE6 - 7 은 많은 것 을 attributes 에 저장 하고 위의 접근 방법 과 표준 브 라 우 저의 반환 결 과 는 다르다.보통 attribute 노드 를 가 져 오 려 면 getAttribute 방법 을 사용 합 니 다.

   console.log( elem.getAttribute('gameid') ); // 880 
 

attribute 노드 를 설정 하려 면 setAttribute 방법 을 사용 하고 삭제 하려 면 removeAttribute 를 사용 하 십시오.

   elem.setAttribute('testAttr', 'testVal'); 
  
console.log( elem.removeAttribute('gameid') ); // undefined 
 

attributes 는 attribute 노드 를 추가 하거나 삭제 하면 서 동적 으로 업 데 이 트 됩 니 다.property 는 하나의 속성 입 니 다. DOM 요 소 를 일반적인 Object 대상 으로 본다 면 property 는 이름 값 쌍 (name = "value") 으로 Object 에 저 장 된 속성 입 니 다.property 를 추가 하고 삭제 하 는 것 도 훨씬 간단 합 니 다. 일반적인 대상 과 다 를 바 가 없습니다.

 
  
elem.gameid = 880; //    
  
console.log( elem.gameid ) //    
  
delete elem.gameid //    
  
 
 

attribute 와 property 가 쉽게 혼 합 된 이 유 는 많은 attribute 노드 에 대응 하 는 property 속성 이 있 기 때 문 입 니 다. 예 를 들 어 위의 div 요소 의 id 와 class 는 attribute 이자 대응 하 는 property 도 있 습 니 다. 어떤 방법 을 사용 하 든 방문 하고 수정 할 수 있 습 니 다.

 
  
console.log( elem.getAttribute('id') ); // box 
  
console.log( elem.id ); // box 
  
elem.id = 'hello'; 
  
console.log( elem.getAttribute('id') ); // hello 
  
 
 

그러나 사용자 정의 attribute 노드 나 사용자 정의 property 에 대해 서 는 상관 이 없습니다.

 
  
console.log( elem.getAttribute('gameid') ); // 880 
  
console.log( elem.gameid ); // undefined 
  
elem.areaid = '900'; 
  
console.log( elem.getAttribute('areaid') ) // null 
  
 
 

IE6 - 7 의 경우 attribute 와 property 를 구분 하지 않 았 습 니 다.

 
  
console.log( elem.getAttribute('gameid') ); // 880 
  
console.log( elem.gameid ); // 880 
  
elem.areaid = '900'; 
  
console.log( elem.getAttribute('areaid') ) // 900 
  
 
 

많은 초보 친구 들 이 이 구덩이 에 쉽게 빠 질 것 이다.DOM 요 소 는 기본 적 으로 흔히 볼 수 있 는 attribute 노드 에 대응 하 는 property 속성 이 있 습 니 다. 비교적 특수 한 것 은 Boolean 형식의 property 입 니 다. 예 를 들 어 폼 요소 와 같 습 니 다.

 
  
 
  
var radio = document.getElementById( 'radio' ); 
  
console.log( radio.getAttribute('checked') ); // checked 
  
console.log( radio.checked ); // true 
  
 
 

이러한 특수 한 attribute 노드 에 대해 서 는 이 노드 만 존재 하고 해당 하 는 property 의 값 은 true 입 니 다. 예 를 들 어:

 
  
 
  
var radio = document.getElementById( 'radio' ); 
  
console.log( radio.getAttribute('checked') ); // anything 
  
console.log( radio.checked ); // true 
  
 
 

마지막 으로 attribute 와 property 를 잘 구분 하기 위해 attribute 노드 는 모두 HTML 코드 에서 볼 수 있 고 property 는 일반적인 이름 값 대 속성 이 라 고 요약 할 수 있 습 니 다.

 
  
// gameid id  attribute   
  
// id       property       
  
hello
 
  
// areaid   property 
  
elem.areaid = 900;