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

Question

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

<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] है-यह एक सरणी की तरह है)।

फिर, आप .innerHTML के साथ एचटीएमएल बदल सकते हैं।

targetDiv.innerHTML = "Goodbye world!"; 

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

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

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. एक सरणी की तरह nodeList रिटर्न यही कारण है, आपको लगता है कि nodeList
4. में पहला आइटम संदर्भ तो तब आप उस आइटम के innerHTML सेट इसकी सामग्री को बदलने के लिए कर सकते हैं।

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

---

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

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

---

jQuery कड़ाके की धूप पुस्तकालय में निर्मित है और jQuery में, इस होगा:

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

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

Answer 4

आप 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 

अगर आप किसी भी निकालने संपादित किसी भी आपरेशन तो बस जोड़ना चाहते हैं पीछे और क्या संचालन

Answer 5

पुनरावर्ती क्रिया:

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

Answer 6

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

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