jQuery/JavaScript-এ data-* অ্যাট্রিবিউট वाले সব এলিমেন্ট সিলেক্ট করা

JavaScript-এ document.querySelectorAll('[data-*]') ব্যবহার করে `data-` প্রিফিক্সযুক্ত অ্যাট্রিবিউট থাকা সব এলিমেন্ট সিলেক্ট করা যায়। এটি ডেটা-অ্যাট্রিবিউট ভিত্তিক DOM কোয়েরির জন্য סט্যান্ডার্ড পদ্ধতি।

সিনট্যাক্স

// নির্দিষ্ট data-অ্যাট্রিবিউট
var elements = document.querySelectorAll('[data-sentence]');

// যেকোনো data-* অ্যাট্রিবিউট (Attribute selector সাপোর্ট নেই, workaround নিচে)
var allDataElements = document.querySelectorAll('[data-sentence], [data-id], [data-value]');

পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <title>Data Attribute Selector</title>
</head>
<body>
    <p data-sentence="This is the program"></p>
    <br/>
    <h6 data-sentence="This is the test"></h6>
    <div data-id="123" data-role="admin"></div>

    <script>
        // নির্দিষ্ট অ্যাট্রিবিউট
        var result = document.querySelectorAll('[data-sentence]');
        
        for (let i = 0; i < result.length; i++) {
            console.log(result[i].getAttribute('data-sentence'));
        }
        
        // বোনাস: সব data-* অ্যাট্রিবিউট والা এলিমেন্ট (TreeWalker)
        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT);
        const allDataEls = [];
        while (walker.nextNode()) {
            const el = walker.currentNode;
            if ([...el.attributes].some(attr => attr.name.startsWith('data-'))) {
                allDataEls.push(el);
            }
        }
        console.log("সর্বমোট data-* এলিমেন্ট:", allDataEls.length);
    </script>
</body>
</html>

চলানোর পদ্ধতি

1. ফাইলটি dataAttr.html নামে সংরক্ষণ করুন।
2. VS Code-এ Open with Live Server দিয়ে চালান।
3. কনসোল (F12) দেখুন।

আউটপুট

This is the program
This is the test
সর্বমোট data-* এলিমেন্ট: 3

jQuery বিকল্প

$('[data-sentence]').each(function() {
    console.log($(this).data('sentence')); // .data() অটো পাসার্স JSON
});

Dataset API (Modern)

const el = document.querySelector('[data-sentence]');
console.log(el.dataset.sentence); // "This is the program"
console.log(el.dataset); // DOMStringMap {sentence: "..."}

সতর্কতা

• `querySelectorAll('[data-*]')` কাজ করে না (CSS সিলেক্টর স্পেসিফিকেশন সাপোর্ট করে না)।
• TreeWalker বা `getElementsByTagName('*')` + ফিল্টার ব্যবহার করুন।
• `.dataset` ক্যামেলকেস রূপান্তর করে: `data-user-id` → `dataset.userId`।