<html>
<body>
<div data-widget-name = "menu">Choose the genre</div>
<script>
let elem = document.querySelector(['data-widget-name']);
//PROPERTY : data-widget-name
//ATTRIBUTE : elem.dataset.widgetName
//reading the value
alert(elem.dataset.widgetName);
//or
alert(elem.getAttribute('data-widget-name'));
</script>
</body>
</html>
<body>
<div data-widget-name = "menu">Choose the genre</div>
<script>
let elem = document.querySelector(['data-widget-name']);
//PROPERTY : data-widget-name
//ATTRIBUTE : elem.dataset.widgetName
//reading the value
alert(elem.dataset.widgetName);
//or
alert(elem.getAttribute('data-widget-name'));
</script>
</body>
</html>
/*
this is how to select the element in html by its attribute name and getting the value.
querySelector(['data-widget-name']);
querySelector with [] bracket gets the element by the property name
and it can be edited / get the value by attribute method dataset.blah()
or getAttribute('propertyName')
*/
댓글
댓글 쓰기