По какому принципу добавляются и извлекаются новые атрибуты в input, select и т.п.?

Question

[Mesuti]

Привет!
По какому принципу добавляются и извлекаются новые атрибуты в input, select и т.п. ?
Песочница jsFiddle

Обычное дело взять значение value и вывести его на странице

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

Сложнее дело взять название у выбранного option в select
(спасибо мастерам на тостере, вчера подсказали как делается)

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

Но если идти дальше, и указать больше атрибутов в html элементе, как эти атрибуты взять?
Я в песочнице составил небольшой пример, как можно в option добавить новые атрибуты Мощность и Остатки?
Чтобы потом с ними совершить математику или просто вывести на странице?

Спасибо всем ответившим!
Изучаю Js сам, некоторые моменты еще не понимаю.

Answer 1

[Василий Варюхин]

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

Comments

[Mesuti]

Не совсем понял как именно указывать.
Это же как и сказали выше data атрибуты?

[Василий Варюхин]

Александр Сорокин,

<option data-post-id="12" other-attribute="foo" value="some value">Option 1</option>

[Mesuti]

Спасибо! Разобрался!

var x = document.querySelector(`option`);
var q = x.getAttribute('data-moshnost');
info3.innerHTML = q;

[Mesuti]

Подскажете, почему при таком выборе указывается только первый option?
Все как сказали написал. jsFiddle

[Василий Варюхин]

Александр Сорокин, Смотрите

[Василий Варюхин]

Александр Сорокин, При такой команде document.querySelector(`option`); выбирается первый попавшийся option

[Василий Варюхин]

Александр Сорокин, Ну и все вместе

[Mesuti]

Спасибо!
Пойду изучать подробнее каждый элемент =)

Answer 2

[Rsa97]

Используйте data-* атрибуты.

Comments

[Mesuti]

Спасибо!
Очень интересная тема

[Mesuti]

К сожалению, не получается, в чем может быть причина?
jsiddle
Задаю data

<select  id="oborudovanie">
<option data-moshnost="9" data-ostatki="3" value="100">GeForce</option>
</select>

Присваиваю в переменную и вывожу

var x = article.dataset.moshnost;
info3.innerHTML = x

[Rsa97]

Александр Сорокин, А откуда у вас берётся переменная article?

https://jsfiddle.net/y47egfkj/7/