javascript select element by data attribute value

Today, We want to share with you javascript select element by data attribute value.In this post we will show you jquery find element with attribute name, hear for get data attribute of selected option jquery we will give you demo and example for implement.In this post, we will learn about Select element by data attribute in JavaScript with an example.

javascript select element by data attribute value

There are the Following The simple About How to select elements by data attribute using CSS? Full Information With Example and source code.

As I will cover this Post with live Working example to develop html5 custom attributes without data prefix, so the How to select elements by custom HTML5 data attribute? is used for this example is following below.

Read Also:  Golang Calculating Factorial Using Recursion

Setting, getting, and removing data attributes Example

Example 1: document.querySelectorAll() in javascript

How to Find an Element Based on a Data-attribute Value in jQuery

<a product-id='122'>989898414141</a>

<script type="text/javascript">
	var product_data = document.querySelectorAll('[product-id]');
	var product_data = product_data[0].innerHTML;

Example 2: jQuery Selecting Element by Data Attribute

<!DOCTYPE html>
<html lang="en">
<title>How to Get & Set Data Attribute Value From Elements jQuery</title>
    ul li { 
        float: left;
        margin: 10px;
        list-style: none;
    ul li img.selected{
        outline: 5px solid black;
<script src=""></script>
        var product = $(this).children("option:selected").val();
        $(".products img").removeClass("selected");
        $('.products img[data-product=' + product + ']').addClass("selected");
<h2>Use the CSS Attribute Selector & jQuery Example</h2>
    <label>Preview Devices:</label>
        <option>select Any option</option>
    <ul class="products">
            <img src="media/computer.jpg" alt="Computer" data-product="1">
            <img src="media/lcd.jpg" alt="LCD" data-product="2">
            <img src="media/laptop.jpg" alt="Laptop" data-product="3">
            <img src="media/mobile.jpg" alt="Mobile" data-product="4">

Web Programming Tutorials Example with Demo

Read :

Read Also:  Two Way Data Binding using Angular Example


You can also read about AngularJS, ASP.NET, VueJs, PHP.

Free Live Chat for Any Issue

I hope you get an idea about get element by data attribute vanilla js.
I would like to have feedback on my blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Rate this post