브라우저는 웹페이지를 만나면 HTML을 파싱하여 DOM트리를 위한 객체들을 생성한다.
파싱될때 태그에 있는 표준 HTML속성(attribute)들이 DOM객체의 프로퍼티(property)가 된다.
태그 < body id="page" >가 있을 때, DOM객체는 body.id="page"와 같은 프로퍼티를 갖는다.
하지만 속성-프로퍼티가 항상 일대일로 매핑되지는 않는다. 두 가지가 언제 일대일로 매핑되는지, 매핑되지 않는지에 알아보자.
DOM객체는 내장 자바스크립트 클래스의 인스턴스임을 유의하자.
document.body.myData = {
name: 'Caesar',
title: 'Imperator'
};
alert(document.body.myData.title); // Imperator
document.body.sayTagName = function() {
alert(this.tagName);
};
document.body.sayTagName();document.body는 DOM객체이고 자바스크립트 객체이므로 스크립트로 원하는 프로퍼티를 만들고 접근할 수 있다.
Element.prototype.sayHi = function() {
alert(`Hello, I'm ${this.tagName}`);
};
document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODYprototype객체에 메소드를 추가하면 인스턴스들이 사용하는것도 당연하다.
자바스크립트이므로 대소문자를 구별한다.
HTML속성
브라우저가 HTML코드를 파싱할때 태그의 표준속성만 DOM객체의 프로퍼티로 추가한다고 했다.
자바스크립트로 태그속성에 접근하려면 아래 프로퍼티를 사용해야 하며 표준속성, 비표준속성 모두 접근이 가능하다.
elem.hasAttribute(name) – 속성 존재 여부 확인
elem.getAttribute(name) – 속성값을 가져옴
elem.setAttribute(name, value) – 속성값을 변경함
elem.removeAttribute(name) – 속성값을 지움
elem.attributes - 모든 속성값들 컬렉션
<body something="non-standard">
<script>
alert(document.body.getAttribute('something')); // 비표준 속성에 접근
</script>
</body>대·소문자를 가리지 않는다. id와 ID는 동일
값은 항상 문자열이다.
<body>
<div id="elem" about="Elephant"></div>
<script>
alert( elem.getAttribute('About') ); // (1) 'Elephant', 속성 읽기
elem.setAttribute('Test', 123); // (2) 속성 추가하기
alert( elem.outerHTML ); // (3) 추가된 속성 확인하기
for (let attr of elem.attributes) { // (4) 속성 전체 나열하기
alert( `${attr.name} = ${attr.value}` );
}
</script>
</body>HTML속성이 객체프로퍼티와 다른점을 이해하자.
