By what principle are new attributes added and retrieved in input, select, etc.?

Question

JavaScript

Hey!
What is the principle by which new attributes are added and retrieved in input, select, etc. ?
Sandboxing jsFiddle It's
common to take the value value and display it on the page

var y = document.getElementById("oborudovanie").value; 
info1.innerHTML = y

It’s more difficult to take the name of the selected option in the select
(thanks to the masters on the toaster, yesterday they suggested how to do it)

var z = document.querySelector(`option[value="${y}"]`).innerText;
info2.innerHTML = z;

But if you go further and specify more attributes on the html element, how do you get those attributes?
I made a small example in the sandbox, how can I add new Power and Residual attributes to the option?
To then perform math with them or just display them on the page?
Thanks to all who answered!
I'm learning Js myself, I still don't understand some points.

Answer 1

var z = document.querySelector(`option`);
var value = z.getAttribute('value');
var postID = z.getAttribute('data-post-id');

Answer 2

Use the data-* attributes .