JavaScript_기본 지식에서 속성과 속성의 차이점을 자세히 소개합니다.

1. 정의

속성: 속성. 모든 HTML 요소는 HTMLElement 유형으로 표현됩니다. HTMLElement 유형은 Element에서 직접 상속되며 일부 속성을 추가합니다. 이러한 추가된 속성은 각 HTML 요소의 5가지 표준 특성에 해당합니다. 디렉토리, 클래스명. DOM 노드는 객체이므로 다른 JavaScript 객체와 마찬가지로 사용자 정의 속성과 메서드를 추가할 수 있습니다. 속성 값은 모든 데이터 유형일 수 있으며 대소문자를 구분합니다. 사용자 정의 속성은 HTML 코드에는 표시되지 않고 js에만 존재합니다.

속성: 속성과 다른 속성은 문자열만 가능하고 대소문자를 구분하지 않으며 innerHTML에 표시되며 모든 속성은 클래스 배열 속성을 통해 나열될 수 있습니다.

2. 유사점

표준 DOM 속성과 속성이 동기화됩니다. 인식된(사용자 정의가 아닌) 속성은 속성의 형태로 DOM 객체에 추가됩니다. 예를 들어 id, align, style 등이다. 이때 속성을 조작하거나 getAttribute() 등의 조작특성의 DOM 메소드를 이용하여 속성을 조작할 수 있다. 그러나 getAttribute()에 전달된 속성 이름은 실제 속성 이름과 동일합니다. 따라서 클래스의 속성 값을 얻을 때 "class"를 전달해야 합니다.

3. 차이점

1) 일부 표준 기능 연산의 경우 getAttribute와 점(.)으로 얻은 값에 차이가 있습니다. href, src, value, style, onclick 및 기타 이벤트 핸들러 등.
2).href: getAttribute는 href의 실제 값을 가져오는 반면 점은 전체 URL을 가져오므로 브라우저에 차이가 있습니다.

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

      var a = document.body.children[0]
a.href = '/'
Alert( '속성:' a.getAttribute('href') ) // '/'
Alert( 'property:' a.href ) // IE: '/', 기타: 전체 URL

src 값을 가져오는 것은 href와 유사하지만 IE는 전체 URL도 반환합니다.
이 값에는 '단방향' 동기화를 위한 몇 가지 기본 제공 속성도 있습니다.
예를 들어, input.value는 속성에서 동기화됩니다(즉, 속성은 속성에서 동기화됩니다)

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

      var 입력 = document.body.children[0];
​​​​ input.setAttribute('value', 'new');
경고(입력.값); // '새 항목', 입력값이 변경됨
경고( input.getAtrribute(value) ); // '새'

그러나 다음 속성에서는 속성을 동기화할 수 없습니다.

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

        var 입력 = document.body.children[0];
​​​​ input.value = '새';
Alert(input.getAttribute('value')); // '마크업', 변경되지 않았습니다!

getAttribute는 초기 값을 가져오고, 점은 초기 값 또는 .value의 수정된 값을 가져옵니다. 예를 들어 방문자가 특정 문자를 입력하면 'value' 속성은 속성이 업데이트된 후에도 원래 값을 유지합니다. 원래 값을 사용하여 입력이 변경되었는지 확인하거나 재설정할 수 있습니다.

style 및 onclick과 같은 이벤트 핸들러의 경우 getAttribute 메소드는 액세스 시 문자열을 반환하고 점은 해당 개체 및 이벤트 처리 함수를 반환합니다.

입력 시 체크된 속성의 경우

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

var 입력 = document.body.children[0]
경고( input.checked ) // true
Alert( input.getAttribute('checked') ) // 빈 문자열

getAttribute는 실제로 설정한 값을 가져옵니다. 점은 부울 값을 반환합니다.

브라우저 호환성의 차이

1. IE 2. IE

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

document.body.abba = 1 // 속성 할당(이제 getAttribute로 읽을 수 있음)
document.body.ABBA = 5 // 다른 케이스로 속성 할당
// 대소문자를 구분하지 않고 'ABba'라는 속성을 가져와야 합니다.
경고( document.body.getAttribute('ABba') ) // 1

부동산 선호

실제 애플리케이션에서 DOM 작업의 98%는 속성을 사용합니다.
속성을 사용해야 하는 상황은 두 가지뿐입니다

1. HTML 속성은 DOM 속성과 동기화되지 않으므로 맞춤설정하세요.
2. 속성에서 동기화할 수 없는 내장 HTML 속성에 액세스합니다. 예를 들어 INPUT 태그의 값입니다.