고정 헤더 영역
상세 컨텐츠
본문
소스
<body>
<!-- on : 이벤트 click : 속성, onkeypress, onkeydown, onkeyfocus, onkeyup, onbler, onmousemove -->
<button onclick="doAction();" onk>확인</button>
<!-- msg같은 브라우저 표준이 아닌 속성일 경우 data-msg로 사용하면 표준속성처럼 사용됨 -->
<div id="result" data-msg="test">속성확인용...</div>
<script>
function doAction() {
var divObj = document.querySelector("div");
// div 태그에서 id 속성의 값을 확인
console.log("divObj.id : ", divObj.id);
console.log('divObj["id"] : ', divObj["id"]);
console.log('divObj.getAttribute("id") : ', divObj.getAttribute("id"));
//console.log("id : ", divObj.data-msg); // divObg.data - msg가 되기 때문에 ""로 묶어야함
console.log('divObj["data-msg"] : ', divObj["data-msg"]); // undefined
// 사용자정의속성은 setAttribute, getAttribute로 처리해야 정상적으로 사용 가능
console.log('divObj.getAttribute("data-msg") : ', divObj.getAttribute("data-msg")); // test
}
</script>
</body>
결과
'개발 > JavaScript' 카테고리의 다른 글
| JavaScript - 폼 데이터 체크 후 서브밋 하기(onsubmit) (0) | 2020.06.04 |
|---|---|
| JavaScript - 엘리먼트의 값 추가, 삭제(innerHTML, remove) (0) | 2020.06.03 |
| JavaScript - 엘리먼트의 속성 추가하기 2 (setAttribute) (0) | 2020.06.03 |
| JavaScript - 엘리먼트의 속성 추가하기 1 (0) | 2020.06.03 |
| JavaScript - 태그를 동적으로 만들어서 특정 엘리먼트에 추가하기(createElement, createTextNode, appendChild) (0) | 2018.12.04 |
댓글 영역