[javascript] HTML에서 속성과 속성의 차이점은 무엇입니까?

JAVASCRIPT / 글쓴이

jQuery 1.6.1에서 변경된 후에 HTML에서 속성과 속성의 차이점을 정의하려고했습니다.

jQuery 1.6.1 릴리스 노트 (하단 근처) 의 목록을 보면 HTML 속성 및 속성을 다음과 같이 분류 할 수 있습니다.

  • 속성 : 부울 값이 있거나 selectedIndex와 같이 UA 계산 된 모든 항목입니다.

  • 속성 : 부울이 아니거나 UA 생성 값을 포함하지 않는 HTML 요소에 추가 할 수있는 ‘속성’

생각?

답변

HTML 소스 코드를 작성할 때 HTML 요소에 속성 을 정의 할 수 있습니다 . 그런 다음 브라우저가 코드를 구문 분석하면 해당 DOM 노드가 작성됩니다. 이 노드는 객체이므로 properties 가 있습니다 .

예를 들어이 HTML 요소는 다음과 같습니다.

<input type="text" value="Name:">

2 개의 속성 ( type및 value)이 있습니다.

브라우저가이 코드를 구문 분석하면 HTMLInputElement 객체가 생성 되고이 객체에는 accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight 등

주어진 DOM 노드 객체의 경우 attributes속성은 해당 객체 의 속성이며 속성은 해당 객체 의 속성 요소입니다 .

주어진 HTML 요소에 대해 DOM 노드가 작성 될 때, 많은 특성은 이름이 같거나 유사한 속성과 관련이 있지만 일대일 관계는 아닙니다. 예를 들어이 HTML 요소의 경우 :

<input id="the-input" type="text" value="Name:">

해당 DOM 노드는 것 id, type그리고 value(다른 사람의 사이에서) 속성 :

  • 이 id속성은 속성에 대한 반영된 속성 입니다. id속성을 가져 오면 속성 값을 읽고 속성을 설정하면 속성 값이 작성됩니다. idA는 순수 반영 속성은, 그것을 수정하거나 값을 제한하지 않습니다.

  • 이 type속성은 속성에 대한 반영된 속성 입니다. type속성을 가져 오면 속성 값을 읽고 속성을 설정하면 속성 값이 작성됩니다. 알려진 값 (예 : 유효한 입력 유형)으로 type제한되기 때문에 순수한 반영 속성이 아닙니다 . 당신이 있다면 , 그때 당신을 제공 하지만, 당신을 제공합니다 .<input type="foo">theInput.getAttribute("type")"foo"theInput.type"text"

  • 반대로 value속성에는 속성이 반영되지 않습니다 value. 대신 입력 의 현재 값 입니다. 사용자가 입력 상자의 값을 수동으로 변경하면 value속성에이 변경 사항이 반영됩니다. 따라서 사용자 "John"가 입력 상자에 입력하면 다음이 수행됩니다.

    theInput.value // returns "John"

    이므로:

    theInput.getAttribute('value') // returns "Name:"

    이 value속성 은 입력 상자 내의 현재 텍스트 내용을 반영하는 반면, value속성에는 HTML 소스 코드 의 속성에 대한 초기 텍스트 내용이 포함 value됩니다.

    따라서 현재 텍스트 상자 안에 무엇이 있는지 알고 싶다면 속성을 읽으십시오. 그러나 텍스트 상자의 초기 값이 무엇인지 알고 싶다면 속성을 읽으십시오. 또는 당신은 사용할 수 있습니다defaultValue 속성을 그대로value .

    theInput.value                 // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue          // returns "Name:"

직접 속성을 (반영하는 몇 가지 속성이있다 rel, id), 일부는 약간-다른 이름과 직접 반사 (이다 htmlFor반영하며 for속성을 className반영하며 class속성)을 자신의 속성을 반영하지만 많은 제약 / 수정 (와 src, href, disabled, multiple), 등 의 위에. 사양 은 다양한 종류의 반사를 다룹니다.

답변

Sime Vidas 의 답변을 읽은 후 , 나는 더 많은 것을 찾고 각 문서 에서 매우 간단하고 이해하기 쉬운 설명을 발견했습니다 .

HTML 속성과 DOM 속성

속성은 HTML로 정의됩니다. 속성은 DOM (Document Object Model)에 의해 정의됩니다.

  • 일부 HTML 속성에는 속성에 대한 1 : 1 매핑이 있습니다. id하나의 예입니다.

  • 일부 HTML 속성에는 해당 속성이 없습니다. colspan하나의 예입니다.

  • 일부 DOM 속성에는 해당 속성이 없습니다. textContent
    하나의 예입니다.

  • 많은 HTML 속성이 속성에 매핑되는 것처럼 보이지만 생각과는 다릅니다!

이 일반적인 규칙을 파악할 때까지 마지막 범주는 혼동됩니다.

속성 초기화 DOM 한 다음 완료됩니다. 속성 값은 변경 될 수 있습니다. 속성 값은 할 수 없습니다.

예를 들어 브라우저가 렌더링 될 때 <input type="text" value="Bob"> 하면 value속성이 “Bob”으로 초기화 된 해당 DOM 노드가 작성 됩니다.

사용자가 입력 상자에 “Sally”를 입력하면 DOM 요소 value
특성 이 “Sally”가됩니다. 그러나 HTML value 속성 입력 속성에 해당 속성에 대해 묻는 경우 은 변경되지 않습니다.input.getAttribute('value') . “Bob”을 반환합니다.

HTML 속성 value은 초기 값을 지정합니다 . DOM value
속성은 현재 값입니다.

이 disabled속성은 또 다른 독특한 예입니다. 버튼의
disabled속성은 false기본적으로 버튼이 활성화되어 있습니다. disabled속성 을 추가하면 해당 속성만으로 버튼의 disabled속성이 초기화 됩니다.true 되어 버튼이 비활성화됩니다.

disabled속성을 추가 및 제거 하면 버튼이 비활성화되고 활성화됩니다. 속성 값이 중요하지 않으므로 글을 작성하여 버튼을 사용할 수 없습니다<button disabled="false">Still
Disabled</button>.

버튼의 disabled 속성을 설정하면 버튼이 비활성화되거나 활성화됩니다. 재산 의 가치가 중요합니다.

HTML 속성과 DOM 속성은 이름이 같더라도 동일하지 않습니다.

답변

대답은 이미 속성과 속성이 다르게 처리되는 방법을 설명하지만 실제로 이것이 얼마나 미친 지 지적하고 싶습니다 . 사양이 어느 정도라도.

일부 속성 (예 : id, class, foo, bar )이 DOM에 한 가지 종류의 값만 유지하고 일부 속성 (예 : checked, selected )이 두 값을 유지하는 것은 미친 일 입니다 . 즉, “로드되었을 때”값과 “동적 상태”값입니다. (DOM은 문서 의 상태를 완전히 나타내는 것이 아닙니까?)

텍스트 와 확인란 과 같은 두 개의 입력 필드가 동일한 방식으로 작동하는 것이 절대적으로 중요 합니다 . 텍스트 입력 필드에 별도의 “로드 될 때”값과 “현재 동적”값이 유지되지 않는 이유는 무엇입니까? 확인란에 checked 속성에 대해 두 개의 값 이 있으면 class 및 id 속성에 대해 두 개의 값 이없는 이유는 무엇입니까? text * input * 필드 의 값을 변경하고 DOM (예 : “직렬화 된 표현”)이 변경 될 것으로 예상하고이 변경 사항을 반영하는 경우 지구상의 입력 필드 에서 동일한 값을 기대하지 않는 이유는 무엇입니까? 유형 체크 박스 확인 된 속성에?

“부울 속성입니다”의 차별화는 나에게 의미가 없거나 적어도 이것에 대한 충분한 이유가 아닙니다.

답변

잘 이것들은 w3c에 의해 지정되며 속성은 무엇이며 속성은 무엇입니까
http://www.w3.org/TR/SVGTiny12/attributeTable.html

그러나 현재 attr과 prop은 그렇게 다르지 않으며 거의 ​​동일합니다.

그러나 그들은 어떤 것들에 대한 소품을 선호합니다

선호하는 사용법 요약

부울 속성 / 속성 및 html에없는 속성 (예 : window.location)에는 .prop () 메서드를 사용해야합니다. 다른 모든 속성 (html에서 볼 수있는 속성)은 .attr () 메서드를 사용하여 계속 조작 할 수 있으며 계속해야합니다.

글쎄 실제로 attr 또는 prop 또는 둘 다 사용하는 경우 무언가를 변경할 필요가 없습니다.하지만 두 가지 모두 작동하지만 소품이 작동하지 않는 곳에서 내 응용 프로그램을 보았습니다. 그래서 1.6 응용 프로그램 소품을 가져 왔습니다 =)

답변

차이점 HTML 속성 및 속성 :

HTML의 차이점을 평가하기 전에 먼저이 단어의 정의를 살펴 보겠습니다.

영어 정의 :

  • 속성은 객체의 추가 정보를 나타냅니다.
  • 속성은 객체의 특성을 설명합니다.

HTML 컨텍스트에서 :

브라우저가 HTML을 구문 분석 할 때 기본적으로 HTML의 메모리 표시로 트리 데이터 구조를 작성합니다. 트리 데이터 구조에는 HTML 요소 및 텍스트 인 노드가 포함됩니다. 속성과 속성은 다음과 같은 방식으로 관련됩니다.

  • 속성 은 특정 DOM 속성 을 초기화 하기 위해 HTML에 넣을 수있는 추가 정보입니다
    .
  • 브라우저가 HTML을 구문 분석하고 DOM을 생성 할 때 특성 이 형성됩니다. DOM의 각 요소에는 브라우저에서 설정 한 고유 한 속성 세트가 있습니다. 이러한 속성 중 일부는 HTML 속성으로 설정된 초기 값을 가질 수 있습니다. 렌더링 된 페이지에 영향을 미치는 DOM 속성이 변경 될 때마다 페이지가 즉시 다시 렌더링됩니다.

또한 이러한 속성의 매핑이 1 대 1이 아님을 인식하는 것이 중요합니다. 즉, HTML 요소에 제공하는 모든 속성이 유사한 명명 된 DOM 속성을 갖지는 않습니다.

또한 다른 DOM 요소마다 다른 속성이 있습니다. 예를 들어, <input>요소에는 속성에없는 값 속성이 <div>있습니다.

예:

다음 HTML 문서를 보자.

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  <!-- charset is a attribute -->
  <meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
  <title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>

그런 다음 <div>JS 콘솔에서을 검사합니다 .

 console.dir(document.getElementById('foo'));

다음과 같은 DOM 속성이 표시됩니다 (크롬 devtools, 모든 속성이 표시되지는 않음).

html 속성 및 속성

  • HTML의 속성 ID는 이제 DOM의 id 속성이기도합니다. ID는 HTML에 의해 초기화되었습니다 (우리가 자바 스크립트로 변경할 수는 있지만).
  • HTML의 클래스 속성에 해당하는 클래스 속성이 없습니다 ( classJS에서는 키워드 예약 됨). 그러나 실제로 2 개의 속성 classList및 className.

답변