ক্যোয়ারী নির্বাচনকারী সমস্ত লাইব্রেরি ব্যবহার না করে পাওয়া যায় না যখন বৈশিষ্ট্য দ্বারা উপাদান পান?

Question

<p data-foo="bar">

আপনি কিভাবে সমতুল্য করতে পারেন

document.querySelectorAll('[data-foo]')

যেখানে ক্যোয়ারী নির্বাচনকারী সমস্ত উপলব্ধ নেই ?

আমার একটি নেটিভ সমাধান দরকার যা অন্তত আই 7 এ কাজ করে। আমি আই 6 সম্পর্কে চিন্তা করি না।

Comments

খুঁজে বার করো sizzle.js জাভাস্ক্রিপ্ট নির্বাচক গ্রন্থাগার

— যুগান্তকারী

হ্যাঁ, কেবলমাত্র সিলেক্টিংয়ের জন্য আমার দরকার ডেটা অ্যাট্রিবিউটস, তাই আমি সিজলের মতো পুরো সিলেক্টর ইঞ্জিনটিকে টান না দিয়ে প্যাচ করার সহজতম উপায়টি চিহ্নিত করার চেষ্টা করছিলাম। তবে উত্সটি দেখতে ভাল পয়েন্ট। বিটিডব্লিউর

— ryanve

@ryanve, ধন্যবাদ আমি একবার দেখে :) নিতে হবে

— যুগান্তকারী

আমি যে কার্যনির্বাহী সমাধানটি ব্যবহার করেছি তা হ'ল github.com/ryanve/dope/blob/master/dope.js পদ্ধতিতে 'ক্যোয়ারীআত্র'

— রাইভ

হ্যাঁ, আপনার প্রশ্ন আমার উত্তর। সুতরাং এই আরও একটি প্রশ্ন সঙ্গে আসা। কোন পরিস্থিতিতে querySelectorAllতা পাওয়া যায় না? note - I don't care all IE

— vzhen

Answer 1

আপনি এমন একটি ফাংশন লিখতে পারেন যা getElementsByTagName ('*') চালায় এবং কেবলমাত্র সেই উপাদানগুলিকে একটি "ডেটা-ফু" বৈশিষ্ট্য দিয়ে ফেরত পাঠাতে পারে:

function getAllElementsWithAttribute(attribute)
{
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++)
  {
    if (allElements[i].getAttribute(attribute) !== null)
    {
      // Element exists with attribute. Add to array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

তারপর,

getAllElementsWithAttribute('data-foo');

Comments

ব্যবহার != nullআদর্শ উপায় হয় (ভাল উপরে আমার মন্তব্য চেয়ে) কারণ পুরাতন ইন্টারনেট রেখে তা কি সম্ভব getAttribute যার একটি মান ফিরে যাওয়াই typeofহয়'number'

— ryanve

এর document.getElementsByTagName('*')পরিবর্তে কেন ব্যবহার করছেন document.all?

— পেদ্রোজথ

আপনি কেবল অস্তিত্বের জন্য যাচাই করতে চান এবং এর মূল্যটি কেন না hasAttributeতার চেয়ে কেন ব্যবহার করবেন না getAttribute() !== null?

— rvighne

Answer 2

ব্যবহার

//find first element with "someAttr" attribute
document.querySelector('[someAttr]')

অথবা

//find all elements with "someAttr" attribute
document.querySelectorAll('[someAttr]') 

বৈশিষ্ট্য অনুসারে উপাদানগুলি সন্ধান করতে। এটি এখন সমস্ত প্রাসঙ্গিক ব্রাউজারগুলিতে (এমনকি আইই 8) সমর্থিত: http://caniuse.com/#search=queryselector

Comments

প্রশ্নটির স্পষ্টভাবে অনুরোধ করা হলে এটির কীভাবে এতগুলি উত্সাহ হয়: "আমার একটি নেটিভ সমাধান প্রয়োজন যা কমপক্ষে আই 7 তে কাজ করে "। দ্বিতীয়ত, সেই লিঙ্কটিতে বলা হয়েছে যে সমর্থনটি আইই 11 এ শুরু হয় যদিও এটি আসলে আই 8 থেকে শুরু হয় - সম্ভবত এটি ডেভেলপার.মোজিলা.আর.ইন.ইউএস / ডকস / ওয়েবে / এপিআই / এলিমেট / এ পরিবর্তিত হওয়া উচিত যাতে এটি উত্তরটি সমর্থন করে। ..?

— Zze

সমস্ত উত্সাহের কারণ এবং আমি যে উত্তরটি দিয়েছি সে কারণটি হ'ল এই এসও প্রশ্নটি আসলেই পুরানো, সুতরাং যখন আপনি ডিওএম উপাদানগুলি কীভাবে সন্ধান করবেন সন্ধানের ফলাফলগুলিতে আপনি এই প্রশ্নটিকে খুব উঁচুতে খুঁজে পেয়েছেন এবং যেহেতু লোকেরা এটিই তারা upvote খুঁজছেন। উপযোগিতা> historicalতিহাসিক নির্ভুলতা। দ্বিতীয়ত লিঙ্কটি এখনও ঠিক কাজ করে, এটি কেবলমাত্র caniuse.com পুরানো ব্রাউজারগুলিকে লুকিয়ে রেখেছে, আপনি যদি "ব্যবহারের তুলনামূলক" স্যুইচ করেন তবে আপনি এখনও পুরানো ব্রাউজারগুলি দেখতে পাবেন।

— পাইলিনাক্স

নিখুঁতভাবে কাজ করেছেন। দ্রুত এবং সহজ

— ডসন বি

এটি 2020. এটি এখনই গ্রহণযোগ্য উত্তর হওয়া উচিত।

— হুশারকলের

Answer 3

আমি কিছুটা খেলেছি এবং এই অশোধিত সমাধানটি দিয়ে শেষ করেছি:

function getElementsByAttribute(attribute, context) {
  var nodeList = (context || document).getElementsByTagName('*');
  var nodeArray = [];
  var iterator = 0;
  var node = null;

  while (node = nodeList[iterator++]) {
    if (node.hasAttribute(attribute)) nodeArray.push(node);
  }

  return nodeArray;
}

ব্যবহারটি বেশ সহজ, এবং আইই 8 তেও কাজ করে:

getElementsByAttribute('data-foo');
// or with parentNode
getElementsByAttribute('data-foo', document);

http://fiddle.jshell.net/9xaxf6jr/

তবে আমি এটির জন্য / ব্যবহার করার পরামর্শ দিচ্ছি (এবং পুরানো ব্রাউজারগুলি পলিফিল ব্যবহার করতে সহায়তা করে ):querySelectorAll

document.querySelectorAll('[data-foo]');

Comments

হাই, ক্যোয়ারিলেক্টরঅল এর জন্য +1। একটি দ্রুত jsperf পরীক্ষা jsperf.com/custom-vs-selectorall-attributes দেখায় যে এটি গৃহীত উত্তরের চেয়ে অনেক দ্রুত ... দুর্ভাগ্যক্রমে এটি আই 7 উপযুক্ত নয় :(

— সেবাস্তিয়ান ড্যানিয়েল

Answer 4

এটি কাজ করে দেখুন

document.querySelector ( '[এট্রিবিউট = "মান"]')

উদাহরণ:

document.querySelector('[role="button"]')

Answer 5

এটিও কাজ করে:

document.querySelector([attribute="value"]);

তাই:

document.querySelector([data-foo="bar"]);

Comments

এটি প্রকৃত ক্যোয়ারী নির্বাচনকারীতে একক উদ্ধৃতি অনুপস্থিত। হওয়া উচিত: document.querySelector('[data-foo="bar"]');

— ব্রেটিনস

Answer 6

এটি ব্যবহার করে দেখুন - আমি উপরের উত্তরগুলিতে কিছুটা পরিবর্তন করেছি:

var getAttributes = function(attribute) {
    var allElements = document.getElementsByTagName('*'),
        allElementsLen = allElements.length,
        curElement,
        i,
        results = [];

    for(i = 0; i < allElementsLen; i += 1) {
        curElement = allElements[i];

        if(curElement.getAttribute(attribute)) {
            results.push(curElement);
        }
    }

    return results;
};

তারপর,

getAttributes('data-foo');

Comments

আপনি কী পরিবর্তন করেছেন এবং কেন?

— আর্টজম বি।

Answer 7

যদি প্রয়োজন হয় তবে মান অনুসারে গুণকীর্তিটি পেতে অনুমতি দেওয়ার জন্য @ কেভিনফাহির জবাবে কিছুটা পরিবর্তন করুন :

function getElementsByAttributeValue(attribute, value){
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++) {
    if (allElements[i].getAttribute(attribute) !== null) {
      if (!value || allElements[i].getAttribute(attribute) == value)
        matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}

Answer 8

ব্রাউজারে ব্যবহার করবেন না

ব্রাউজারে, ব্যবহার করুন document.querySelect('[attribute-name]')।

তবে আপনি যদি ইউনিট টেস্টিং করেন এবং আপনার উপহাসিত ডোমটিতে ফ্লেকি ক্যোয়ারী নির্বাচনী বাস্তবায়ন রয়েছে, এটি কৌশলটি করবে।

এটি @ কেভিনফাহির উত্তর, কেবল ES6 ফ্যাট অ্যারো ফাংশনগুলির সাথে এবং সম্ভবত পাঠযোগ্যতার ব্যয়ে এইচটিএমএল সংগ্রহটি একটি অ্যারেতে রূপান্তরিত করে কিছুটা ছাঁটা হয়েছে।

সুতরাং এটি কেবল একটি ES6 ট্রান্সপোর্টার দিয়ে কাজ করবে। এছাড়াও, আমি নিশ্চিত নই যে এটি প্রচুর উপাদানগুলির সাথে কতটা পারফর্মেন্ট হবে।

function getElementsWithAttribute(attribute) {
  return [].slice.call(document.getElementsByTagName('*'))
    .filter(elem => elem.getAttribute(attribute) !== null);
}

এবং এখানে একটি বৈকল্পিক যা একটি নির্দিষ্ট মান সহ একটি বৈশিষ্ট্য পাবে

function getElementsWithAttributeValue(attribute, value) {
  return [].slice.call(document.getElementsByTagName('*'))
    .filter(elem => elem.getAttribute(attribute) === value);
}