HTML 속성과 속성의 차이점은 무엇입니까?

HTML 속성과 속성의 차이점은 무엇입니까?

jQuery 1.6.1에서 변경된 후 HTML에서 속성과 속성의 차이를 정의하려고 합니다.

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

• 속성:모두 부울 값이 있거나 UA가 계산되어 있습니다(선택됨).색인.

• 속성: UA 생성 값을 포함하거나 부울이 아닌 HTML 요소에 추가할 수 있는 '속성'입니다.

생각?

HTML 소스 코드를 작성할 때 HTML 요소에 속성을 정의할 수 있습니다.그런 다음 브라우저가 코드를 해석하면 대응하는 DOM 노드가 생성됩니다.이 노드는 개체이므로 속성을 가집니다.

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

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

어트리뷰트(Attribut)가 .type ★★★★★★★★★★★★★★★★★」value를 참조해 주세요.

브라우저가 이 코드를 해석하면 HTMLInputElement 객체가 생성되고 이 객체에는 accept, accessKey, alt, attributes, autofocus, baseURI, childElementCount, childElementCount, childNodes, child, classList, className, client 등의 수십 가지 속성이 포함됩니다.높이 등

객체에 대해 객체의 은 "DOM"의 입니다.attributes해당 객체의 속성입니다.

특정 HTML 요소에 대해 DOM 노드가 생성되면 해당 노드의 속성 중 대부분은 이름이 같거나 유사한 속성과 관련되지만 일대일 관계는 아닙니다.예를 들어, 이 HTML 요소의 경우:

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

에는 「DOM」이 있습니다.id ,type , , , , 입니다.value성다다다다 （ 다른른른른 ） : ）

• id속성은 의 반영 속성입니다.id: 을 가져오면 속성을 값이 됩니다.속성을 가져오면 속성 값이 읽히고 속성을 설정하면 속성 값이 기록됩니다. id순수 반사 특성으로 값을 수정하거나 제한하지 않습니다.

• 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속성은 입력 상자 내의 현재 텍스트 내용을 반영하는 반면,valueAtribute에는 첫 번째 텍스트 내용이 포함되어 있습니다.value속성을 지정합니다.

  따라서 현재 텍스트 상자 안에 무엇이 있는지 알고 싶다면 속성을 읽어 보십시오.그러나 텍스트 상자의 초기 값을 알고 싶다면 속성을 읽어 보십시오. '아까보다'를 .defaultValue,, property property property 、 것 property 、 property property property property 。value★★★★

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

을 직접 이 몇 .rel,id 다른 가진 직접 .htmlFor for 아트리뷰트,className classattributeAtribute()는 제한변경(Atribute)이 .src,href,disabled,multiple등입니다.스펙은 다양한 종류의 반사를 다루고 있습니다.

Sime Vidas의 답변을 읽은 후, 나는 더 많이 검색했고, 각진 문서에서 매우 직설적이고 이해하기 쉬운 설명을 발견했다.

HTML Atribute의 비교DOM 속성

-------------------------------------

---

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

• HTML 1:1로 설정하다 id예를 들어 보겠습니다.

• HTML 을 사용합니다. colspan예를 들어 보겠습니다.

• 【DOM】【DOM】【DOM】【DOM】【DOM】【DOM】【DIM】 textContent예를 들어 보겠습니다.

• 많은 HTML 속성이 속성에 매핑되는 것처럼 보이지만... 생각하시는 것처럼는 그렇지 않습니다!

이 마지막 카테고리는 이 일반적인 규칙을 이해할 때까지 혼란스럽습니다.

속성은 DOM 속성을 초기화한 후 수행됩니다.속성 값은 변경할 수 있지만 속성 값은 변경할 수 없습니다.

들어 가 " " "를 렌더링하는 <input type="text" value="Bob">、 「 DOM 」으로 됩니다.value밥

입력 「Sally하면, 요소 「Sally」가 「Sally」로 됩니다.value 속성이 "샐리"가 됩니다.하지만 HTML은value Atribute에 대해 입력 요소에 문의하면 Atribute는 변경되지 않습니다.input.getAttribute('value')밥

어트리뷰트 HTML "value초기값을 지정합니다.DOM 。valueproperty는 현재 값입니다.

---

disabled입니다.의 ★★★★disabled은 「」입니다.false디폴트에서는, 버튼이 유효하게 되어 있습니다.「 」를 disabledAtribute가 됩니다.disabled을 property property로 설정합니다.true버튼을 사용할 수 없습니다.

" " 추가 및 disabled 활성화합니다.가 없기 에, 「Atribute의 값」이라고 써 , 하게 할 수.<button disabled="false">Still Disabled</button>.

의 「 」disabled property는 버튼을 비활성화 또는 활성화합니다.재산의 가치는 중요하다.

HTML 속성과 DOM 속성은 이름이 같은 경우에도 동일하지 않습니다.

답변은 이미 속성과 속성이 어떻게 다르게 처리되는지를 설명하고 있지만, 저는 이것이 얼마나 미친 짓인지 지적하고 싶습니다.어느 정도 사양이라도.

일부 속성(예: id, class, foo, bar)은 DOM에 한 가지 값만 유지하는 반면, 일부 속성(예: 선택, 선택)은 두 가지 값, 즉 "로드되었을 때" 값과 "동적 상태"의 값이 문서의 전체 범위를 나타내는 것은 아닙니다.?)

텍스트와 확인란과 같은 두 개의 입력 필드가 동일한 방식으로 동작하는 것이 절대적으로 중요합니다.텍스트 입력 필드에 "로드되었을 때" 값과 "현재 동적" 값이 별도로 유지되지 않는 경우 이 확인란이 표시되는 이유는 무엇입니까?체크박스에 체크된 Atribute에 2개의 값이 있는 경우 클래스 Atribute와 ID Atribute에 2개의 값이 없는 이유는 무엇입니까?텍스트 *input* 필드의 값을 변경하고 DOM(즉, "시리얼화된 표현")이 변경되어 이 변경이 반영될 것으로 예상될 경우, 도대체 왜 체크된 속성의 입력 필드 유형 체크박스에서 동일한 값을 예상하지 않습니까?

"그것은 부울 속성"이라는 차별화는 나에게 전혀 의미가 없거나 적어도 이에 대한 충분한 이유가 되지 않습니다.

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 내의 속성 ID도 DOM 내의 id 속성임을 알 수 있습니다.id는 HTML에 의해 초기화되었습니다(javascript로 변경할 수 있습니다).
• 내의 에는 대응하는 클래스 속성HTML 의 경우)이 없습니다.class는 JS입니다.는 두 속성, 즉 '성'이 있습니다.classList ★★★★★★★★★★★★★★★★★」className.

이것들은 w3c에 의해 무엇이 Atribut이고 무엇이 속성인지 지정됩니다.http://www.w3.org/TR/SVGTiny12/attributeTable.html

하지만 현재 attr와 prople은 크게 다르지 않고 거의 같다.

하지만 그들은 어떤 것들을 위해 소품을 선호한다.

바람직한 사용 방법의 개요

.prop() 메서드는 부울 속성/속성 및 html에 존재하지 않는 속성(window.location 등)에 사용해야 합니다.다른 모든 속성(html에서 볼 수 있는 속성)은 .attr() 메서드로 계속 조작할 수 있습니다.

attr, prop, 또는 둘 다 사용하면 실제로 무언가를 변경할 필요가 없습니다.하지만 제 어플리케이션에서는 atrr이 동작하지 않는 소품도 동작하는 것을 보고 1.6 앱 소품 =)

https://angular.io/guide/binding-syntax에서 인용한 답변을 갱신합니다.

HTML 속성 및 DOM 속성

속성은 DOM 속성을 초기화하고 요소의 동작을 수정하도록 구성할 수 있지만 속성은 DOM 노드의 기능입니다.

• 일부 HTML 속성은 속성에 대한 1:1 매핑(예: id)을 가집니다.

• 일부 HTML 속성에는 대응하는 속성이 없습니다(예: aria-*).

• 일부 DOM 속성에는 textContent와 같은 해당 속성이 없습니다.

HTML 속성과 DOM 속성은 이름이 같은 경우에도 서로 다르다는 점에 유의하십시오.

예 1: 브라우저는 렌더링을 할 때 값 속성을 가진 대응하는 DOM 노드를 만들고 해당 값을 "Sarah"로 초기화합니다.

<input type="text" value="Sarah">

사용자가 Sally를 입력하면 DOM 요소의 값 속성이 Sally가 됩니다.그러나 input.getAttribute('value')를 사용하여 HTML 속성값을 보면 속성이 변경되지 않고 "Sarah"가 반환되는 것을 알 수 있습니다.

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

예 2: 비활성화 버튼 A 버튼의 비활성화 속성은 기본적으로 false이므로 버튼이 활성화됩니다.

사용 불가능 속성을 추가하면 단추의 사용 불가능 속성을 true로 초기화하여 단추를 사용할 수 없게 됩니다.

<button disabled>Test Button</button>

디세이블 애트리뷰트를 추가 및 삭제하면 버튼이 디세이블 및 이니블이 됩니다.단, Atribute의 값은 관계가 없기 때문에 Still Disabled로 입력하여 버튼을 활성화할 수 없습니다.

버튼의 상태를 제어하려면 비활성화된 속성을 대신 설정하십시오.

속성 및 속성 비교 기술적으로 [attr.disabled]속성 바인딩을 설정할 수 있지만 속성 바인딩은 부울 값이어야 하며 대응하는 속성 바인딩은 값이 늘인지 여부에 따라 달라집니다.다음 사항을 고려하십시오.

<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">

디세이블 속성을 사용하는 첫 번째 행은 부울 값을 사용합니다.두 번째 행은 디세이블 Atribute를 사용하여 늘을 확인합니다.

일반적으로 부울 값은 읽기 쉽고 구문은 짧고 속성은 성능이 우수하므로 속성 바인딩보다 속성 바인딩을 사용합니다.

언급URL : https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html