Почему не работает?
 

<div class="frame" data-heading="Выбор изображения">...</div>

document.getElementsByClassName('frame')[0]['data-heading']
undefined
document.getElementsByClassName('frame')[0].getAttribute('data-heading')
"Выбор изображения"

Почему undefined?

А почему нет? Где вы нашли такое обращение к аттрибутам: document.getElementsByClassName('frame')[0]['data-heading'] ?

element.id

element.name
element.style
но element.className одноименные аттрибуты тега и элемента просто для удобства