मैं जावास्क्रिप्ट के साथ किसी दस्तावेज़ में सभी HTML आईडी का आकलन कैसे करूं?

Question

मैं HTML दस्तावेज़ में प्रत्येक ऑब्जेक्ट के लिए प्रत्येक आईडी (या नाम) खोजने के लिए जावास्क्रिप्ट का उपयोग करने में सक्षम होना चाहता हूं ताकि उन्हें पृष्ठ के नीचे मुद्रित किया जा सके।

जो कुछ मैं पूरा करने की कोशिश कर रहा हूं उसे और समझने के लिए, मुझे समझाएं। मैं समय-समय पर संपत्ति अनुप्रयोगों, किराये की लिस्टिंग, विस्तृत चिकित्सा वेबसाइट उपयोगकर्ता पंजीकरण फॉर्म जैसी चीजों के लिए बड़े रूपों का निर्माण करता हूं। जैसा कि मैं अब करता हूं, मैं फॉर्म बनाता हूं, आईडी और नाम असाइन करता हूं और तय करता हूं कि कौन से मूल्यों की आवश्यकता है और ऐसा। फिर जब मैं फॉर्म के लिए PHP फॉर्म सत्यापन और डेटाबेस सम्मिलित भाग का निर्माण करता हूं, तो मैं मैन्युअल रूप से HTML के माध्यम से जा रहा हूं और इनपुट आईडी सत्यापन और डेटाबेस सम्मिलन के लिए $ _post सरणी से संदर्भित करने के लिए सभी आईडी को खींच रहा हूं। यह बहुत समय लेने वाला और वास्तविक दर्द रहा है, जो अक्सर टाइपिंग त्रुटियों के साथ लगी हुई है।

जिस फॉर्म में मैं वर्तमान में काम कर रहा हूं वह बहुत बड़ा है, और मैं एक जावास्क्रिप्ट फ़ंक्शन लिखूंगा जो मैं पृष्ठ की अपनी स्थानीय प्रतिलिपि पर सभी आईडी सूचीबद्ध करने के लिए चला सकता हूं ताकि मैं नहीं कर सकूं उन्हें एक-एक करके कॉपी और पेस्ट करना होगा, या उन्हें लिखना होगा। मैं तब भी जावास्क्रिप्ट लूप का उपयोग आईडी नामों के चारों ओर PHP कोड को मुद्रित करने के लिए कर सकता हूं ताकि मुझे केवल सूची की प्रतिलिपि बनाना पड़े और आईडी की जरूरत को हल्का ढंग से संपादित करना पड़े ... मुझे उम्मीद है कि आप लोग मिलेंगे विचार।

कोई भी सुझाव है कि मैं सभी आईडी को सरणी में कैसे छोड़ सकता हूं, या यदि पहले से ही कोई सरणी है तो मैं एक्सेस कर सकता हूं और लूप (मुझे Google पर कुछ भी नहीं मिला)। इसके अलावा, किसी भी प्रवाह के साथ बड़े रूपों के उत्पादन की प्रक्रिया को तेज करने के लिए कोई सुझाव जो PHP उत्पन्न करता है या इसे मेरी वर्तमान विधि से तेज़ी से बनाता है, इसकी सराहना की जाएगी!

Answer 1

आप के माध्यम से

document.querySelectorAll('*[id]') 

ऐसा करने के काम करना चाहिए कर सकते हैं modern browsers पर

।

आप आईडी के साथ myElement के सभी सन्तान की जरूरत है, तो

myElement.querySelectorAll('*[id]') 

आप <span id=""> बाहर करने के लिए वास्तव में सावधान रहना चाहते हैं, तो शायद

document.querySelectorAll('*[id]:not([id=""])') 

---

तो पुराने के साथ संगतता ब्राउज़रों की आवश्यकता है

var allElements = document.getElementsByTagName("*"); 
var allIds = []; 
for (var i = 0, n = allElements.length; i < n; ++i) { 
    var el = allElements[i]; 
    if (el.id) { allIds.push(el.id); } 
} 

आपको allIds में सभी आईडी के साथ छोड़ देना चाहिए।

यदि आपको लगता है कि आपको किसी विशेष फॉर्म नोड के तहत आईडी को गिनने की आवश्यकता है, तो आप myFormNode.getElementsByTagName के साथ प्रतिस्थापित कर सकते हैं।

तुम दोनों आईडी और नाम शामिल करना चाहते हैं, तो इसके बाद के संस्करण if नीचे डाल

else if (el.name) { allIds.push(el.name); } 

।

Answer 2

वाइल्डकार्ड के साथ सभी टैग प्राप्त करें:

var allElements = document.getElementsByTagName('*'); 
for(var i = 0; i < allElements.length; i++) { 
    // ensure the element has an Id that is not empty and does exist 
    // and string other than empty, '', will return true 
    allElements[i].id && console.log(allElements[i].id); 
} 

Answer 3

jQuery

साथ

$('*').map(function() { 
    return this.id || null; 
}).get().join(','); 

इस डोम में सभी तत्वों को हो जाता है, और प्रत्येक पर एक समारोह आईडी लौटने के लिए चलाता है (और यदि undefined , null लौटने से कुछ भी वापस नहीं आएगा। यह एक jQuery ऑब्जेक्ट देता है जिसे उसके बाद get() के साथ एक जावास्क्रिप्ट सरणी में परिवर्तित किया जाता है और फिर इसे आईडी के अल्पविराम से अलग स्ट्रिंग में परिवर्तित किया जाता है।

इस पृष्ठ पर यह कोशिश करो और आप

"सूचित-कंटेनर, ओवरले हेडर, कस्टम हेडर, शीर्षक, portalLink, topbar, hlinks, hlinks उपयोगकर्ता, hlinks-एनएवी, hlinks-रिवाज मिलता है, hsearch, खोज, hlogo, hmenus, नव-सवाल, नव-टैग, नव-उन, नव-बैज, नव-अनुत्तरित, नव-askquestion, सामग्री, प्रश्न-शीर्ष, mainbar, प्रश्न, संपादित-टैग, लिंक-पोस्ट 7115022, बंद प्रश्न-7115022, झंडा बाद 7115022, टिप्पणी-7115022, ऐड-टिप्पणी-7115022, टिप्पणी-लिंक-7115022, उत्तर, उत्तर-हेडर, टैब, का जवाब-7115033, लिंक के बाद 7115033, flag- बाद 7115033, टिप्पणी-7115033, ऐड-टिप्पणी-7115033, टिप्पणी-लिंक-7115033, का जवाब-7115042, लिंक के बाद 7115042, झंडा बाद 7115042, टिप्पणी-7115042, ऐड-टिप्पणी-7115042, टिप्पणी-लिंक- 7115042, का जवाब-7115043, लिंक के बाद 7115043, हटाने-बाद 7115043, झंडा बाद 7115043 बाद संपादक 7115043, wmd बटन-बार-7115043, wmd बटन पंक्ति-7115043, wmd-बोल्ड बटन-7115043, wmd-इटैलिक बटन-7115043, wmd-spacer1-7115043, wmd-लिंक बटन -7115043, wmd-उद्धरण बटन-7115043, wmd-कोड-बटन-7115043, wmd छवि बटन-7115043, wmd-spacer2-7115043, wmd-olist बटन-7115043, wmd-ulist बटन-7115043, wmd -heading बटन-7115043, wmd घंटे का बटन-7115043, wmd-spacer3-7115043, wmd-पूर्ववत बटन-7115043, wmd-फिर से करना बटन-7115043, wmd सहायता बटन-7115043, wmd-इनपुट-7115043 , मसौदा-बचाया-7115043, communitymode-7115043, wmd-पूर्वावलोकन-7115043, fkey, लेखक, संपादित-टिप्पणी-7115043, संपादित-टिप्पणी त्रुटि-7115043, प्रस्तुत बटन-7115043, टिप्पणी-7115043, ऐड-टिप्पणी-7115043 , टिप्पणी-लिंक-7115043, बाद फार्म, के बाद संपादक, wmd बटन बार, wmd-इनपुट, मसौदा-बचाया, communitymode, wmd-पूर्वावलोकन, fkey, लेखक, प्रस्तुत बटन, शो-संपादक बटन, साइडबार , qinfo, adzerk2, समाचार पत्र-विज्ञापन, समाचार पत्र-विज्ञापन-शीर्ष, समाचार पत्र से साइन अप-कंटेनर, समाचार पत्र से साइन अप, समाचार पत्र-पूर्वावलोकन-कंटेनर, समाचार पत्र-पूर्वावलोकन, ज से संबंधित, फीड-लिंक, फ़ीड लिंक-पाठ, सुंदर बनाना -lang, foo टेर, पाद-मेनू, पाद-साइटों, पाद-स्वभाव, svnrev, कॉपीराइट "

Answer 4

jQuery चयनकर्ता $('[id]') एक id विशेषता के साथ सभी तत्वों को मिल जाएगा:

$('[id]').each(function() { 
    do_something(this.id); 
}); 

कार्य उदाहरण यहाँ: http://jsfiddle.net/RichieHindle/yzMjJ/2/

Answer 5

यदि आप एक काफी आधुनिक ब्राउज़र का उपयोग करके अपना विकास कर रहे हैं, तो आप querySelectorAll() का उपयोग कर सकते हैं, फिर संग्रह को पुन: स्थापित करने के लिए Array.prototype.forEach का उपयोग करें।

var ids = document.querySelectorAll('[id]'); 

Array.prototype.forEach.call(ids, function(el, i) { 
    // "el" is your element 
    console.log(el.id); // log the ID 
}); 

---

आप आईडी की एक सरणी चाहते हैं, तो Array.prototype.map का उपयोग करें:

सभी की

var arr = Array.prototype.map.call(ids, function(el, i) { 
    return el.id; 
}); 

Answer 6

पहले, मैं अत्यधिक jQuery की सिफारिश करेंगे। इसने मेरे जावास्क्रिप्ट विकास को बहुत सरल बना दिया है। (RichieHindle का जवाब देखें)

दूसरा, मुझे पता है कि बहुत से ब्राउज़र प्रत्यक्ष (तेज़) पहुंच के लिए आईडी की एक सूची रखते हैं, लेकिन मुझे उन तक पहुंचने का कोई तरीका नहीं पता है। यह शायद ब्राउज़र-विशिष्ट होगा, इसलिए शायद यह सबसे अच्छा मार्ग नहीं है।

अंत में, कोड:

var elementList = document.getElementsByTagName("*"); 
var idList = []; 
for (var i in elementList) { 
    if (elementList[i].id != "") { 
    idList.push(elementList[i].id); 
    } 
} 
// Do something with your array of ids 

Answer 7

अच्छी तरह से

है, क्योंकि यह एक रूप है, im यकीन है कि आप केवल प्रपत्र तत्वों से अधिक पुनरावृति करना चाहते हैं और नहीं दस्तावेज़ में सभी टैग (href की तरह, div के है आदि ..)

for (var i=0; i < form.elements.length; i++) { 
    var elementId = form.elements[i].id; 
}