DOM 요소의 속성과 속성은 함께 혼합하기 쉽고 구별 할 수 없습니다. 두 사람은 다른 것이지만 둘은 밀접하게 관련되어 있습니다. 과거에 저를 포함한 많은 새로운 친구들은 종종 그것을 이해하지 못합니다.
속성은 중국어 "특성"이라는 용어로 변환되며 속성은 중국어 용어 "속성"으로 변환됩니다. 중국어의 문자 적 의미에서 실제로 약간의 차이가 있습니다. 먼저 속성에 대해 이야기합시다.
속성은 기능 노드입니다. 각 DOM 요소에는 모든 속성 노드를 저장하는 해당 속성 속성 속성이 있습니다. 속성은 배열 클래스의 컨테이너입니다. 정확히 말하면, 그것은 namenodemap입니다. 요컨대, 배열과 비슷한 컨테이너이지만 배열과는 다릅니다. 속성의 각 숫자 인덱스는 이름-값 쌍 (name =”value”)의 형태로 속성 노드를 저장합니다.
다음과 같이 코드를 복사하십시오. <div id = "box"gameid = "880"> hello </div>
위의 DIV 요소의 HTML 코드에는 클래스, ID 및 사용자 정의 GameId가 포함됩니다. 이러한 기능은 다음 형식과 유사한 속성으로 저장됩니다.
다음과 같이 코드를 복사하십시오. [, id = "box", gameid = "880"]
다음과 같은 속성 노드에 액세스 할 수 있습니다.
코드 사본은 다음과 같습니다.
var elem = document.getElementById ( 'box');
console.log (elem.attributes [0] .name); // 수업
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 요소가 일반 객체 객체로 간주되는 경우 속성은 이름-값 쌍 (name =”value”)의 형태로 객체에 저장된 속성입니다. 속성을 추가하고 삭제하는 것이 훨씬 쉽고 일반 객체와 다르지 않습니다.
코드 사본은 다음과 같습니다.
elem.gameid = 880; // 추가하다
Console.log (elem.gameid) // get
elem.gameid // 삭제 삭제
속성과 속성을 쉽게 혼합하기 쉬운 이유는 많은 속성 노드가 위의 DIV 요소의 ID 및 클래스와 같은 해당 속성 속성을 가지고 있기 때문입니다.
코드 사본은 다음과 같습니다.
console.log (elem.getAttribute ( 'id')); // 상자
Console.log (elem.id); // 상자
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 ( 'atreatId')) // null
IE6-7의 경우 속성과 속성 사이에는 차이가 없습니다.
코드 사본은 다음과 같습니다.
console.log (elem.getAttribute ( 'gameId')); // 880
Console.log (elem.gameid); // 880
elem.areaid = '900';
console.log (elem.getAttribute ( 'atreatId')) // 900
많은 초보자가 아마도이 구덩이에 쉽게 떨어질 것입니다.
DOM 요소의 일부 일반적인 속성 노드에는 해당 속성 속성이 있습니다. 더 특별한 것은 일부 양식 요소와 같은 부울 유형의 값을 가진 일부 속성입니다.
코드 사본은 다음과 같습니다.
<입력 유형 = "Radio"Checked = "Checked"id = "Raido">
var radio = document.getElementById ( 'Radio');
Console.log (Radio.GetAttribute ( 'Checked')); // 확인
Console.log (Radio.Checked); // 진실
이러한 특수 속성 노드의 경우이 노드가 존재하는 경우에만 해당 속성 값이 다음과 같이 참입니다.
코드 사본은 다음과 같습니다.
<input type = "radio"cheecked = "ally"id = "raido">
var radio = document.getElementById ( 'Radio');
Console.log (Radio.GetAttribute ( 'Checked')); // 아무것
Console.log (Radio.Checked); // 진실
마지막으로, 속성과 속성을 더 잘 구별하기 위해서는 기본적으로 속성 노드가 HTML 코드에서 볼 수 있으며 속성은 일반 이름 값 쌍 속성 일뿐입니다.
코드 사본은 다음과 같습니다.
// gameId와 id는 속성 노드입니다
// id에 액세스하고 속성을 통해 수정할 수 있습니다.
<div gameid = "880"id = "box"> hello </div>
// AreaID는 단지 속성입니다
elem.areaid = 900;