get element by data attribute javascript code example

Example 1: javascript get attribute

//HTML
//<div id="elem" data-id="4hJ3s"></div>

var elem = document.getElementById("elem");
elem.getAttribute("data-id"); // "4hJ3s"

Example 2: html javascript find data attribute

//javascript get html data attribute
<button data-id="1" >Click</button>
<button data-id="2" >Click</button>
<button data-id="3" >Click</button>
const btns=document.querySelectorAll('button[data-id]');
[...btns].forEach(btn => console.log(btn.getAttribute('data-id')))

Example 3: how to select data attribute in javascript using queryselectorAll

<!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <p data-foo="0"></p>
            <h6 data-foo="1"></h6>
            <script>
                var a = document.querySelectorAll('[data-foo]');

                for (var i in a) if (a.hasOwnProperty(i)) {
                    alert(a[i].getAttribute('data-foo'));
                }
            </script>
        </body>
    </html>

Example 4: get data attribute javascript

// <div id="element" data-name="john"></div>

const el = document.querySelector('#element')
el.dataset.name // 'john'

Example 5: javascript get data attribute value

const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Example 6: js select by data attribute

$("[attribute=value]")

Tags:

Misc Example

Recent Posts