तत्व के अंदर तत्व को वर्ग और आईडी से प्राप्त करें - जावास्क्रिप्ट

Question

ठीक है, मैंने पहले भी जावास्क्रिप्ट में डब किया है, लेकिन मैंने जो सबसे उपयोगी चीज लिखी है वह सीएसएस शैली-स्विचर है। इसलिए मैं इसके लिए कुछ नया हूं। मान लीजिए कि मेरे पास इस तरह से HTML कोड है:

<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>

मैं कैसे बदलूंगा "हैलो वर्ल्ड!" "अलविदा दुनिया!" ? मुझे पता है कि कैसे document.getElementByClass और document.getElementById काम करते हैं, लेकिन मैं और अधिक विशिष्ट प्राप्त करना चाहूंगा। माफ करना, अगर यह पहले भी पूछा गया है।

Answer 1

ठीक है, पहले आपको फ़ंक्शन जैसे तत्वों का चयन करना होगा getElementById।

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementByIdकेवल एक नोड लौटाता है, लेकिन getElementsByClassNameएक नोड सूची देता है। चूँकि उस वर्ग के नाम के साथ केवल एक तत्व है (जहाँ तक मैं बता सकता हूँ), आप बस पहले एक को प्राप्त कर सकते हैं (जो कि [0]इसके लिए है - यह एक सरणी की तरह है)।

उसके बाद, आप HTML को बदल सकते हैं .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>

Comments

इस मामले में माता-पिता का आईडी प्राप्त करना आवश्यक नहीं है। document.getElementsByClassNameठीक काम करेगा।

— rvighne

ओपी की सटीक आवश्यकताओं की @rvighne थी कि वह "अधिक विशिष्ट प्राप्त करना चाहेंगे"। सवाल पूछने वाला व्यक्ति पूछ रहा था कि वह अपने डोम ट्री ट्रैवर्सल में कैसे अधिक विशिष्ट हो सकता है। GetElementByClassName का उपयोग भ्रम की स्थिति नहीं थी, लेकिन मैं देख सकता हूं कि कोई व्यक्ति आसानी से कैसे सोच सकता है कि मैं दोनों को आवश्यक रूप से संकेत कर रहा था। वो नहीं हैं। यदि आप एक निश्चित श्रेणी के केवल उन तत्वों को लक्षित करना चाहते हैं जो किसी दिए गए आईडी के एक विशेष नोड के अंतर्गत हैं, तो एक अलग नोड के तहत उसी वर्ग के तत्वों के विपरीत, यह वही है जो आप उपयोग करेंगे।

— जोसेफ मैरिकेल

कॉपी / पेस्ट कोडर्स के सुरक्षा लाभ के लिए इस उत्तर को संपादित करने और बदलने .innerHtmlके .textContentलिए अच्छा हो सकता है ।

— कोडस्ब्ब्लर

Answer 2

आप इसे इस तरह से कर सकते हैं:

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!";

स्पष्टीकरण में:

1. आप के साथ तत्व मिलता है id="foo"।
2. फिर आप उन वस्तुओं को खोजते हैं जो उस वस्तु के भीतर समाहित हैं class="bar"।
3. यह एक सरणी-जैसे नोडलिस्ट देता है, इसलिए आप उस नोडलिस्ट में पहले आइटम का संदर्भ देते हैं
4. आप innerHTMLउस सामग्री को बदलने के लिए उस आइटम को सेट कर सकते हैं।

कैविट्स: कुछ पुराने ब्राउज़र समर्थन नहीं करते हैं getElementsByClassName(उदाहरण के लिए IE के पुराने संस्करण)। लापता होने पर उस फ़ंक्शन को शर्मिंदा किया जा सकता है।

---

यह वह जगह है जहां मैं उस लाइब्रेरी का उपयोग करने की सलाह देता हूं जिसमें स्वयं ब्राउज़र संगतता के बारे में चिंता करने के बजाय सीएसएस 3 चयनकर्ता समर्थन है (किसी और को सभी काम करने दें)। यदि आप ऐसा करने के लिए सिर्फ एक पुस्तकालय चाहते हैं, तो सिज़ल महान काम करेगा। सिज़ल में, यह इस तरह किया जाएगा:

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

---

jQuery में Sizzle लाइब्रेरी बिल्ट-इन और jQuery में है, यह होगा:

$("#foo .bar").html("Goodbye world!");

Comments

धन्यवाद, मुझे document.getElementBy * से परेशानी हो रही थी। jQuery चीजों को इतना आसान बना देता है।

— टान्नर बैबॉक

Answer 3

यदि इसे IE 7 या उससे कम में काम करने की आवश्यकता है तो आपको याद रखना होगा कि getElementsByClassName सभी ब्राउज़रों में मौजूद नहीं है। इस वजह से आप अपने खुद के getElementsByClassName बना सकते हैं या आप यह कोशिश कर सकते हैं।

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!";
    }
}

Comments

getElementsByClassNameIE8 में भी काम नहीं करता है, लेकिन आप querySelectorAllइसके स्थान पर उपयोग कर सकते हैं (वैसे भी बहुत)।

— user113716

@ Your _._ Ӫ ... lol ... आपका सही लेकिन आप अभी मेरे उत्तर को और भी अधिक साबित करते हैं। यदि आपके पृष्ठ को कई ब्राउज़रों में कार्य करने की आवश्यकता है, तो आप getElementsByClassName पर भरोसा नहीं कर सकते। jQuery निश्चित रूप से एक विकल्प होगा लेकिन इसलिए उपरोक्त कोड को हटा दें।

— जॉन हार्टसॉक

हां, मेरा मतलब है कि आपके उत्तर के समर्थन में टिप्पणी करें, लेकिन फिर यह भी इंगित करें कि यह qSAएक शिम में उपयोग करना संभव है ताकि आप अभी भी IE8 में मूल कोड का उपयोग कर सकें। हालांकि अपने समाधान पर करीब से नज़र डालने पर, आपको कुछ चीजें मिल गई हैं जिन्हें ठीक करने की आवश्यकता है।

— user113716

@ Do _._ Ӫ ... जिज्ञासु तुम क्या देखते हो ... क्योंकि मैं इसे नहीं देख रहा हूं।

— जॉन हार्टसॉक

var i = 0, var child = fooDiv.childNodes[i]अमान्य है। i <= fooDiv.childNodesवास्तव में कोई मतलब नहीं है। childNode.className.test("bar")कोई childNodeचर नहीं है, और एक स्ट्रिंग में एक test()विधि नहीं है ।

— user113716

Answer 4

पुनरावर्ती समारोह:

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);
        }
    }
}

Comments

ऊपर के नमूने में एक मामूली बग है। दूसरे रास्ते में तुरंत लौटने के बजाय आपको जांचना होगा कि क्या कुछ पहले मिला था। अन्यथा अन्य बाल नोड्स के माध्यम से लूप नहीं किया जाएगा। कुछ इस तरह से: if (elementToReturn) {return elementToReturn; }

— जननिक

Answer 5

ऐसा करने का सबसे आसान तरीका है:

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}]`);
}

Answer 6

आपको document.getElementByID का उपयोग नहीं करना चाहिए क्योंकि इसका काम केवल क्लाइंट साइड नियंत्रणों के लिए होता है जो आईडी निर्धारित होते हैं। आपको नीचे दिए गए उदाहरण के बजाय 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

यदि आप किसी भी ऑपरेशन को हटाना चाहते हैं तो बस जोड़ दें "।" पीछे और संचालन करते हैं

Comments

हिरण को मारने के लिए थर्मोन्यूक्लियर हथियार का उपयोग करना काम करेगा, लेकिन मामूली ओवरकिल है। किसी तत्व का चयन करने के लिए मल्टी-केबी jQuery लाइब्रेरी का उपयोग करना जब जावास्क्रिप्ट प्रदान करता है कि इसमें आधार कोड की कार्यक्षमता थोड़ी अधिक है।

— दिनजीर