ঠিক আছে, আমি এর আগে জাভাস্ক্রিপ্টে ছড়িয়ে পড়েছি, তবে আমি যে সবচেয়ে দরকারী জিনিসটি লিখেছি তা হ'ল সিএসএস স্টাইল-সুইচার। সুতরাং আমি এই কিছুটা নতুন। ধরা যাক আমার কাছে এইচটিএমএল কোড রয়েছে:
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>আমি কীভাবে "হ্যালো ওয়ার্ল্ড!" পরিবর্তন করব "বিদায় বিশ্ব!" ? আমি জানি কীভাবে ডকুমেন্ট.জেটমেন্টমেন্ট বাইক্লাস এবং ডকুমেন্ট.জেট এলিমেন্টবাইআইডি কাজ করে তবে আমি আরও নির্দিষ্ট করে পেতে চাই। যদি এর আগে জিজ্ঞাসা করা হত তবে দুঃখিত।
উত্তর:
ঠিক আছে, প্রথমে আপনাকে যেমন একটি ফাংশন সহ উপাদান নির্বাচন করতে হবে getElementById।
var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];getElementByIdকেবল getElementsByClassNameএকটি নোড প্রদান করে তবে নোডের তালিকা দেয়। যেহেতু class শ্রেণীর নামের সাথে একটি মাত্র উপাদান রয়েছে (যতদূর আমি বলতে পারি), আপনি কেবল প্রথম একটিটি পেতে পারেন (এটি যা এর [0]জন্য is এটি ঠিক অ্যারের মতো)।
তারপরে, আপনি এর সাথে এইচটিএমএল পরিবর্তন করতে পারেন .textContent।
targetDiv.textContent = "Goodbye world!";var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";<div id="foo">
<div class="bar">
Hello world!
</div>
</div>.innerHtmlজন্য .textContentকপি নিরাপত্তা সুবিধার জন্য / পরিকল্পনাটি পেস্ট করুন।
আপনি এটি এর মতো করতে পারেন:
var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
list[0].innerHTML = "Goodbye world!";
}বা, আপনি যদি কম ত্রুটি পরীক্ষা এবং আরও ব্রেভিটি দিয়ে এটি করতে চান তবে এটি এক লাইনে এটি করা যেতে পারে:
document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";ব্যাখ্যায়:
id="foo"।class="bar"।innerHTMLসেই আইটেমটির বিষয়বস্তু পরিবর্তন করতে সেট করতে পারেন ।ক্যাভেটস: কিছু পুরানো ব্রাউজার সমর্থন করে না getElementsByClassName(যেমন আইই এর পুরানো সংস্করণ)। অনুপস্থিত থাকলে function ফাংশনটি শিহরিত হতে পারে।
এই স্থানে আমি ব্রাউজারের সামঞ্জস্যতা সম্পর্কে নিজেকে চিন্তিত করার পরিবর্তে বিল্ট-ইন সিএসএস 3 নির্বাচনকারী সমর্থনকারী একটি লাইব্রেরি ব্যবহার করার পরামর্শ দিই (অন্য কাউকে সমস্ত কাজ করতে দিন)। আপনি যদি এটি করতে কেবল একটি গ্রন্থাগার চান তবে সিজল দুর্দান্ত কাজ করবে। সিজলে এটি এমনভাবে করা হবে:
Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";jQuery সিজল লাইব্রেরি অন্তর্নির্মিত এবং jQuery এ আছে, এটি হবে:
$("#foo .bar").html("Goodbye world!");যদি এটি IE 7 বা এর চেয়ে কম কাজ করে তবে আপনার মনে রাখতে হবে যে getElementsByClassName সমস্ত ব্রাউজারে বিদ্যমান নেই। এ কারণে আপনি নিজের getments এলবাই ক্লাসনাম তৈরি করতে পারেন বা আপনি এটি চেষ্টা করতে পারেন।
var fooDiv = document.getElementById("foo");
for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
childNode = fooDiv.childNodes[i];
if (/bar/.test(childNode.className)) {
childNode.innerHTML = "Goodbye world!";
}
}getElementsByClassNameআইই 8 তেও কাজ করে না তবে আপনি querySelectorAllএটির জায়গায় ব্যবহার করতে পারেন (বেশ কিছুটা হলেও )।
qSAআপনি কোনও শিমের মধ্যে ব্যবহার করা সম্ভব যাতে আপনি এখনও আইই 8 তে নেটিভ কোড ব্যবহার করতে পারেন। যদিও আপনার সমাধানটি ঘনিষ্ঠভাবে পর্যালোচনা করলেও আপনার কাছে কয়েকটি জিনিস ঠিক করা দরকার।
var i = 0, var child = fooDiv.childNodes[i]অবৈধ. i <= fooDiv.childNodesসত্যিকার অর্থে বোঝায় না। childNode.className.test("bar")কোনও childNodeভেরিয়েবল নেই, এবং স্ট্রিংয়ের কোনও test()পদ্ধতি নেই।
পুনরাবৃত্তি ফাংশন:
function getElementInsideElement(baseElement, wantedElementID) {
var elementToReturn;
for (var i = 0; i < baseElement.childNodes.length; i++) {
elementToReturn = baseElement.childNodes[i];
if (elementToReturn.id == wantedElementID) {
return elementToReturn;
} else {
return getElementInsideElement(elementToReturn, wantedElementID);
}
}
}এটি করার সহজতম উপায় হ'ল:
function findChild(idOfElement, idOfChild){
let element = document.getElementById(idOfElement);
return element.querySelector('[id=' + idOfChild + ']');
}বা আরও ভাল পাঠযোগ্য:
findChild = (idOfElement, idOfChild) => {
let element = document.getElementById(idOfElement);
return element.querySelector(`[id=${idOfChild}]`);
}আপনার ডকুমেন্ট.জেট এলিমেন্টবাইআইডি ব্যবহার করা উচিত নয় কারণ এটির কাজটি কেবল ক্লায়েন্টের সাইড কন্ট্রোলগুলির জন্য যা আইডিগুলি স্থির থাকে। নীচের উদাহরণের পরিবর্তে আপনার jquery ব্যবহার করা উচিত।
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>এটা ব্যবহার কর :
$("[id^='foo']").find("[class^='bar']")
// do not forget to add script tags as aboveআপনি যদি কোনও অপসারণ কোনও অপারেশন সম্পাদনা করতে চান তবে কেবল "যুক্ত করুন।" পিছনে এবং অপারেশন না
document.getElementsByClassNameভাল কাজ করবে।