판봉 개발 일기
[04]Browser[document] - javascript 본문
Attribute-property
이번시간에는 제목 그대로 attribute-property에 대해서 알아 볼겁니다.
브라우저는 웹페이지를 만나면 HTML을 읽고 DOM객체를 생성합니다.
그리고 요소노드(element node)에서 대부분의 표준HTML속성들은 DOM객체의 프로퍼티가 되죠.
<body id = "page">가 있으면 DOM 객체에서 body.id="page"로 사용할수있는것처럼요
하지만 인생처럼 이렇게 쉽게쉽게 흘러가지만은 않습니다.
만약 표준이 아닌 속성이 있다면 어떻게 될까요?
위에 방식으로는 찾을 수가 없습니다.
그럴때에는 querySelector가 아닌 getAttribute를 이용해야합니다.
바로 비표준 속성을 가져오는 것이죠.
물론 위의 사진처럼 setAttribute라는 것을 이용하여 비표준 속성을 변경할 수도 있습니다.
Dataset
HTML을 작성할때는 대부분 표준 속성이 이용되어집니다.
하지만 그렇지 않은 속성도 존재하죠
data-로 시작하는 속성의 전체는 개발자가 용도에 맞게끔 사용하도록 별도로 예약이 되어집니다.
dataset 프로퍼티를 사용하면 이 속성에 접근할 수 있죠!
만약 어떤 요소에 이름이 data-about인 속성이 있다면 어떤요소.dataset.about을 사용하여 그 값을 얻을 수 있습니다.
<html>
<body>
<!-- data-??: 데이터 속성-->
<!-- 태그에 데이터 값을 넣어서 나중에 써먹을 용도 -->
<!-- 화면에 안보이는 영역에 값을 넣어두기 위함-->
<div id="box" data-about="Elephants">코끼리는 뿌우우우우~~~</div>
<script>
const div = document.querySelector("#box");
// DOM : dataset.about -> Element: data-about
console.log(div.dataset.about);
</script>
</body>
</html>
이렇게 하면 화면에는 보이지 않지만 해당 영역에 속성이 존재하죠
나중에 개발자는 dataset을 이용하여 저 속성의 값을 얻을 수 있는 것입니다.!
만약에 data-order-state처럼 하이푼(-)이 있고 여러단어로 이루어진 속성은
카멜표기법(camel-cased)을 사용해 dataset.orderState로 변환됩니다.
위의 코드를 잘보시면 data-about이라고 되어있는데 나중에 그값을 보고싶을때 dataset.about으로 작성한게 보이실겁니다
이처럼 자바스크립트는 웹페이지와 무언가를 하는게 너무나 매력적으로 보여집니다.
저만 그런지는 모르겠지만...ㅋㅋ
해당 문제는 모던 자바스크립트 사이트에서 따온건데
저 문제를 풀었을 때 저는 아직까지 개념이 잡혀있기전이라 이렇게 풀었습니다.
getAttribute를 써서 해당 속성의 값을 얻어냈죠.
하지만 지금 배운걸로는
이렇게 할 수 있죠
코드가 조금더 짧아진걸 보실수있죠?
해당 결과는 둘다 menu라고 동일했습니다.
오늘은 여기까지만 정리하고 전 3일뒤가 정보처리산업기사 필기 시험이기에 이만하고 물러가겠습니다.
다들 즐거운 공부되시길바랍니다(보는사람도 없지만..기분좀 내기위해 ..ㅋㅋㅋㅋ)
'JAVA 웹개발 과정' 카테고리의 다른 글
| javascript-todolist[0816] (0) | 2021.08.16 |
|---|---|
| Javascript-Document-manipulation[0816] (0) | 2021.08.16 |
| [03]Browser[document] - javascript (0) | 2021.08.12 |
| [02]Browser[document] - javascript (0) | 2021.08.12 |
| [01]Browser[document] - javascript (0) | 2021.08.12 |
