본문 바로가기

javascript

[HTML] HTML Attribute와 javascript Property


이전 포스팅인 [HTML] HTML Attribute와 javascript Property 에서 HTML Attribute 와 javascript의 Property에 대해 좀더 제대로 정리를 하기위해 남깁니다.


우선 w3school 에서 얻을 수 있는 HTML Attribute에 대한 설명은 다음과 같습니다.

HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"

- attributes(속성) 는 elements(요소) 에 포함 되는 것
- element 에 대한 추가적인 정보를 제공한다
- attribute는 항상 시작tag 에 저장되어 있다.
- attribute는 name = "value" 의 형태로 나타난다.

JavaScript Properties
Properties are the values associated with a JavaScript object.
A JavaScript object is a collection of unordered properties.
Properties can usually be changed, added, and deleted, but some are read only.

property는 javascript object와 연관되어진 값들 입니다.
javascript object는 정렬되지 않은 property 의 콜렉션 입니다.
property는 바뀔 수 있고, 추가되고 지워질 수 있습니다. 단 어떤 것은 읽기만이 가능 합니다.

property는 코드를 보며 이해하는게 좀더 명확 할텐데요.
자바스크립트의 object는 다음과 같은 형태를 가지고 있습니다.

var foo = function() {
    this.name = "hello";
}

위의 코드에서 foo 는 javascript object 이며 name 이 property 가 됩니다.
즉, property는 javascript object 에서 key="value" 형태로 구성된 것들 입니다.

요약하자면, attribute는 html element의 정보를, property는 자바스크립트 object의 정보들을 가져온다고 이해하면 될 듯 합니다.


이제 jQuery의 .attr()과 .prop()의 차이를 더 명확히 알 수 있을 것 같습니다.
.attr()은 HTML element의 정보를 기술하는 것들(name, value, class 등등)의 값을 가져오는 것입니다.

.prop()는 설명이 길어지는데...
HTML element들은 DOM 으로 표현되어 집니다. 그리고 이 DOM 은 javascript 를 이용하여 핸들링이 가능합니다.
이는 하나의 DOM object를 javascript 에서 마치 javascript object로 취급이 가능하다는 이야기 입니다.
실제로 document.getElementById 메소드를 이용하여 가져온 DOM object를 typeof 연산자를 사용해 보면 "object"를 반환합니다.
그리고 위에서 보았듯이 이 object는 key="value" 형태를 띈 property들로 구성되어 집니다.
여기서 .prop() key의 값, value를 가져오는 것입니다.

요약하면 DOM object의 property 값을 가져온다고 할 수 있겠습니다.

다음은 이와 관련하여 추가적으로 이해하면 좋을 내용들에 대한 링크 입니다.

The DOM and JavaScript


ps. 잘못되거나 추가해야될 내용등에 대한 지적은 언제나 환영합니다.