Доступ до атрибута 'data-' без jQuery

Чи можу я отримати доступ до атрибута даних без jQuery?

З jQuery легко, але я ніде не бачу, як це зробити без jQuery.

Якщо я шукаю в Google "без jQuery", я отримую лише приклади jQuery.

Це взагалі можливо?

На ось я знайшов цей приклад:

<div id='strawberry-plant' data-fruit='12'></div>
<script>
    // 'Getting' data-attributes using getAttribute
    var plant = document.getElementById('strawberry-plant');
    var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
    // 'Setting' data-attributes using setAttribute
    plant.setAttribute('data-fruit', '7'); // Pesky birds
</script>

Тож це здається дуже здійсненним.

Оновлення: Оскільки Microsoft зараз (2020) поступово відмовляється від старого движка Internet Explorer на користь Edge на основі Chromium, datasetвластивість, ймовірно, буде працювати скрізь. Виняток деякий час становитимуть організації та корпоративні мережі, де IE все ще змушений. На момент написання цього, хоча - jsPerf все ще показує метод get / setAttribute як швидший, ніж використання набору даних, принаймні в Chrome 81.

Ви можете використовувати атрибут набору даних . Як і в:

element = document.getElementById("el");
alert(element.dataset.name); // element.dataset.name == data-name

Це просто атрибут ... використовуйте getAttributeяк з будь-яким іншим атрибутом: https://developer.mozilla.org/en/docs/DOM/element.getAttribute

Або я втрачаю суть вашого запитання.

Я думаю, ви можете спробувати це:

var ele = document.getElementById("myelement");
if (ele.hasOwnProperty("data")) {
  alert(ele.data);
}

АБО використовувати

alert(ele['data-property']);