Object Destructuring JavaScript and HTML

Question

I'm new with JS and I have the next doubt. It's possible to use destructuring with HTML to get attributes? Actually I know this way.

var foo = document.getElementById('script1');
var bar = foo.getAttribute('var1');
var any = foo.getAttribute('var2');

<script id="script1" src="code.js" var1="var1" var2="var2">
</script>

In my understanding, the way to use object destructuring is:

{ var 1, var2 } = foo;

But actually I'm getting undefined values.

`var { var1, var2 } = foo;` But you're not going to get anything here because your attributes are non-sandard and thus don't become properties of the element object. — Lennholm, Dec 18 '19 at 17:12
This isn't html related or are you asking if the scope of destructured declarations is the same as non-destructured ones? — Aluan Haddad, Dec 18 '19 at 17:17
@AluanHaddad it actually is. The primary missunderstanding here is the difference between attributes and properties. — Lux, Dec 18 '19 at 17:19
@Lux I've changed the tag from `html` to `dom` as that is more accurate. — Heretic Monkey, Dec 18 '19 at 17:20
Technically, if the attributes were correctly prefaced with `data-`, you could destructure the `dataset` property to get the values. — Heretic Monkey, Dec 18 '19 at 17:28

score 2 · Accepted Answer · answered Dec 18 '19 at 17:19

Document.getElementById() returns a Element object, which has properties by itself. This Element object has a property called attributes, which is a NodeValueMap

It is possible to destructure a JavaScript object, however this is not possible for selecting the attributes of the element.

Object Destructuring JavaScript and HTML

1 Answers1