কোনও গুণমানের ভিত্তিতে ডিওমে একটি উপাদান সন্ধান করুন

Question

আপনি কি দয়া করে আমাকে বলতে পারেন যে কোনও ডিওএম এপিআই রয়েছে যা প্রদত্ত বৈশিষ্ট্যটির নাম এবং বৈশিষ্ট্যযুক্ত মান সহ কোনও উপাদান অনুসন্ধান করবে:

কিছুটা এইরকম:

doc.findElementByAttribute("myAttribute", "aValue");

Comments

আপনি যদি কোনও জেকারি সল খুঁজছেন তবে সদৃশ: stackoverflow.com/questions/696968/…

— রজত

আপনি কি আধুনিক সমাধানের গৃহীত উত্তরটি ওয়াজেটেকের উত্তরটি আপডেট করতে পারেন?

— নিক ক্র্যাভার

Answer 1

আপডেট: গত কয়েক বছরে ল্যান্ডস্কেপ ব্যাপক পরিবর্তন হয়েছে। আপনি এখন নির্ভরযোগ্যভাবে ব্যবহার করতে পারেন querySelectorএবং এটি কীভাবে করবেন তার জন্য ওয়াজটেকের উত্তরquerySelectorAll দেখুন ।

এখন jQuery নির্ভরতার প্রয়োজন নেই। আপনি যদি jQuery ব্যবহার করেন তবে দুর্দান্ত ... আপনি যদি না হন তবে আপনাকে আর বৈশিষ্ট্য দ্বারা উপাদান নির্বাচন করার জন্য এটির উপর নির্ভর করতে হবে না।

---

ভ্যানিলা জাভাস্ক্রিপ্টে এটি করার খুব খুব ছোট উপায় নেই তবে কয়েকটি সমাধান উপলব্ধ।

আপনি উপাদানগুলির মধ্যে লুপিং এবং বৈশিষ্ট্যটি পরীক্ষা করে এটির মতো কিছু করেন

JQuery এর মতো লাইব্রেরি যদি কোনও বিকল্প হয় তবে আপনি এটিকে কিছুটা সহজ করতে পারেন:

$("[myAttribute=value]")

যদি মানটি কোনও বৈধ সিএসএস সনাক্তকারী না হয় (এর মধ্যে ফাঁকা বা বিরামচিহ্ন রয়েছে ইত্যাদি), আপনার মানটির চারপাশে উদ্ধৃতিগুলি প্রয়োজন (সেগুলি একক বা দ্বিগুণ হতে পারে):

$("[myAttribute='my value']")

এছাড়াও আপনি কি করতে পারেন start-with, ends-with, contains, ইত্যাদি ... সেখানে অ্যাট্রিবিউট নির্বাচক জন্য বিভিন্ন অপশন আছে ।

Comments

প্রকৃতপক্ষে ভ্যানিলা জাভাস্ক্রিপ্ট ডম এপিআই আধুনিক ব্রাউজারগুলিতে বেশ ভাল কাজ করে

— ওয়াজটেক ক্রুসজেউস্কি

@ ওয়াজটেক ক্রুসজেউস্কি ২০১০ সালে নয় :) আমি হালনাগাদ করেছি, আশা করি প্রশ্নকারী আমাদের জন্য গ্রহণটি সরিয়ে নেবে - আমরা সেখানে বর্তমান তথ্য চাই।

— নিক Craver

আমি মনে করি jQuery (বা সমতুল্য) সম্ভবত কী প্রয়োজন তা না জেনে ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হওয়া সম্ভবত সবচেয়ে সহজ।

— অ্যালেক্সিস উইল্ক

আমি খালি অ্যারে পেতে থাকি! আমি একটি এসভিজি এর ডি বৈশিষ্ট্য দ্বারা দখল করার চেষ্টা করছি এবং $ ("[d = পথ]") চেষ্টা করছি; যেখানে 'পাথ' হ'ল একটি ভেরিয়েবল যা আমার নির্দিষ্ট ডি-অ্যাট্রিবিউট যুক্ত করে। কেউ এসজিজি পাথ দিয়ে এটি করার চেষ্টা করেছে?

— tx291

Answer 2

আধুনিক ব্রাউজারগুলি দেশীয় সমর্থন করে querySelectorAllযাতে আপনি এটি করতে পারেন:

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

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

ব্রাউজারের সামঞ্জস্যতা সম্পর্কে বিশদ:

• http://quirksmode.org/dom/core/#t14
• http://caniuse.com/queryselector

অপ্রচলিত ব্রাউজারগুলিকে সমর্থন করতে আপনি jQuery ব্যবহার করতে পারেন (আই 9 এবং তার চেয়ে বেশি পুরানো):

$('[data-foo="value"]');

Comments

"আধুনিক" সংজ্ঞাটি সংহত

— serhio

দেখে মনে হচ্ছে মানটি কোনও সংখ্যা বা হতে পারে নাSyntaxError: An invalid or illegal string was specified

— 16

নির্বাচকটি হওয়া উচিত:'[data-foo="value"]'

— ইয়োটাম ওমর

পারফরম্যান্স সম্পর্কে কোনও নোট? এটি কি দ্রুত সমস্ত নোডের উপর পুনরাবৃত্তি হয়?

— স্টেপান ইয়াকোভেনকো

"ডেটা-ফু" কী ... এবং এই উদাহরণে 'মাইএট্রিবিউট' কোথায় গেছে?

— oo_dev

Answer 3

আমরা DOM এ বৈশিষ্ট্য নির্বাচনকারী document.querySelector()এবং document.querySelectorAll()পদ্ধতি ব্যবহার করে ব্যবহার করতে পারি ।

আপনার জন্য:

document.querySelector("selector[myAttribute='aValue']");

এবং ব্যবহার করে querySlectorAll():

document.querySelectorAll("selector[myAttribute='aValue']");

ইন querySelector()এবং querySelectorAll()পদ্ধতি আমরা বস্তু হিসেবে আমরা "সিএসএস" এ নির্বাচন নির্বাচন করতে পারেন।

Https://developer.mozilla.org/en-US/docs/Web/CSS/Atribute_selectors এ "CSS" বৈশিষ্ট্য নির্বাচনকারীদের সম্পর্কে আরও

Comments

আমাকে এই ডকুমেন্টের মতো অভ্যন্তরীণ উক্তি চিহ্নগুলি সরিয়ে ফেলতে হয়েছিল qu

— মাতাজাজ হিরসমান

Answer 4

FindByAttributeValue("Attribute-Name", "Attribute-Value");   

পিএস যদি আপনি সঠিক উপাদান-টাইপ জানেন তবে আপনি তৃতীয় প্যারামিটার যুক্ত করুন (অর্থাত্ div, a, p ...etc...):

FindByAttributeValue("Attribute-Name", "Attribute-Value", "div");   

তবে প্রথমে এই ফাংশনটি সংজ্ঞায়িত করুন:

function FindByAttributeValue(attribute, value, element_type)    {
  element_type = element_type || "*";
  var All = document.getElementsByTagName(element_type);
  for (var i = 0; i < All.length; i++)       {
    if (All[i].getAttribute(attribute) == value) { return All[i]; }
  }
}

PS মন্তব্য প্রতি সুপারিশ আপডেট।

Comments

কেন ?! আপনি এটি করে আপনার সমস্ত ডোম লুপ করছেন

— আর্থার

এটি দুর্দান্ত বলে মনে হচ্ছে - যদি আপনার পৃষ্ঠায় কেবল 5 টি উপাদান থাকে।

— শেরিফডেরেক

document.querySelectorAll('[data-foo="value"]');@ ওয়াজটেক ক্রুসজেউস্কি প্রস্তাবিত স্বীকৃত অ্যাঞ্জার ব্যবহার করে।

— আর্থার

Answer 5

এখানে একটি উদাহরণ রয়েছে, এসসিআর অ্যাট্রিবিউট দ্বারা কোনও দস্তাবেজগুলিতে কীভাবে চিত্রগুলি অনুসন্ধান করা যায়:

document.querySelectorAll("img[src='https://pbs.twimg.com/profile_images/........jpg']");

Answer 6

আপনি getAttribute ব্যবহার করতে পারেন:

 var p = document.getElementById("p");
 var alignP = p.getAttribute("align");

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Comments

তিনি ডিওএম (এবং পরীক্ষার বৈশিষ্ট্যগুলি) pব্যবহার না করে idবা প্রতিটি ব্যবহার না করেই উপাদানটি নির্বাচন করতে চানp

— আর্থার

Answer 7

ক্যোয়ারী নির্বাচক, উদাহরণ ব্যবহার করুন:

document.querySelectorAll(' input[name], [id|=view], [class~=button] ')

input[name]nameসম্পত্তি সহ উপাদানগুলি ইনপুট করে ।

[id|=view]আইডি সহ উপাদানগুলি শুরু হয় view-।

[class~=button]buttonক্লাস সহ উপাদানসমূহ ।