[Javascript] 속성과 프로퍼티

DOM 프로퍼티

✔️ DOM 프로퍼티는 많지만 내장 프로퍼티만으로 충분하지 않은 경우 자신만의 프로퍼티를 만들어 사용할 수도 있다.

 

document.body.myData = {
    name: 'Caesar',
    title: 'Imperator'
}

console.log(document.body.myData.title); //Imperator

 

HTML 속성

✔️ 표준이 아닌 속성을 HTML에 넣을 수 있다.

✔️ 속성은 대,소문자를 구분하지 않는다.

✔️ 속성 값은 모두 문자열로 취급된다.

✔️ attributes 로 속성들을 모두 반환하고, nanem, value 프로퍼티로 속성 전체에 접근할 수 있다.

<div id="elem" about="Elephant"></div>

<script>
//속성 읽기(getAttribute)
console.log(elem.getAttribute('about')); //Elephant

//속성 추가
elem.setAttribute('Test', 123);

//추가된 속성 확인
console.log(elem.outerHTML); //<div id="elem" about="Elephant" test="123"></div>

//속성 전체 확인해보기
for(let attr of elem.attributes){
	console.log(`${attr.name}` = ${attr.value});
    //id = elem
    //about = Elephant
    //test = 123
}

</script>

 

비표준 속성, dataset

✔️ 사용자가 직접 지정한 데이터를 HTML 에 자바스크립트로 넘기고 싶은 경우

✔️ 자바스크립트를 사용해 조작할 HTML 요소를 표시하기 위해 사용할 수 있다.

✔️ 커스텀 속성을 사용하면 문제가 발생할 수 있다. 비표준 속성을 사용했는데 나중에 표준 속성으로 바뀔수도 있기 때문이다.

✔️ 이런 충돌 상황을 방지하기 위해 data-* 을 이용!!

📌 'data-' 로 시작하는 속성 전체는 개발자가 용도에 맞게 사용하도록 별도로 예약된다.

dataset 프로퍼티를 사용하면 이 속성에 접근할 수 있다.

ex) "data-about"인 속성이 있다면, elem.dataset.about을 사용해 그 값을 얻을 수 있다

 

비표준 속성 이용

<!-- 이름(name) 정보를 보여주는 div라고 표시 -->
<div show-info="name"></div>
<!-- 나이(age) 정보를 보여주는 div라고 표시 -->
<div show-info="age"></div>

<script>
  // 표시한 요소를 찾고, 그 자리에 원하는 정보를 보여주는 코드
  let user = {
    name: "Pete",
    age: 25
  };

  for(let div of document.querySelectorAll('[show-info]')) {
    // 원하는 정보를 필드 값에 입력해 줌
    let field = div.getAttribute('show-info');
    div.innerHTML = user[field]; // Pete가 'name'에, 25가 'age'에 삽입됨
  }
</script>

<style>
  /* 스타일이 커스텀 속성 'order-state'에 따라 변합니다. */
  .order[order-state="new"] {
    color: green;
  }

  .order[order-state="pending"] {
    color: blue;
  }

  .order[order-state="canceled"] {
    color: red;
  }
</style>

<div class="order" order-state="new">
  A new order.
</div>

<div class="order" order-state="pending">
  A pending order.
</div>

<div class="order" order-state="canceled">
  A canceled order.
</div>

 

dataset을 이용해 예제

✔️ data-* 속성은 커스텀 데이터를 안전하고 유효하게 전달해준다.

✔️ data-* 속성을 사용하면 읽기, 수정 모두 가능하다.

<style>
.order[data-order-state="new"]{
	color:green;
}

.order[data-order-state="canceled"]{
	color:red;
}
</style>

<div id="order" class="order" data-order-state="new">
A new order
</div>

<script>
//읽기
console.log(order.dataset.orderState); //new

//수정하기
order.dataset.orderState = "canceled"; //글자색이 red 로 바뀜

</script>

 

요약

- js로 페이지를 조작하고 싶을 때 프로퍼티, HTML 속성을 사용할 수 있다.

- 프로퍼티 :  DOM 객체안에 사용되며 값에 모든 타입을 넣을 수 있고, 대소문자를 구분한다.

- HTML 속성 : 값을 모두 문자열로 받아 들이고, 대소문자를 구분하지 않는다.

  -- 속성은 읽을 때 [] 대괄호 사용.

  --속성과 함께 쓰이는 메서드

• elem.hasAttribute(name) : 속성 존재 여부 확인
• elem.getAttribute(name) : 속성값을 가져옴
• elem.setAttribute(name, value) : 속성값을 변경
• elem.removeAttribute(name) : 속성값을 지움
• elem.attribute : 속성을 모두 반환.

- 거의 모든 상황에서 속성보다는 프로퍼티를 사용하는 게 더 낫다. 

 

Reference

• https://ko.javascript.info/dom-attributes-and-properties