वेब डेवलपर्स के लिए डोम मैनीपुलेशन के लिए 15 जावास्क्रिप्ट तरीके
एक वेब डेवलपर के रूप में, आपको अक्सर हेरफेर करने की आवश्यकता होती है डोम, ऑब्जेक्ट मॉडल जो ब्राउज़र द्वारा उपयोग किया जाता है तार्किक संरचना निर्दिष्ट करें वेब पेजों की, और इस संरचना के आधार पर HTML तत्वों को स्क्रीन पर प्रस्तुत करें.
HTML परिभाषित करता है डिफ़ॉल्ट डोम संरचना. हालाँकि कई मामलों में आप जावास्क्रिप्ट के साथ इसे हेरफेर करना चाहते हैं, आमतौर पर क्रम में कर सकते हैं अतिरिक्त कार्यशीलता जोड़ें एक साइट के लिए.
इस पोस्ट में, आपको एक सूची मिलेगी 15 बुनियादी जावास्क्रिप्ट तरीके उस सहायता डोम हेरफेर. आप अपने कोड में अक्सर इन विधियों का उपयोग करेंगे, और आप हमारे जावास्क्रिप्ट ट्यूटोरियल में भी टकराएँगे.
1. querySelector ()
querySelector () तरीका पहला तत्व जो एक या अधिक सीएसएस चयनकर्ताओं से मेल खाता है. अगर कोई मैच नहीं मिलता है, तो वह वापस आ जाता है शून्य.
से पहले querySelector () शुरू किया गया था, डेवलपर्स व्यापक रूप से इस्तेमाल किया getElementById () विधि जो एक निर्दिष्ट के साथ एक तत्व प्राप्त करता है आईडी मूल्य.
हालांकि getElementById () अभी भी एक उपयोगी विधि है, लेकिन नए के साथ querySelector () तथा querySelectorAll () ऐसे तरीके जिनसे हम मुक्त हैं किसी भी CSS चयनकर्ता के आधार पर लक्ष्य तत्व, इस प्रकार हमारे पास अधिक लचीलापन है.
वाक्य - विन्यास
var ele = document.querySelector (चयनकर्ता);
हाथी- पहला मिलान तत्व याशून्य(यदि कोई तत्व चयनकर्ताओं से मेल नहीं खाता है)चयनकर्ता- एक या अधिक CSS चयनकर्ता, जैसे कि"#FooId",".FooClassName",".Class1.class2", या".class1, .class2"
कोड उदाहरण
इस उदाहरण में, पहला पैराग्राफ एक पैरा दो पैरा तीन का परीक्षण करें भिन्न मिलान तत्वों को एक के रूप में वापस किया जाता है नीचे दिया गया उदाहरण पिछले HTML के समान HTML का उपयोग करता है। हालांकि, इस उदाहरण में, सभी पैराग्राफ के साथ चुना जाता है पैराग्राफ एक पैरा दो पैरा तीन आयोजन HTML तत्व का क्या होता है, जैसे क्लिक करने, ध्यान केंद्रित करने या लोड करने का संदर्भ लें, जिससे हम जावास्क्रिप्ट के साथ प्रतिक्रिया कर सकें। हम JS कार्यों को असाइन कर सकते हैं बात सुनो इन घटनाओं के लिए तत्वों में और कुछ करें जब घटना घट गई थी. तीन तरीके हैं जो आप कर सकते हैं एक निश्चित घटना के लिए एक समारोह असाइन करें. अगर प्रक्रिया ईवेंट स्टॉप बबलिंग, अर्थात् तत्व के पूर्वजों में एक ही ईवेंट श्रोता के लिए किसी भी ईवेंट श्रोता को कॉल करने से रोकता है. इस सुविधा का उपयोग करने के लिए, आप 2 सिंटैक्स का उपयोग कर सकते हैं: श्रोता को केवल पहली बार होने वाली घटना कहा जाता है, फिर यह स्वचालित रूप से घटना से अलग हो जाता है, और इसके द्वारा ट्रिगर नहीं किया जाएगा. ईवेंट की डिफ़ॉल्ट कार्रवाई को रोकाफॉल्ट () विधि से रोका नहीं जा सकता है. इस उदाहरण में, हम एक क्लिक ईवेंट श्रोता जोड़ते हैं असाइन करें उपर्युक्त के रूप में एक ही वाक्यविन्यास का उपयोग करता है कोड उदाहरण के बाद हम पर इस्तेमाल किया आप बाद में अलग-अलग का उपयोग करके इस तत्व को वेब पेज पर जोड़ सकते हैं डोम प्रविष्टि के लिए तरीके, जैसे कि निम्नलिखित उदाहरण के साथ, आप एक नया पैराग्राफ तत्व बना सकते हैं: डाला जाने वाला बच्चा या तो हो सकता है नव निर्मित तत्व, या ए पहले से मौजूद है. बाद के मामले में, इसे अपनी पिछली स्थिति से अंतिम बच्चे की स्थिति में ले जाया जाएगा. इस उदाहरण में, हम एक सम्मिलित करते हैं निम्नलिखित इंटरैक्टिव डेमो में, से पत्र देखिए कैसे इस उदाहरण में, हम निकालते हैं इस उदाहरण में बाल तत्व जब आपको एक नया तत्व बनाना होगा जो कि होना चाहिए पहले से मौजूद तत्व के समान वेब पेज पर, आप बस कर सकते हैं पहले से मौजूद तत्व की एक प्रति बनाएँ का उपयोग करते हुए इस उदाहरण में, हम इसके लिए एक प्रति बनाते हैं नतीजतन, यदि संदर्भित बाल तत्व मौजूद नहीं है या आप स्पष्ट रूप से गुजरते हैं इस उदाहरण में, हम एक नया बनाते हैं यह इंटरेक्टिव डेमो हमारे पिछले डेमो के समान ही काम करता है यह एक बनाता है हम सीधे DOM ट्री में सीधे तत्व क्यों नहीं जोड़ते हैं? क्योंकि डोम सम्मिलन लेआउट परिवर्तन का कारण बनता है, और यह ए महंगी ब्राउज़र प्रक्रिया चूंकि एकाधिक परिणामी तत्व सम्मिलन के कारण अधिक लेआउट परिवर्तन होंगे. दूसरी ओर, तत्वों को एक में जोड़ना इस उदाहरण में, हम कई तालिका पंक्तियाँ और सेल बनाते हैं नतीजतन, पांच पंक्तियों - उनमें से प्रत्येक में 1 से 5 तक की संख्या वाले एक सेल में सामग्री के रूप में - तालिका के अंदर डाला जाएगा. कभी-कभी आप चाहते हैं CSS संपत्ति मूल्यों की जाँच करें किसी भी परिवर्तन करने से पहले एक तत्व की। आप उपयोग कर सकते हैं इस उदाहरण में, हम गणना करते हैं और सतर्क करते हैं इस उदाहरण में, हम जोड़ते हैं इस उदाहरण में, हम के मान को सचेत करते हैं इस उदाहरण में, हम निकालते हैं querySelector () विधि और इसका रंग लाल करने के लिए बदल दिया गया है.
var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red'; इंटरएक्टिव डेमो
querySelector () निम्नलिखित इंटरैक्टिव डेमो में विधि। बस एक चयनकर्ता टाइप करें जो आप नीले बक्से के अंदर पा सकते हैं (जैसे. #three), और चयन बटन पर क्लिक करें। यदि आप टाइप करते हैं तो ध्यान दें .खंड, केवल इसका पहला उदाहरण चुना जाएगा.2.
querySelectorAll ()querySelector () यह सभी मिलान तत्वों का केवल पहला उदाहरण है, querySelectorAll () निर्दिष्ट सीएसएस चयनकर्ता से मेल खाने वाले सभी तत्वों को लौटाता है.NodeList कोई मेल तत्व नहीं मिलने पर ऑब्जेक्ट एक खाली ऑब्जेक्ट होगा.वाक्य - विन्यास
var eles = document.querySelectorAll (चयनकर्ता);
Eles - ए NodeList संपत्ति मूल्यों के रूप में सभी मिलान तत्वों के साथ वस्तु। यदि कोई माचिस नहीं मिली तो वस्तु खाली है.चयनकर्ता - एक या अधिक CSS चयनकर्ता, जैसे कि "#FooId", ".FooClassName", ".Class1.class2", या ".class1, .class2"कोड उदाहरण
querySelectorAll (), और नीले रंग के हैं.
var पैराग्राफ = document.querySelectorAll ('p'); for (var p का पैराग्राफ) p.style.color = 'blue'; 3.
addEventListener ()foo () एक कस्टम फ़ंक्शन है, आप इसे पंजीकृत कर सकते हैं क्लिक इवेंट श्रोता के रूप में (बटन तत्व पर क्लिक करने पर इसे कॉल करें) तीन तरीकों से:
var btn = document.querySelector ('बटन'); btn.onclick = foo; var btn = document.querySelector ('बटन'); btn.addEventListener ('क्लिक', फू); addEventListener () (तीसरा समाधान) है कुछ पेशेवरों; यह नवीनतम मानक है - एक समारोह में एक श्रोता के रूप में एक से अधिक कार्य करने की अनुमति देना - और एक उपयोगी विकल्प के साथ आता है.वाक्य - विन्यास
ele.addEventListener (evt, श्रोता, [विकल्प]);
हाथी - HTML तत्व ईवेंट श्रोता के लिए सुन रहा होगा.evt - लक्षित घटना.श्रोता - आमतौर पर, एक जावास्क्रिप्ट फ़ंक्शन.विकल्प - (वैकल्पिक) बूलियन गुणों के एक सेट के साथ एक वस्तु (नीचे सूचीबद्ध).विकल्प क्या होता है, जब इसे सेट किया जाता है सच?कब्जा ele.addEventListener (evt, श्रोता, सच)ele.addEventListener (evt, श्रोता, कैप्चर: ट्रू);एक बार निष्क्रिय कोड उदाहरण
foo, को HTML टैग.
var btn = document.querySelector ('बटन'); btn.addEventListener ( 'क्लिक', foo); समारोह फू () चेतावनी ('हैलो'); इंटरएक्टिव डेमो
foo () निम्नलिखित तीन घटनाओं में से किसी के लिए एक घटना श्रोता के रूप में कस्टम फ़ंक्शन: इनपुट, क्लिक या ऊपर टहलना & उसके नीचे चयनित इनपुट फ़ील्ड को हॉवरिंग, क्लिक या टाइप करके ट्रिगर करें.4.
removeEventListener ()removeEventListener () तरीका एक इवेंट श्रोता को अलग कर देता है पहले के साथ जोड़ा गया addEventListener () तरीका घटना से यह सुन रहा है.वाक्य - विन्यास
ele.removeEventListener (evt, श्रोता, [विकल्प]);
addEventListener () विधि (को छोड़कर) एक बार विकल्प है कि बाहर रखा गया है)। श्रोता को अलग करने के लिए पहचान के बारे में विकल्पों का उपयोग बहुत विशिष्ट किया जाता है.कोड उदाहरण
addEventListener (), यहाँ हम क्लिक ईवेंट श्रोता को हटाते हैं foo वहाँ से तत्त्व. btn.removeEventListener ( 'क्लिक', foo);
5.
createElement ()createElement () तरीका एक नया HTML एलिमेंट बनाता है का उपयोग करते हुए HTML टैग का नाम बनाया जाना, जैसे 'पी' या 'Div'.अपेंड चाइल्ड() (इस पोस्ट में बाद में देखें).वाक्य - विन्यास
document.createElement (टैगनाम);
टैग नाम - उस HTML टैग का नाम जिसे आप बनाना चाहते हैं. कोड उदाहरण
var pEle = document.createElement ('p') 6.
अपेंड चाइल्ड()अपेंड चाइल्ड() तरीका पिछले बच्चे के रूप में एक तत्व जोड़ता है इस विधि को लागू करने वाले HTML तत्व के लिए.वाक्य - विन्यास
ele.appendChild (childEle)
हाथी - जो HTML तत्व है childEle अपने अंतिम बच्चे के रूप में जोड़ा जाता है.childEle - HTML तत्व को अंतिम बच्चे के रूप में जोड़ा गया हाथी.कोड उदाहरण
तत्व एक के बच्चे के रूप में है अपेंड चाइल्ड() और उपर्युक्त है createElement () तरीकों.
var div = document.querySelector ('div'); var strong = document.createElement ('मजबूत'); strong.textContent = 'हैलो'; div.appendChild (मजबूत); इंटरएक्टिव डेमो
#ए सेवा मेरे #R के बाल तत्व हैं # अभिभावक एक, # अभिभावक दो, तथा # अभिभावक तीन आईडी चयनकर्ता.अपेंड चाइल्ड() विधि द्वारा काम करता है नीचे दिए गए इनपुट क्षेत्रों में एक माता-पिता और एक बच्चे के चयनकर्ता का नाम टाइप करना. आप दूसरे माता-पिता से संबंधित बच्चों को भी चुन सकते हैं.7.
removeChild ()removeChild () तरीका एक निर्दिष्ट बाल तत्व निकालता है इस पद्धति को कॉल करने वाले HTML तत्व से.वाक्य - विन्यास
ele.removeChild (childEle)
हाथी - का मूल तत्व childEle.childEle - का बाल तत्व हाथी.कोड उदाहरण
तत्व हमने एक बच्चे के रूप में जोड़ा अपेंड चाइल्ड() तरीका. div.removeChild (मजबूत);
8.
replaceChild ()replaceChild () तरीका एक दूसरे के साथ एक बच्चे के तत्व की जगह इस विधि को कॉल करने वाले मूल तत्व से संबंधित है.वाक्य - विन्यास
ele.replaceChild (newChildEle, पुरानेकहिल)
हाथी - माता-पिता तत्व जिनमें से बच्चों को प्रतिस्थापित किया जाना है.newChildEle - का बाल तत्व हाथी वह बदल देगा oldChildEle.oldChildEle - का बाल तत्व हाथी, द्वारा प्रतिस्थापित किया जाएगा newChildEle.कोड उदाहरण
से संबंधित है टैग.
var em = document.createElement ('em'); var strong = document.querySelector ('मजबूत'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.replaceChild (em, strong); 9.
cloneNode ()cloneNode () तरीका.वाक्य - विन्यास
var dupeEle = ele.cloneNode ([गहरा])dupeEle - की प्रति हाथी तत्त्व.हाथी - HTML एलिमेंट कॉपी किया जाना है.गहरा - (वैकल्पिक) एक बूलियन मूल्य। अगर यह करने के लिए सेट है सच, dupeEle सभी बाल तत्व होंगे हाथी अगर यह सेट है असत्य यह अपने बच्चों के बिना क्लोन किया जाएगा.कोड उदाहरण
के साथ तत्व cloneNode (), फिर हम इसे जोड़ते हैं अपेंड चाइल्ड() तरीका. तत्वों, दोनों के साथ नमस्ते सामग्री के रूप में स्ट्रिंग.
var strong = document.querySelector ('मजबूत'); var copy = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (कॉपी); 10.
insertBefore ()insertBefore () तरीका एक अन्य बाल तत्व से पहले एक निर्दिष्ट बाल तत्व जोड़ता है. विधि को मूल तत्व कहा जाता है.शून्य इसके स्थान पर, सम्मिलित किए जाने वाले बाल तत्व को जोड़ा जाता है माता-पिता की अंतिम संतान के रूप में (के समान अपेंड चाइल्ड()).वाक्य - विन्यास
ele.insertBefore (newEle, refEle);
हाथी - मूल तत्व.newEle - नया HTML एलिमेंट डाला जाएगा.refEle - का एक बाल तत्व हाथी जिसके पहले newEle डाला जाएगा.कोड उदाहरण
अंदर कुछ पाठ के साथ तत्व, और इसे जोड़ें से पहले के अंदर तत्व
var em = document.createElement ('em'); var strong = document.querySelector ('मजबूत'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.insertBefore (em, strong); इंटरएक्टिव डेमो
अपेंड चाइल्ड() तरीका। यहां आपको केवल दो बाल तत्वों के आईडी चयनकर्ताओं को टाइप करने की आवश्यकता है (से) #ए सेवा मेरे #R) इनपुट बॉक्स में, और आप देख सकते हैं कि कैसे insertBefore () विधि पहले निर्दिष्ट बच्चे को ले जाती है से पहले दूसरा.1 1.
createDocumentFragment ()createDocumentFragment () विधि इस सूची में अन्य लोगों के रूप में अच्छी तरह से ज्ञात नहीं हो सकती है, फिर भी एक महत्वपूर्ण है, खासकर यदि आप चाहते हैं थोक में कई तत्व डालें, जैसे कि एक टेबल पर कई पंक्तियों को जोड़ना.DocumentFragment वस्तु, जो अनिवार्य रूप से है एक DOM नोड जो DOM ट्री का हिस्सा नहीं है. यह एक बफ़र की तरह है जहाँ हम अन्य तत्वों (जैसे कई पंक्तियों) को पहले जोड़ सकते हैं और उन्हें DOM ट्री में वांछित नोड में जोड़ सकते हैं (उदाहरण के लिए एक टेबल पर).DocumentFragment वस्तु किसी भी लेआउट परिवर्तन का कारण नहीं है, इसलिए आप इसे DOM ट्री में पास करने से पहले जितने चाहें उतने तत्व इसमें जोड़ सकते हैं, जिससे इस बिंदु पर केवल एक लेआउट बदल जाता है.वाक्य - विन्यास
document.createDocumentFragment ()
कोड उदाहरण
createElement () विधि, फिर उन्हें एक में जोड़ें DocumentFragment ऑब्जेक्ट, अंत में उस दस्तावेज़ के टुकड़े को एक HTML में जोड़ें का उपयोग करते हुए
अपेंड चाइल्ड() तरीका.
var तालिका = document.querySelector ("तालिका"); var df = document.createDocumentFragment (); के लिए (var i = 0; मैं;<5; i++) var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr); table.appendChild(df); 12.
getComputedStyle ()ele.style संपत्ति, हालांकि, वही करने के लिए getComputedStyle () विधि सिर्फ इस उद्देश्य के लिए बनाई गई है, यह केवल-पढ़े गए मान लौटाता है निर्दिष्ट HTML तत्व के सभी CSS गुण.वाक्य - विन्यास
var style = getComputedStyle (हाथी, [छद्म ईले])
अंदाज - ए CSSStyleDeclaration वस्तु विधि द्वारा लौटाई गई। यह सभी CSS संपत्तियों और उनके मूल्यों को रखता है हाथी तत्त्व.हाथी - सीएसएस संपत्ति मूल्यों का HTML तत्व प्राप्त किया जाता है.pseudoEle - (वैकल्पिक) एक स्ट्रिंग जो एक छद्म तत्व का प्रतिनिधित्व करता है (उदाहरण के लिए, ':बाद')। यदि यह उल्लेख किया गया है, तो निर्दिष्ट छद्म तत्व से जुड़े सीएसएस गुण हाथी लौटा दी जाएगी.कोड उदाहरण
चौड़ाई का मान getComputedStyle () तरीका.
var style = getComputedStyle (document.querySelector ('div')); चेतावनी (style.width); 13.
setAttribute ()setAttribute () विधि या तो एक नई विशेषता जोड़ता है एक HTML तत्व के लिए, या मूल्य को अद्यतन करता है एक विशेषता जो पहले से मौजूद है.वाक्य - विन्यास
ele.setAttribute (नाम, मान);
हाथी - HTML तत्व जिसमें एक विशेषता जोड़ी जाती है, या जिसमें विशेषता अद्यतन की जाती है.नाम - गुण का नाम.मूल्य - गुण का मान.कोड उदाहरण
contenteditable ए को विशेषता setAttribute () विधि, जो इसकी सामग्री को संपादन योग्य बना देगी. var div = document.querySelector ('div'); div.setAttribute ( 'contenteditable', ") 14.
getAttribute ()getAttribute () तरीका एक निर्दिष्ट विशेषता का मान लौटाता है एक निश्चित HTML तत्व से संबंधित है.वाक्य - विन्यास
ele.getAttribute (नाम);
हाथी - HTML तत्व किस विशेषता का अनुरोध किया गया है.नाम - गुण का नाम.कोड उदाहरण
contenteditable से संबंधित विशेषता getAttribute () तरीका. var div = document.querySelector ('div'); चेतावनी (div.getAttribute ( 'contenteditable')) 15.
removeAttribute ()removeAttribute () तरीका किसी दिए गए विशेषता को निकालता है एक विशिष्ट HTML तत्व का.वाक्य - विन्यास
ele.removeAttribute (नाम);हाथी - जिस एचटीएमएल तत्व को हटाया जाना है.नाम - गुण का नाम.कोड उदाहरण
contenteditable से विशेषता var div = document.querySelector ('div'); div.removeAttribute ( 'contenteditable');
