आईडी के बिना HTML तत्व का उपयोग कैसे करें?

Question

उदाहरण के लिए नीचे स्निपेट में - मैं एच 1 तत्व को मूल तत्व (हेडर-आंतरिक div) की आईडी जानने के लिए कैसे उपयोग करूं?

<div id='header-inner'> 
    <div class='titlewrapper'> 
     <h1 class='title'> 
     Some text I want to change 
     </h1> 
    </div> 
</div> 

धन्यवाद!

Answer 1

function findFirstDescendant(parent, tagname) 
{ 
    parent = document.getElementById(parent); 
    var descendants = parent.getElementsByTagName(tagname); 
    if (descendants.length) 
     return descendants[0]; 
    return null; 
} 

var header = findFirstDescendant("header-inner", "h1"); 

ढूँढता गई ID वाला तत्व है, किसी दिए गए टैग नाम के साथ वंश के लिए प्रश्नों, पहले एक देता है। आप अन्य मानदंडों द्वारा फ़िल्टर करने के लिए descendants पर भी लूप कर सकते हैं; यदि आप उस दिशा में आगे बढ़ना शुरू करते हैं, तो मैं आपको पूर्व-निर्मित लाइब्रेरी जैसे jQuery के रूप में जांचने की सलाह देता हूं (आपको इस सामान को लिखने का एक अच्छा सौदा बचाएगा, यह कुछ हद तक मुश्किल हो जाता है)।

Answer 2

आप सुनिश्चित करें कि आपके div में केवल एक ही एच 1 तत्व है कि वहाँ रहे हैं:

var parent = document.getElementById('header-inner'); 
var element = parent.GetElementsByTagName('h1')[0]; 

वंश के माध्यम से जा रहे हैं, के रूप में Shog9 से पता चला है, भी एक अच्छा तरीका है।

Answer 3

यहाँ मैं एक div में एच 1 तत्वों मूल्य प्राप्त जहां एच 1 तत्व है जो सीएसएस वर्ग = "myheader" है:

<div id="mydiv"> 
    <h1 class="myheader">Hello</h1> 
</div> 

मैं भी सिफारिश करेंगे:

var nodes = document.getElementById("mydiv") 
        .getElementsByTagName("H1"); 

for(i=0;i<nodes.length;i++) 
{ 
    if(nodes.item(i).getAttribute("class") == "myheader") 
     alert(nodes.item(i).innerHTML); 
}  

यहाँ मार्कअप है jQuery का उपयोग करने के लिए यदि आपको अपने डोम के लिए भारी पार्सिंग की आवश्यकता है।

Answer 4

अपने वर्तमान मार्कअप के साथ यह कर का सबसे सरल तरीका है:

document.getElementById('header-inner').getElementsByTagName('h1')[0].innerHTML = 'new text';

यह मानती है कि आपके H1 टैग हमेशा 'header-inner' तत्व के भीतर पहली एक है।

Answer 5

बच्चों के नोड्स प्राप्त करने के लिए, obj.childNodes का उपयोग करें, जो एक संग्रह ऑब्जेक्ट देता है।

पहला बच्चा पाने के लिए, list[0] का उपयोग करें, जो एक नोड देता है।

तो पूरा कोड होना चाहिए:

var div = document.getElementById('header-inner'); 
var divTitleWrapper = div.childNodes[0]; 
var h1 = divTitleWrapper.childNodes[0]; 

आप सभी बच्चों से अधिक पुनरावृति करना चाहते हैं, की तुलना अगर वे वर्ग "शीर्षक" के हैं, आप पाश और className विशेषता के लिए एक का उपयोग कर पुनरावृति कर सकते हैं।

कोड होना चाहिए:

var h1 = null; 
var nodeList = divTitleWrapper.childNodes; 
for (i =0;i < nodeList.length;i++){ 
    var node = nodeList[i]; 
    if(node.className == 'title' && node.tagName == 'H1'){ 
     h1 = node; 
    } 
} 

Answer 6

आप के रूप में कुछ पोस्टर ने उल्लेख किया jQuery उपयोग करने के लिए थे, तो आप (ताकि तरह बहुत आसानी से तत्व के लिए उपयोग हो सकता है हालांकि तकनीकी तौर पर यह मिलान तत्वों का एक संग्रह वापसी होगी एक पुस्तकालय का उपयोग करना JQuery की तरह इस तुच्छ सामान्य तरीके अन्य पदों में उल्लिखित की तुलना में तरह बातें करता है

var element = $('#header-inner h1'); 

: अगर वहाँ एक से अधिक एच 1 वंशज) थे। फिर एक बार जब आप किसी jQuery ऑब्जेक्ट में इसका संदर्भ लेंगे, तो आपके पास अपनी सामग्री और उपस्थिति को आसानी से कुशलतापूर्वक उपयोग करने के लिए और भी अधिक फ़ंक्शंस उपलब्ध हैं।