체크리스트를 만들다 checkeBox의 checked가 되었을 때의 이벤트를 어떻게 처리할지 고민하다 이벤트 버블링을 파게 되었고, 관련 메소드길래 공부하다 속성과 프로퍼티까지 와버리고 말았다. ㅋㅋ 나무가지 치기 전법 ! 오히려 좋아 ~ 👍🏼
문서, 블로그들을 보고 공부를 이해를 하면서 나만의 식으로 정리를 해보았다.
속성과 프로퍼티는 무엇인가 ?
브라우저는 웹페이지를 만나면 HTML을 읽어(파싱) DOM 객체를 생성한다.
요소 노드 ( element node )에서 대부분의 표준 HTML 속성(attribute)은 DOM 객체의 프로퍼티(property)가 된다.
이 부분은 브라우저 렌더링 되는 과정을 공부 하면 이해가 빠르다.
간단하게 설명하자면,
속성은 HTML 안에서 쓰인다.
프로퍼티는 DOM 객체 안에서 쓰인다.
예를 들면,
HTML에서 <body id=“wrap”>가 있으면, DOM 객체에서 body.id=“wrap”를 사용하게 될 수 있다.
하지만,
표준 HTML 속성에 해당하지 않는 속성은 프로퍼티가 생기지 않는다.
예를 들자면 input태그요소에 속해 있는 type은
body속성에 해당되지 않기 때문에,값을 지정 하고 추출한다면 생성되지 않아 값이 undefinde된다.
Attribute 의 종류와 특징 활용하는 방법을 알아보자.
- 이 메서드들은 HTML에서 명시한 속성을 대상으로 동작한다.
- 모든 속성값을 읽을 수도 있다.
elem.attributes을 호출하면 내장 클래스 Attr를 구현한 객체들을 담은 컬렉션이 반환된다.- 그 객체 안에는
name과value프로퍼티가 존재한다.
종류
기본 값
<div></div>
const elem = document.querySeletor(‘div’);elem.setAttribute(name, value);
elem.setAttribute(‘Id’, wrap);
👉🏻 <div id=“wrap”></div>: 특정 속성에 값을 변경하거나 새로 지정한다.
elem.getAttribute(name);
elem.getAttribute(‘id’);
👉🏻 wrap: 특성 속성을 추출한다.
elem.hasAttribute(name);
elem.hasAttribute(‘id’);
👉🏻 true: 특성 속성이 있는지, 없는지 존재여부를 true, false로 판별한다.
elem.removeAttribute(name);
elem.removeAttribute(‘id’);
👉🏻 id라는 해당 속성을 제거함.: 특성 속성을 제거한다.
특징 :
<!doctype html>
<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>속성 ( property )
- 대, 소문자를 구분하지 않는다. ( id === ID 는 동일하다. )
- 값은 항상 문자열이다.
2-1. 예외의 상황.input.checked프로퍼티의 경우는 불린 값을 가진다.style속성의 경우 문자열이지만, 프로퍼티는 객체이다.
outerHTML을 사용하면 직접 추가한 속성을 비롯한 모든 속성을 볼 수 있다.attributes가 반환하는 컬렌션은 열거 가능( iterable ) 하다.
(for of문으로 접근 가능하다. )
프로퍼티
- 대, 소문자 구분한다.
프로퍼티 - 속성 동기화
<input />let input = document.querySelector(‘input’);
input.setAttribute(‘id’, ‘id’)’ // 속성을 추가하고 프러퍼티를 갱신
console.log(input.id); // id
input.id = ’newId’; // 프로퍼티 변경 => 속성 갱신
console.log(input.getAtttribute(‘id;)); // newId 속성의 프로퍼티를 갱신 했다.
하지만, 예외의 상황도 있다.
👉🏻 input.value의 경우는 동기화가 속성에서 프로퍼티 방향으로만 일어난다.
<input />
<script>
let input = document.querySelector('input');
// 속성 추가 => 프로퍼티 갱신
input.setAttribute('value', 'text');
alert(input.value); // text (갱신)
// 프로퍼티를 변경해도 속성이 갱신되지 않음
input.value = 'newValue';
alert(input.getAttribute('value')); // text (갱신 안됨!)
</script>- 속성
value를 수정하면 프로퍼티도 수정된다. - 하지만 프로퍼티를 수정해도 속성은 수정되지 않는다.
이러한 상황을 유용하게 사용하는 경우가 있다.
👉🏻 유저의 어떤 행동으로 value가 수정되었는데, 수정 전의 원래 값으로 복구하고 싶은 경우,
속성에 저장된 값을 가지고 오면 되기 때문이다.
비표준 속성, dataset
: HTML을 작성할 때, 대부분 표준 속성으로 사용한다.
하지만 표준이 아닌 속성도 존재한다.
비 표준이 유용한지 아닌지, 그리고 어떤 경우에 비 표준 속성을 사용하는지 알아보자.
- 사용자가 직접 지정한 데이터를 HTML에서 자바스크립트로 넘기고 싶은 경우
- 자바스크립트를 사용해 조작할 HTML 요소를 표시해야 할 경우
결국 자바스크립트를 이용해 HTML요소에 어떠한 것을 하고 싶다. 라는 말을 하는 것 같다.
- 요청 받아온 사용자 정보가 담긴 API를 JS를 이용해 리스트 형식으로 화면에 표출시키는 상황
<div>
<span show-info=“name”></span>
<span show-info=“age”></span>
<span show-info=“phon”></span>
</div>let user = {
name: “yan”,
age: 29,
phone: 01012341234
};
const divs = document.querySelectorAll(‘[show-info]’);
for( let div of divs ) {
let field = div.getAttribute(‘show-info);
div.innerHTML = user[field]; // yan이 ‘name’, 29가 ‘age’에 01012341234가 ‘phone’에 삽입
}- 리스트의 주제별로 카테고리를 만들어 원하는대 스타일이나 기능으로 처리하는 상황.
/* 스타일이 속성 ‘list-category’에 따라 변한다. */
<style>
.list { display: none; }
.list[list-category=“all”] { display: black; }
.list[list-category=“javascript”] { display: black; background: yellow; }
.list[list-category=“react”] { display: black; background: blue; }
.list[list-category=“vue”] { display: black; background: green; }
</sytle>
<ul>
<li><a href=“#app”>app</a></li>
<li><a href=“#javascript”>Javascript</a></li>
<li><a href=“#react”>React</a></li>
<li><a href=“#vue”>Vue</a></li>
</ul>
<div list-category=“javascript”></div>
<div list-category=“react”></div>
<div list-category=“javascript”></div>
<div list-category=“vue”></div>
<div list-category=“react”></div>
<div list-category=“app”></div>javascript로 list를 클릭 하면 div에 적어놓은 카테고리들만 보이게 만들면 된다.
이 비표준을 사용할 때 주의할 점이 있다.
여러 사람과 작업을 하다 보면 비표준으로 작업을 해놓았는데, 다른 누군가가 표준으로 다시 등록을 시키게 되면 문제가 발생하기 때문이다.
이런 충돌 상황을 방지하기 위한 속성인 data-*가 있다.
data-*가 무엇인가 ?
🌟
data-로 시작하는 속성 전체는 개발자가 용도에 맞게 사용하도록 별도로 예약이 된다.
🌟dataset프로퍼티를 사용하면 이 속성에 접근할 수 있다.
<body>
<div data-about="golololol"></div>
<script>
const div = document.querySeletor('div');
div.addEventListener(function(e){
console.log(e.dataset.about); // golololol
});
</script>
</body>그렇다면, 위의 2번의 예시는 data-list-category 같이 여러 단어로 구성된 속성은
카멜 표기법(camel-cased)을 사용해 dataset.listCategory 변환됩니다.
/* 스타일이 속성 ‘list-category’에 따라 변한다. */
.list { display: none; }
.list[list-category=“all”] { display: black; }
.list[list-category=“javascript”] { display: black; background: yellow; }
.list[list-category=“react”] { display: black; background: blue; }
.list[list-category=“vue”] { display: black; background: green; }<ul>
<li><a href=“#app”>app</a></li>
<li><a href=“#javascript”>Javascript</a></li>
<li><a href=“#react”>React</a></li>
<li><a href=“#vue”>Vue</a></li>
</ul>
<div id="list" class="list" data-list-category=“javascript”></div>console.log(list.dataset.listCategory); // javascript
// 수정
list.dataset.listCategory = "react";
console.log(list.dattaset.listCategory); // reactdata-* 속성은 커스텀 데이터를 안전하고 유효하게 전달해줍니다.
data-는 읽기 뿐 아니라, 수정이 되기 때문에 주의해서 사용해야한다.
클릭이벤트에서 자주 활용될 것 같으니, 잘 공부하고 활용해야되겠다.
느낀점
내가 사용할, 그리고 아마 개발자들이 자주 사용하는 것이
dataset비표준 속성일 것 같다.
내가 원하던 기능을 찾아서 그것에 대해 공부하게 되니, 그냥 순차적으로 쭈루룩 공부하는 것보다 집중도가 올라가는 그런 느낌이다.
코딩은 내가 아는 지식으로만 하는게 아니라, 계속 새로운 것을 알아가는 재미가 있는 것 같다.
괴로운데 해결책을 찾으면, 그렇게 짜릿할 수 가 없다.
그리고, 독학으로 하다보니 모르는 것을 주변 개발자 분들에게 힌트를 받아서 내가 알아가는 그런 미션클리어 같은 느낌도 있다.
하지만, 속도는 남들 보다는 조금 더딘 느낌이 있지만,, 취업을 위해 열심히 계속 작업물들을 만들어 나아가야겠다.
