JavaScript_기본 지식의 속성과 속성의 차이점에 대한 자세한 설명

DOM 요소의 속성과 속성은 서로 혼동되기 쉽고 명확하게 구분할 수 없지만 서로 밀접하게 관련되어 있습니다. 과거의 저를 비롯해 많은 초보 친구들이 헷갈리는 경우가 많습니다.

속성은 중국어로 "특성"으로 번역되고, 재산은 중국어로 "속성"으로 번역되는데, 실제로 속성에 대해 먼저 이야기해 보겠습니다.

속성은 속성 노드입니다. 각 DOM 요소에는 모든 속성 노드를 저장하는 해당 속성이 있습니다. 정확히 말하면 NameNodeMap입니다. 컨테이너와 비슷하지만 배열과 동일한 컨테이너는 아닙니다. 속성의 각 숫자 인덱스는 이름-값 쌍(이름="값") 형식으로 속성 노드를 저장합니다.

코드 복사 코드는 다음과 같습니다.

hello

위 div 요소의 HTML 코드에는 클래스, ID 및 사용자 정의 gameid가 포함되어 있습니다. 이러한 특성은 다음 형식과 유사한 속성에 저장됩니다.

코드 복사 코드는 다음과 같습니다.

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

다음과 같이 속성 노드에 액세스할 수 있습니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

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

그러나 IE6-7은 속성에 많은 것을 저장하며 위의 액세스 방법은 표준 브라우저와 다른 결과를 반환합니다. 일반적으로 속성 노드를 얻으려면 getAttribute 메소드를 직접 사용하십시오.

코드 복사 코드는 다음과 같습니다.

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

속성 노드를 설정하려면 setAttribute 메소드를 사용하고, 삭제하려면 RemoveAttribute를 사용하세요.

코드 복사 코드는 다음과 같습니다.

elem.setAttribute('testAttr', 'testVal') ;
console.log( elem.removeAttribute('gameid') ) // 정의되지 않음

속성 노드가 추가되거나 삭제되면 속성이 동적으로 업데이트됩니다.
속성은 속성입니다. DOM 요소가 일반 Object 개체로 간주되면 속성은 이름-값 쌍(name="value") 형식으로 개체에 저장된 속성입니다. 일반 개체와 다르지 않고 속성 추가 및 삭제가 훨씬 쉽습니다.

코드 복사 코드는 다음과 같습니다.

elem.gameid = 880; //
console.log( elem.gameid ) 추가 //
delete elem.gameid // 삭제

속성과 속성이 쉽게 혼동되는 이유는 많은 속성 노드에도 해당 속성 속성이 있기 때문입니다. 예를 들어 위 div 요소의 id와 class는 어느 것을 사용하더라도 속성이자 해당 속성입니다. . 메소드에 액세스하고 수정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

console.log( elem.getAttribute(' id') ); // box
console.log( elem.id ); // box
elem.id = 'hello';
console.log( elem.getAttribute('id') ) ; // 안녕하세요

그러나 사용자 정의 속성 노드 또는 사용자 정의 속성의 경우 둘은 서로 관련이 없습니다.

코드 복사 코드는 다음과 같습니다.

console.log( elem.getAttribute(' gameid') ); // 880
console.log( elem.gameid ); // 정의되지 않음
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 널

IE6-7의 경우 속성과 속성의 구분이 없습니다.

코드 복사 코드는 다음과 같습니다.

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

많은 초보 친구들이 이 구렁텅이에 쉽게 빠질 수 있습니다.
DOM 요소의 일부 기본 공통 속성 노드에는 해당 속성 속성이 있습니다. 더 특별한 점은 일부 양식 요소와 같이 값이 부울 유형인 일부 속성입니다.

코드 복사 코드는 다음과 같습니다.

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

이러한 특수 속성 노드의 경우 노드가 존재하는 한 해당 속성의 값은 다음과 같이 true입니다.

코드 복사코드는 다음과 같습니다.

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

마지막으로 속성과 속성을 더 잘 구분하기 위해 기본적으로 속성 노드는 HTML 코드에 표시되는 반면 속성은 일반적인 이름-값 쌍 속성일 뿐이라고 요약할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

// gameid와 id는 모두 속성 노드입니다.
//id는 속성을 통해 접근하고 수정할 수도 있습니다

hello

//areaid는 단지 속성입니다
elem.areaid = 900;