DOM तकनीकें: माता-पिता, बच्चे और पड़ोसी तत्व। शुद्ध जावास्क्रिप्ट में DOM हेरफेर चाइल्ड नोड्स की गिनती

आमतौर पर, डेवलपर्स jQuery का उपयोग तब करते हैं जब उन्हें DOM के साथ कुछ करने की आवश्यकता होती है। हालाँकि, लगभग किसी भी DOM हेरफेर को इसके DOM API का उपयोग करके शुद्ध जावास्क्रिप्ट में किया जा सकता है।

आइए इस एपीआई को अधिक विस्तार से देखें:

अंत में, आप अपनी स्वयं की सरल DOM लाइब्रेरी लिखेंगे जिसका उपयोग किसी भी प्रोजेक्ट में किया जा सकता है।

DOM क्वेरीज़ .querySelector() विधि का उपयोग करके निष्पादित की जाती हैं, जो एक तर्क के रूप में एक मनमाना CSS चयनकर्ता लेती है।

स्थिरांक myElement = document.querySelector("#foo > div.bar")

यह पहला मिलान तत्व लौटाएगा। आप इसके विपरीत कर सकते हैं - जांचें कि तत्व चयनकर्ता से मेल खाता है या नहीं:

MyElement.matches("div.bar") === सत्य

यदि आप चयनकर्ता से मेल खाने वाले सभी तत्व प्राप्त करना चाहते हैं, तो निम्नलिखित निर्माण का उपयोग करें:

स्थिरांक myElements = document.querySelectorAll(.bar")

यदि आप जानते हैं कि आप किस मूल तत्व का संदर्भ देना चाहते हैं, तो आप पूरे कोड में खोजने के बजाय बस उसके बच्चों के माध्यम से खोज सकते हैं:

स्थिरांक myChildElemet = myElement.querySelector("input") // इसके बजाय: // document.querySelector("#foo > div.bar इनपुट")

प्रश्न उठता है: फिर .getElementsByTagName() जैसी अन्य, कम सुविधाजनक विधियों का उपयोग क्यों करें? एक छोटी सी समस्या है - .querySelector() का आउटपुट अपडेट नहीं होता है, और जब हम कोई नया तत्व जोड़ते हैं (देखें), तो यह नहीं बदलेगा।

स्थिरांक तत्व1 = दस्तावेज़.querySelectorAll("div") स्थिरांक तत्व2 = दस्तावेज़.getElementsByTagName("div") स्थिरांक newElement = दस्तावेज़.createElement("div") दस्तावेज़.body.appendChild(newElement) तत्व1.लंबाई === तत्व2.लंबाई // असत्य

साथ ही querySelectorAll() सब कुछ एक सूची में एकत्रित करता है, जो इसे बहुत कुशल नहीं बनाता है।

इसके अलावा, .querySelectorAll() में दो छोटी चेतावनी हैं। आप केवल परिणामों पर विधियों को कॉल नहीं कर सकते हैं और उनसे प्रत्येक पर लागू होने की अपेक्षा नहीं कर सकते हैं (जैसे कि आप jQuery के साथ करने के आदी हो सकते हैं)। किसी भी स्थिति में, आपको एक लूप में सभी तत्वों के माध्यम से पुनरावृति करने की आवश्यकता होगी। दूसरा, लौटाया गया ऑब्जेक्ट तत्वों की एक सूची है, कोई सरणी नहीं। इसलिए, सरणी विधियाँ काम नहीं करेंगी. बेशक, सूचियों के लिए कुछ तरीके हैं, जैसे .forEach(), लेकिन अफसोस, वे सभी मामलों के लिए उपयुक्त नहीं हैं। इसलिए सूची को एक सरणी में बदलना बेहतर है:

// Array.from() का उपयोग करना Array.from(myElements).forEach(doSomethingWithEachElement) // या सरणी प्रोटोटाइप (पूर्व-ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // सरल: .forEach.call( myElements , doSomethingWithEachElement)

प्रत्येक तत्व में कुछ गुण होते हैं जो "परिवार" को संदर्भित करते हैं।

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSiling myElement.nextElementSiling

चूंकि एलिमेंट इंटरफ़ेस नोड इंटरफ़ेस से विरासत में मिला है, इसलिए निम्नलिखित गुण भी मौजूद हैं:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSiling myElement.nextSiling myElement.parentNode myElement.parentElement

पहला गुण तत्व को संदर्भित करता है, और अंतिम वाले (.parentElement के अपवाद के साथ) किसी भी प्रकार के तत्वों की सूची हो सकते हैं। तदनुसार, आप तत्व प्रकार की जांच कर सकते हैं:

MyElement.firstChild.nodeType === 3 // यह तत्व एक टेक्स्ट नोड होगा

एक नई कक्षा जोड़ना बहुत सरल है:

MyElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

किसी तत्व में गुण जोड़ना किसी भी वस्तु के समान है:

// विशेषता मान प्राप्त करें const value = myElement.value // विशेषता को एक तत्व संपत्ति के रूप में सेट करें myElement.value = "foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

आप .getAttribute() , .setAttribute() और .removeAttribute() तरीकों का उपयोग कर सकते हैं। वे तत्व की HTML विशेषताओं को तुरंत बदल देंगे (DOM गुणों के विपरीत), जिसके कारण ब्राउज़र फिर से प्रस्तुत होगा (आप ब्राउज़र के डेवलपर टूल का उपयोग करके तत्व की जांच करके सभी परिवर्तन देख सकते हैं)। ऐसे पुनर्निर्देशन के लिए न केवल DOM गुणों को सेट करने की तुलना में अधिक संसाधनों की आवश्यकता होती है, बल्कि अप्रत्याशित त्रुटियाँ भी हो सकती हैं।

आमतौर पर, उनका उपयोग उन तत्वों के लिए किया जाता है जिनमें संबंधित DOM गुण नहीं होते हैं, जैसे कि कोलस्पैन। या यदि उनका उपयोग वास्तव में आवश्यक है, उदाहरण के लिए विरासत में मिलने पर HTML गुणों के लिए (देखें)।

इन्हें अन्य संपत्तियों की तरह ही जोड़ा जाता है:

MyElement.style.marginLeft = "2em"

कुछ विशिष्ट गुणों को .style का उपयोग करके सेट किया जा सकता है, लेकिन यदि आप कुछ गणनाओं के बाद मान प्राप्त करना चाहते हैं, तो window.getComputedStyle() का उपयोग करना बेहतर है। यह विधि एक तत्व प्राप्त करती है और एक CSSStyleDeclaration लौटाती है जिसमें तत्व और उसके मूल दोनों की शैलियाँ शामिल होती हैं:

window.getComputedStyle(myElement).getPropertyValue("मार्जिन-बाएं")

आप तत्वों को स्थानांतरित कर सकते हैं:

// element1 को element2 element1.appendChild(element2) के अंतिम चाइल्ड के रूप में जोड़ें // element2 को element3 element1.insertBefore(element2, element3) से पहले element1 के चाइल्ड के रूप में डालें।

यदि आप इसे स्थानांतरित नहीं करना चाहते हैं, लेकिन एक प्रति सम्मिलित करना चाहते हैं, तो इसका उपयोग करें:

// एक क्लोन बनाएं const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

.cloneNode() विधि एक तर्क के रूप में एक बूलियन मान लेती है, और यदि सत्य है, तो क्लोन भी करती है बाल तत्व.

बेशक आप नए तत्व बना सकते हैं:

const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("कुछ टेक्स्ट")

और फिर उन्हें ऊपर दिखाए अनुसार डालें। आप किसी तत्व को सीधे नहीं हटा सकते, लेकिन आप इसे मूल तत्व के माध्यम से कर सकते हैं:

MyParentElement.removeChild(myElement)

आप अप्रत्यक्ष रूप से भी संपर्क कर सकते हैं:

MyElement.parentNode.removeChild(myElement)

प्रत्येक तत्व में .innerHTML और .textContent जैसे गुण होते हैं, उनमें HTML कोड होता है और, तदनुसार, पाठ स्वयं होता है। निम्नलिखित उदाहरण किसी तत्व की सामग्री को बदलता है:

// HTML बदलें myElement.innerHTML = ` नई सामग्री ( el.addEventListener('change', function (event) ( console.log(event.target.value) )) ))

ऐसा करने के लिए, .preventDefault() विधि का उपयोग करें, जो मानक क्रियाओं को अवरुद्ध करती है। उदाहरण के लिए, यदि क्लाइंट-साइड प्राधिकरण सफल नहीं हुआ तो यह फ़ॉर्म सबमिशन को रोक देगा:

MyForm.addEventListener("submit", function (event) ( const name = this.querySelector("#name") if (name.value === "Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

यदि आपके पास चाइल्ड एलिमेंट को एक विशिष्ट इवेंट हैंडलर सौंपा गया है और उसी इवेंट के लिए पैरेंट को दूसरा इवेंट हैंडलर सौंपा गया है, तो .stopPropagation() विधि मदद करेगी।

जैसा कि पहले कहा गया है, .addEventListener() विधि कॉन्फ़िगरेशन ऑब्जेक्ट के रूप में एक वैकल्पिक तीसरा तर्क लेती है। इस ऑब्जेक्ट में निम्नलिखित में से कोई भी बूलियन गुण होना चाहिए (सभी डिफ़ॉल्ट रूप से गलत पर सेट हैं):

• कैप्चर: इवेंट को DOM में नीचे किसी भी अन्य तत्व से पहले इस तत्व से जोड़ा जाएगा;
• एक बार: एक ईवेंट केवल एक बार सौंपा जा सकता है;
• निष्क्रिय: इवेंट.प्रिवेंटडिफॉल्ट() को नजरअंदाज कर दिया जाएगा (त्रुटि के दौरान अपवाद)।

सबसे आम संपत्ति .capture है, और यह इतनी आम है कि इसके लिए एक शॉर्टकट है: इसे कॉन्फ़िगरेशन ऑब्जेक्ट में पास करने के बजाय, बस इसका मान यहां पास करें:

MyElement.addEventListener(प्रकार, श्रोता, सत्य)

हैंडलर को .removeEventListener() विधि का उपयोग करके हटा दिया जाता है, जिसमें दो तर्क होते हैं: ईवेंट प्रकार और हटाने के लिए हैंडलर का एक संदर्भ। उदाहरण के लिए, एक बार संपत्ति को इस तरह लागू किया जा सकता है:

MyElement.addEventListener("परिवर्तन", फ़ंक्शन श्रोता (इवेंट) ( console.log(event.type + " पर ट्रिगर हो गया " + यह) this.removeEventListener("परिवर्तन", श्रोता) ))

मान लीजिए कि आपके पास एक तत्व है और आप उसके सभी बच्चों के लिए एक इवेंट हैंडलर जोड़ना चाहते हैं। फिर आपको ऊपर दिखाए गए अनुसार myForm.querySelectorAll("input") विधि का उपयोग करके उनके माध्यम से लूप करना होगा। हालाँकि, आप बस फॉर्म में तत्व जोड़ सकते हैं और इवेंट.टारगेट का उपयोग करके उनकी सामग्री की जांच कर सकते हैं।

MyForm.addEventListener("परिवर्तन", फ़ंक्शन (इवेंट) ( स्थिरांक लक्ष्य = इवेंट.लक्ष्य यदि (target.matches("इनपुट")) ( कंसोल.लॉग(target.value) ) ))

और इस पद्धति का एक और फायदा यह है कि हैंडलर स्वचालित रूप से नए चाइल्ड तत्वों से जुड़ जाएगा।

एनीमेशन जोड़ने का सबसे आसान तरीका ट्रांज़िशन प्रॉपर्टी के साथ सीएसएस का उपयोग करना है। लेकिन अधिक लचीलेपन के लिए (उदाहरण के लिए, गेम के लिए), जावास्क्रिप्ट बेहतर अनुकूल है।

एनीमेशन समाप्त होने तक window.setTimeout() विधि को कॉल करना एक अच्छा विचार नहीं है, क्योंकि आपका एप्लिकेशन फ्रीज हो सकता है, खासकर पर मोबाइल उपकरणों. अगले पुनर्निर्देशन तक सभी परिवर्तनों को सहेजने के लिए window.requestAnimationFrame() का उपयोग करना बेहतर है। यह एक फ़ंक्शन को एक तर्क के रूप में लेता है, जो बदले में एक टाइमस्टैम्प प्राप्त करता है:

स्थिरांक प्रारंभ = window.performance.now() स्थिरांक अवधि = 2000 window.requestAnimationFrame(फ़ंक्शन फ़ेडइन (अभी)) ( स्थिरांक प्रगति = अभी - प्रारंभ myElement.style.opacity = प्रगति / अवधि यदि (प्रगति)< duration) { window.requestAnimationFrame(fadeIn) } }

इस तरह, बहुत सहज एनीमेशन प्राप्त किया जाता है। मार्क ब्राउन ने अपने लेख में इस विषय पर चर्चा की है।

तथ्य यह है कि DOM में आपको तत्वों पर कोई भी ऑपरेशन करने के लिए हर समय तत्वों पर पुनरावृत्ति करनी पड़ती है, जो jQuery के $("।foo").css((color: "red")) सिंटैक्स की तुलना में काफी कठिन लग सकता है। लेकिन इस कार्य को आसान बनाने के लिए आप अपनी कुछ विधियाँ क्यों नहीं लिखते?

स्थिरांक $ = फ़ंक्शन $ (चयनकर्ता, संदर्भ = दस्तावेज़) ( स्थिरांक तत्व = Array.from(context.querySelectorAll(selector)) वापसी ( तत्व, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) इसे लौटाएं ), CSS (newCss) ( this.elements.forEach(element => ( object.assign(element.style, newCss) )) इसे लौटाएं ), पर (इवेंट, हैंडलर, विकल्प) ( this.elements .forEach(element => ( element.addEventListener(इवेंट, हैंडलर, विकल्प) )) इसे वापस करें ) ) )

जटिल और भारी वेब एप्लिकेशन इन दिनों आम हो गए हैं। क्रॉस-ब्राउज़र और jQuery जैसी उपयोग में आसान लाइब्रेरी अपनी समृद्ध कार्यक्षमता के साथ तुरंत DOM में हेरफेर करने में बहुत मदद कर सकती हैं। इसलिए, यह आश्चर्य की बात नहीं है कि कई डेवलपर्स मूल डोम एपीआई के साथ काम करने की तुलना में ऐसी लाइब्रेरी का अधिक बार उपयोग करते हैं, जिसके साथ कई समस्याएं थीं। हालाँकि ब्राउज़र अंतर अभी भी एक मुद्दा है, DOM अब 5-6 साल पहले की तुलना में बेहतर स्थिति में है जब jQuery लोकप्रियता हासिल कर रहा था।

इस लेख में, मैं माता-पिता, बच्चे और पड़ोसी संबंधों पर ध्यान केंद्रित करते हुए DOM की HTML हेरफेर क्षमताओं का प्रदर्शन करूँगा। अंत में, मैं इन सुविधाओं के लिए ब्राउज़र समर्थन के बारे में जानकारी दूंगा, लेकिन ध्यान रखें कि मूल कार्यक्षमता के कार्यान्वयन में बग और विसंगतियों की उपस्थिति के कारण jQuery जैसी लाइब्रेरी अभी भी एक अच्छा विकल्प है।

प्रदर्शन के लिए मैं निम्नलिखित का उपयोग करूंगा HTML मार्कअप, हम इसे पूरे लेख में कई बार बदलेंगे:

• उदाहरण एक
• उदाहरण दो
• उदाहरण तीन
• उदाहरण चार
• उदाहरण पांच
• उदाहरण छह

Var myList = document.getElementById("myList"); कंसोल.लॉग(myList.children.length); // 6 कंसोल.लॉग(myList.childElementCount); // 6

जैसा कि आप देख सकते हैं, परिणाम समान हैं, हालाँकि उपयोग की जाने वाली तकनीकें भिन्न हैं। पहले मामले में मैं बच्चों की संपत्ति का उपयोग करता हूं। यह केवल-पढ़ने के लिए संपत्ति है और अनुरोधित तत्व के भीतर निहित HTML तत्वों का संग्रह लौटाता है; उनकी संख्या गिनने के लिए, मैं इस संग्रह की लंबाई संपत्ति का उपयोग करता हूं।

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

मैं childNodes.length (children.length के बजाय) का उपयोग करने का प्रयास कर सकता हूं, लेकिन परिणाम देखें:

Var myList = document.getElementById("myList"); कंसोल.लॉग(myList.childNodes.length); // 13

यह 13 लौटाता है क्योंकि चाइल्डनोड्स रिक्त स्थान सहित सभी नोड्स का एक संग्रह है - यदि आप चाइल्ड नोड्स और चाइल्ड एलिमेंट नोड्स के बीच अंतर के बारे में परवाह करते हैं तो इसे ध्यान में रखें।

यह जांचने के लिए कि क्या किसी तत्व में चाइल्ड नोड्स हैं, मैं hasChildNodes() विधि का उपयोग कर सकता हूं। विधि उनकी उपस्थिति या अनुपस्थिति को इंगित करते हुए एक बूलियन मान लौटाती है:

Var myList = document.getElementById("myList"); कंसोल.लॉग(myList.hasChildNodes()); // सत्य

मुझे पता है कि मेरी सूची में चाइल्ड नोड हैं, लेकिन मैं HTML बदल सकता हूं ताकि कोई भी न रहे; मार्कअप अब इस तरह दिखता है:

और यहाँ hasChildNodes() को फिर से चलाने का परिणाम है:

कंसोल.लॉग(myList.hasChildNodes()); // सत्य

विधि अभी भी सत्य लौटती है। हालाँकि सूची में कोई तत्व नहीं है, इसमें एक स्थान है, जो एक वैध नोड प्रकार है। यह विधिसभी नोड्स को ध्यान में रखता है, न कि केवल तत्व नोड्स को। hasChildNodes() को गलत लौटाने के लिए, हमें मार्कअप को फिर से बदलना होगा:

और अब अपेक्षित परिणाम कंसोल में प्रदर्शित होता है:

कंसोल.लॉग(myList.hasChildNodes()); // असत्य

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

ऐसी तकनीकें हैं जिनका उपयोग आप DOM से तत्वों को जोड़ने और हटाने के लिए कर सकते हैं। उनमें से सबसे प्रसिद्ध createElement() और appendChild() विधियों के संयोजन पर आधारित है।

Var myEl = document.createElement("div"); document.body.appendChild(myEl);

इस मामले में, मैं createElement() विधि का उपयोग करके बनाता हूं और फिर इसे body में जोड़ता हूं। यह बहुत सरल है और आपने शायद पहले भी इस तकनीक का उपयोग किया होगा।

लेकिन विशेष रूप से बनाए गए तत्व को सम्मिलित करने के बजाय, मैं एपेंडचाइल्ड() का भी उपयोग कर सकता हूं और मौजूदा तत्व को स्थानांतरित कर सकता हूं। मान लीजिए कि हमारे पास निम्नलिखित मार्कअप है:

• उदाहरण एक
• उदाहरण दो
• उदाहरण तीन
• उदाहरण चार
• उदाहरण पांच
• उदाहरण छह

उदाहरण पाठ

मैं निम्नलिखित कोड के साथ सूची का स्थान बदल सकता हूं:

Var myList = document.getElementById("myList"), कंटेनर = document.getElementById("c"); कंटेनर.appendChild(myList);

अंतिम DOM इस तरह दिखेगा:

उदाहरण पाठ

• उदाहरण एक
• उदाहरण दो
• उदाहरण तीन
• उदाहरण चार
• उदाहरण पांच
• उदाहरण छह

ध्यान दें कि पूरी सूची को उसके स्थान (पैराग्राफ के ऊपर) से हटा दिया गया है और फिर समापन निकाय से पहले उसके बाद डाला गया है। जबकि appendChild() विधि का उपयोग आम तौर पर createElement() के साथ बनाए गए तत्वों को जोड़ने के लिए किया जाता है, इसका उपयोग मौजूदा तत्वों को स्थानांतरित करने के लिए भी किया जा सकता है।

मैं deleteChild() का उपयोग करके DOM से चाइल्ड तत्व को पूरी तरह से हटा भी सकता हूं। पिछले उदाहरण से हमारी सूची को हटाने का तरीका यहां दिया गया है:

Var myList = document.getElementById("myList"), कंटेनर = document.getElementById("c"); कंटेनर.removeChild(myList);

तत्व अब हटा दिया गया है. रिमूव चाइल्ड () विधि हटाए गए तत्व को लौटाती है ताकि बाद में जरूरत पड़ने पर मैं इसे सहेज सकूं।

वर myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);

एक ChildNode.remove() विधि भी है जिसे अपेक्षाकृत हाल ही में विनिर्देश में जोड़ा गया था:

Var myList = document.getElementById("myList"); myList.remove();

यह विधि दूरस्थ ऑब्जेक्ट को वापस नहीं करती है और IE (केवल एज) में काम नहीं करती है। और दोनों विधियाँ टेक्स्ट नोड्स को तत्व नोड्स की तरह ही हटा देती हैं।

मैं मौजूदा चाइल्ड तत्व को एक नए तत्व से बदल सकता हूं, चाहे वह नया तत्व मौजूद हो या मैंने इसे स्क्रैच से बनाया हो। यहाँ मार्कअप है:

उदाहरण पाठ

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "उदाहरण"; myDiv.appendChild(document.createTextNode('नया तत्व टेक्स्ट'); document.body.replaceChild(myDiv, myPar);

नया तत्व पाठ

जैसा कि आप देख सकते हैं, रिप्लेसचाइल्ड() विधि दो तर्क लेती है: नया तत्व और पुराना तत्व जो इसे प्रतिस्थापित करता है।

मैं किसी मौजूदा तत्व को स्थानांतरित करने के लिए भी इस पद्धति का उपयोग कर सकता हूं। निम्नलिखित HTML पर एक नज़र डालें:

उदाहरण पाठ 1

उदाहरण पाठ 2

उदाहरण पाठ 3

मैं निम्नलिखित कोड का उपयोग करके तीसरे पैराग्राफ को पहले पैराग्राफ से बदल सकता हूं:

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

अब जेनरेट किया गया DOM इस तरह दिखता है:

उदाहरण पाठ 2

उदाहरण पाठ 1

वहाँ कई हैं विभिन्न तरीकेकिसी विशिष्ट तत्व का चयन करना। जैसा कि पहले दिखाया गया है, मैं चिल्ड्रन कलेक्शन या चाइल्डनोड्स प्रॉपर्टी का उपयोग करके शुरुआत कर सकता हूं। लेकिन आइए अन्य विकल्पों पर नजर डालें:

फर्स्टएलिमेंटचाइल्ड और लास्टएलिमेंटचाइल्ड गुण बिल्कुल वही करते हैं जो उनके नाम सुझाते हैं: पहले और आखिरी चाइल्ड तत्वों का चयन करें। आइए अपने मार्कअप पर वापस लौटें:

• उदाहरण एक
• उदाहरण दो
• उदाहरण तीन
• उदाहरण चार
• उदाहरण पांच
• उदाहरण छह

मैं इन गुणों का उपयोग करके पहले और आखिरी तत्वों का चयन कर सकता हूं:

Var myList = document.getElementById("myList"); कंसोल.लॉग(myList.firstElementChild.innerHTML); // "उदाहरण एक" कंसोल.लॉग(myList.lastElementChild.innerHTML); // "उदाहरण छह"

यदि मैं पहले या आखिरी के अलावा अन्य चाइल्ड तत्वों का चयन करना चाहता हूं तो मैं पिछली एलिमेंट सिबलिंग और नेक्स्ट एलिमेंट सिबलिंग गुणों का भी उपयोग कर सकता हूं। यह फर्स्टएलिमेंटचाइल्ड और लास्टएलिमेंटचाइल्ड गुणों को मिलाकर किया जाता है:

Var myList = document.getElementById("myList"); कंसोल.लॉग(myList.firstElementChild.nextElementSiling.innerHTML); // "उदाहरण दो" कंसोल.लॉग(myList.lastElementChild.previousElementSibling.innerHTML); // "उदाहरण पाँच"

समान गुण फर्स्ट चाइल्ड, लास्ट चाइल्ड, प्रीवियस सिबलिंग और नेक्स्ट सिबलिंग भी हैं, लेकिन वे केवल तत्वों को ही नहीं, बल्कि सभी प्रकार के नोड्स को ध्यान में रखते हैं। सामान्य तौर पर, वे गुण जो केवल तत्व नोड्स पर विचार करते हैं, उन गुणों की तुलना में अधिक उपयोगी होते हैं जो सभी नोड्स का चयन करते हैं।

मैंने पहले ही DOM में तत्वों को सम्मिलित करने के तरीकों पर गौर कर लिया है। आइए एक समान विषय पर आगे बढ़ें और सामग्री सम्मिलित करने की नई सुविधाओं पर एक नज़र डालें।

सबसे पहले, एक सरल इन्सर्टबिफोर () विधि है, रिप्लेस चाइल्ड () की तरह, यह दो तर्क लेता है और नए तत्वों और मौजूदा दोनों पर काम करता है। यहाँ मार्कअप है:

• उदाहरण एक
• उदाहरण दो
• उदाहरण तीन
• उदाहरण चार
• उदाहरण पांच
• उदाहरण छह

उदाहरण पैराग्राफ

पहले उस पैराग्राफ पर ध्यान दें जिसे मैं हटाने जा रहा हूं और फिर उसे सूची से पहले डालें, सब कुछ एक ही झटके में:

Var myList = document.getElementById("myList"), कंटेनर = document.getElementBy("c"), myPar = document.getElementById("par"); कंटेनर.insertBefore(myPar, myList);

परिणामी HTML में, पैराग्राफ सूची से पहले दिखाई देगा और यह तत्व को लपेटने का एक और तरीका है।

उदाहरण पैराग्राफ

• उदाहरण एक
• उदाहरण दो
• उदाहरण तीन
• उदाहरण चार
• उदाहरण पांच
• उदाहरण छह

ReplaceChild() की तरह, InsertBefore() दो तर्क लेता है: जोड़ा जाने वाला तत्व और वह तत्व जिसके पहले हम इसे सम्मिलित करना चाहते हैं।

यह विधि सरल है. आइए अब अधिक शक्तिशाली प्रविष्टि विधि आज़माएँ: InsertAdjacentHTML() विधि।

स्यूडोकोड

$("।rightArrow").click(function() (rightArrowParents = this.dom(); //.dom(); छद्म फ़ंक्शन है ... इसे संपूर्ण अलर्ट दिखाना चाहिए (rightArrowParents); ));

अलार्म संदेश होगा:

(लाइव उदाहरणों में मैंने अपडेट किया है वर्ग विशेषताएकाधिक कक्षाओं को संभालने का प्रदर्शन करने के लिए lol मल्टी जैसे div पर।)

यहां सटीक तत्व मिलान के लिए एक समाधान दिया गया है।

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

$.fn.fullSelector = function() ( var path = this.parents().addBack(); var QuickCss = path.get().map(function (आइटम) ( var self = $(आइटम), id = आइटम .id ? "#" + आइटम.आईडी: "", clss = item.classList.length ? )).join("") : "", name = item.nodeName.toLowerCase(), Index = self.siblings(name).length ? ":nth-child(" + (self.index() + 1) + ")" : ""; यदि (नाम === "एचटीएमएल" || नाम === "बॉडी") (वापसी नाम; ) वापसी नाम + सूचकांक + आईडी + सीएलएसएस )).जुड़ें(" > ") ; क्विकसीएसएस वापस करें;

और आप इसे इस तरह उपयोग कर सकते हैं:

कंसोल.लॉग($('कुछ-चयनकर्ता').पूर्ण चयनकर्ता());

मैंने टी.जे. से एक टुकड़ा स्थानांतरित किया। भीड़ से लेकर छोटे तक jQuery प्लगइन. मैंने jQuery संस्करण का उपयोग किया, भले ही वह सही हो कि यह पूरी तरह से अनावश्यक ओवरहेड है, लेकिन मैं इसे केवल डिबगिंग उद्देश्यों के लिए उपयोग कर रहा हूं इसलिए मुझे परवाह नहीं है।

उपयोग:

नेस्टेड स्पैन सरल स्पैन प्री

// परिणाम (सरणी): ["बॉडी", "div.sampleClass"] $("span").getDomPath(गलत) // परिणाम (स्ट्रिंग): body > div.sampleClass $("span").getDomPath( ) // परिणाम (सरणी): ["बॉडी", "div#test"] $("pre").getDomPath(झूठा) // परिणाम (स्ट्रिंग): बॉडी > div#test $("pre").getDomPath ()

वर ओब्जेक्ट = $("#शो-एडिटर-बटन"), पाथ = ""; जबकि (typeof obj.prop("tagName") != "unDefined")( if (obj.attr("class"))( path = "."+obj.attr("class").replace(/\s /g , ".") + पथ; ) यदि (obj.attr("id"))( पथ = "#"+obj.attr("id") + पथ; ) पथ = " " +obj.prop( "टैगनाम").toLowerCase() + पथ; obj = obj.parent() ) कंसोल.लॉग(पथ);

नमस्ते, यह फ़ंक्शन पथ में नहीं दिखाए जा रहे वर्तमान तत्व से संबंधित त्रुटि का समाधान करता है

अब इसे जांचें

$j("।wrapper").click(function(event) ( चयनितElement=$j(event.target); varrightArrowParents = ; $j(event.target).parents().not("html,body") .प्रत्येक(फ़ंक्शन() ( var प्रविष्टि = this.tagName.toLowerCase(); यदि (यह.className) ( प्रविष्टि += "।" + this.className.replace(/ /g, "।"); )अन्यथा यदि (this.id)( Entry += "#" + this.id; ) Entry=replaceAll(entry,.","।"); RightArrowParents.push(entry )); RightArrowParents.revers(); //if( इवेंट.target.nodeName.toLowerCase()=='a' ||. .className) ( प्रविष्टि += "।" + इवेंट.टारगेट.क्लासनाम.रेप्लेस(/ /जी, "।"); )अन्यथा यदि(इवेंट.टारगेट.आईडी)( एंट्री += "#" + इवेंट.टार्गेट। आईडी; ) राइटएरोपैरेंट्स.पुश(एंट्री);

जहां $j = jQuery वेरिएबल

कक्षा के नाम में .. के साथ समस्या का समाधान भी करें

यहाँ प्रतिस्थापन फ़ंक्शन है:

फ़ंक्शन एस्केपRegExp(str) ( return str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g, "\\$1"); ) फ़ंक्शन सभी को बदलें(str, ढूंढें, बदलें) (वापसी str.replace(नया RegExp(escapeRegExp(खोजें), "g"), बदलें); )

यहां एक मूल JS संस्करण है जो jQuery पथ लौटाता है। यदि तत्व मौजूद हैं तो मैं उनके लिए आईडी भी जोड़ता हूं। यदि आप सरणी में आईडी देखते हैं तो यह आपको सबसे छोटा रास्ता अपनाने का विकल्प देगा।

वार पथ = getDomPath(तत्व); कंसोल.लॉग(पथ.जॉइन(" > "));

मुख्य भाग > अनुभाग:eq(0) > div:eq(3) > अनुभाग#सामग्री > अनुभाग#फ़ायरहोज़ > div#फ़ायरहोज़लिस्ट > लेख#फ़ायरहोज़-46813651 > हेडर > h2 > स्पैन#शीर्षक-46813651

यहाँ समारोह है.

फ़ंक्शन getDomPath(el) ( var stack = ; while (el.parentNode != null) ( console.log(el.nodeName); var sibCount = 0; var sibIndex = 0; for (var i = 0; i< el.parentNode.childNodes.length; i++) { var sib = el.parentNode.childNodes[i]; if (sib.nodeName == el.nodeName) { if (sib === el) { sibIndex = sibCount; } sibCount++; } } if (el.hasAttribute("id") && el.id != "") { stack.unshift(el.nodeName.toLowerCase() + "#" + el.id); } else if (sibCount >1) ( stack.unshift(el.nodeName.toLowerCase() + ":eq(" + sibIndex + ")"); ) अन्य ( stack.unshift(el.nodeName.toLowerCase()); ) el = el.parentNode ; ) रिटर्न स्टैक.स्लाइस(1); // html तत्व को हटा देता है)