jQuery में data- एट्रिब्यूट वाले सभी एलिमेंट्स सेलेक्ट करके कंसोल पर दिखाएं

document.querySelectorAll('[data-*]') या jQuery के $('[data-*]') से data- एट्रिब्यूट वाले सभी एलिमेंट्स सेलेक्ट करें।

वेनिला JavaScript (अनुशंसित)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data एट्रिब्यूट सेलेक्ट</title>
</head>
<body>
    <p data-sentence="यह पहला प्रोग्राम है"></p>
    <br/>
    <h6 data-sentence="यह टेस्ट है"></h6>
    <div data-info="अतिरिक्त जानकारी" data-id="123"></div>

    <script>
        // सभी data-* एट्रिब्यूट वाले एलिमेंट्स सेलेक्ट करें
        const elements = document.querySelectorAll('[data-sentence]');
        // या सभी data- एट्रिब्यूट वाले: document.querySelectorAll('[data-*]') - ध्यान: सभी ब्राउज़र में काम नहीं करता
        
        // बेहतर: स्पेसिफिक एट्रिब्यूट के लिए
        const allDataElements = document.querySelectorAll('[data-sentence], [data-info], [data-id]');
        
        allDataElements.forEach((el, index) => {
            // सभी data-* एट्रिब्यूट्स प्राप्त करें
            const dataset = el.dataset; // { sentence: "...", info: "...", id: "..." }
            
            console.log(`एलिमेंट ${index + 1}:`, el.tagName);
            console.log("  Dataset:", dataset);
            
            // विशिष्ट एट्रिब्यूट
            if (el.hasAttribute('data-sentence')) {
                console.log("  Sentence:", el.getAttribute('data-sentence'));
            }
        });
    </script>
</body>
</html>

jQuery दृष्टिकोण

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    // jQuery सेलेक्टर
    const $elements = $('[data-sentence]');
    
    $elements.each(function(index) {
        console.log(`jQuery एलिमेंट ${index + 1}:`);
        console.log("  data-sentence:", $(this).data('sentence'));    // .data() ऑटो-पार्स करता है
        console.log("  raw attr:", $(this).attr('data-sentence'));     // रॉ स्ट्रिंग
    });
    
    // सभी data-* एट्रिब्यूट्स
    $('[data-*]').each(function() {  // नोट: यह सेलेक्टर सभी ब्राउज़र में काम नहीं करता
        console.log("सभी डेटा:", $(this).data());
    });
</script>

dataset प्रॉपर्टी (मॉडर्न, तेज़)

const el = document.querySelector('[data-sentence]');

// dataset ऑटोमैटिकली kebab-case को camelCase में बदलता है
// data-user-name → dataset.userName
// data-user-id → dataset.userId

console.log(el.dataset.sentence);    // "यह पहला प्रोग्राम है"
console.log(el.dataset);             // DOMStringMap { sentence: "..." }

// नया data एट्रिब्यूट सेट करें
el.dataset.newValue = "नया मान";     // data-new-value="नया मान" बनाता है

चलाने का तरीका

HTML फ़ाइल सेव करके ब्राउज़र में खोलें, डेवलपर टूल्स कंसोल देखें (F12)।

आउटपुट

एलिमेंट 1: P
  Dataset: {sentence: 'यह पहला प्रोग्राम है'}
  Sentence: यह पहला प्रोग्राम है
एलिमेंट 2: H6
  Dataset: {sentence: 'यह टेस्ट है'}
  Sentence: यह टेस्ट है
एलिमेंट 3: DIV
  Dataset: {info: 'अतिरिक्त जानकारी', id: '123'}

महत्वपूर्ण नोट्स

• [data-*] सेलेक्टर मानक नहीं है - सभी ब्राउज़र सपोर्ट नहीं करते
• स्पेसिफिक एट्रिब्यूट के लिए [data-sentence] उपयोग करें
• el.dataset सबसे तेज़ और मॉडर्न तरीका है
• कैमलकेस रूपांतरण: data-my-value → dataset.myValue