जावास्क्रिप्ट इम्पोर्ट ॲट्रिब्यूट्स: JSON मॉड्यूल्स लोड करण्याची आधुनिक, सुरक्षित पद्धत

बऱ्याच वर्षांपासून, जावास्क्रिप्ट डेव्हलपर्स एका साध्या वाटणाऱ्या कामाशी झुंजत आहेत: JSON फाइल्स लोड करणे. वेबवर डेटाची देवाणघेवाण करण्यासाठी जावास्क्रिप्ट ऑब्जेक्ट नोटेशन (JSON) हे एक मानक असले तरी, त्याला जावास्क्रिप्ट मॉड्यूल्समध्ये सहजपणे समाकलित करणे हे बॉयलरप्लेट, तात्पुरते उपाय आणि संभाव्य सुरक्षा धोक्यांनी भरलेले होते. Node.js मधील सिंक्रोनस फाइल रीड्सपासून ते ब्राउझरमधील लांबलचक `fetch` कॉल्सपर्यंत, हे उपाय मूळ वैशिष्ट्यांपेक्षा पॅचवर्कसारखे वाटत होते. आता ते युग संपत आहे.

इम्पोर्ट ॲट्रिब्यूट्सच्या जगात आपले स्वागत आहे. ECMAScript भाषेचे नियमन करणाऱ्या TC39 समितीने प्रमाणित केलेला हा एक आधुनिक, सुरक्षित आणि सुबक उपाय आहे. साध्या पण शक्तिशाली `with { type: 'json' }` सिंटॅक्ससह सादर केलेले हे वैशिष्ट्य, आपण नॉन-जावास्क्रिप्ट मालमत्ता कशा हाताळतो यात क्रांती घडवत आहे, आणि याची सुरुवात सर्वात सामान्य मालमत्ता JSON पासून होत आहे. हा लेख जगभरातील डेव्हलपर्सना इम्पोर्ट ॲट्रिब्यूट्स काय आहेत, ते कोणत्या गंभीर समस्या सोडवतात, आणि स्वच्छ, सुरक्षित आणि अधिक कार्यक्षम कोड लिहिण्यासाठी तुम्ही आजपासून त्यांचा वापर कसा करू शकता यावर एक सर्वसमावेशक मार्गदर्शक आहे.

जुने जग: जावास्क्रिप्टमध्ये JSON हाताळणीवर एक दृष्टिक्षेप

इम्पोर्ट ॲट्रिब्यूट्सची सुंदरता पूर्णपणे समजून घेण्यासाठी, ते कोणत्या परिस्थितीला बदलत आहेत हे आपण प्रथम समजून घेतले पाहिजे. वातावरणावर (सर्व्हर-साइड किंवा क्लायंट-साइड) अवलंबून, डेव्हलपर्स विविध तंत्रांवर अवलंबून राहिले आहेत, आणि प्रत्येकाचे स्वतःचे फायदे-तोटे आहेत.

सर्व्हर-साइड (Node.js): `require()` आणि `fs` चे युग

CommonJS मॉड्यूल सिस्टममध्ये, जी अनेक वर्षांपासून Node.js ची मूळ प्रणाली आहे, JSON इम्पोर्ट करणे फसवे सोपे होते:

// CommonJS फाइलमध्ये (उदा. index.js) const config = require('./config.json'); console.log(config.database.host);

हे खूप छान काम करत होते. Node.js आपोआप JSON फाइलला जावास्क्रिप्ट ऑब्जेक्टमध्ये पार्स करायचे. तथापि, ECMAScript मॉड्यूल्स (ESM) कडे जागतिक स्तरावर कल वाढल्याने, हे सिंक्रोनस `require()` फंक्शन आधुनिक जावास्क्रिप्टच्या असिंक्रोनस, टॉप-लेव्हल-अवेट स्वरूपाशी विसंगत ठरले. त्याचा थेट ESM पर्याय, `import`, सुरुवातीला JSON मॉड्यूल्सना सपोर्ट करत नव्हता, ज्यामुळे डेव्हलपर्सना जुन्या, अधिक मॅन्युअल पद्धतींकडे परत जावे लागले:

// ESM फाइलमध्ये मॅन्युअल फाइल रीडिंग (उदा. index.mjs) import fs from 'fs'; import path from 'path'; const configPath = path.resolve('config.json'); const configFile = fs.readFileSync(configPath, 'utf8'); const config = JSON.parse(configFile); console.log(config.database.host);

या पद्धतीचे अनेक तोटे आहेत:

• लांबलचकपणा: एका ऑपरेशनसाठी अनेक ओळींचा बॉयलरप्लेट कोड लागतो.
• सिंक्रोनस I/O: `fs.readFileSync` हे एक ब्लॉकिंग ऑपरेशन आहे, जे उच्च-कॉन्करन्सी ऍप्लिकेशन्समध्ये कार्यक्षमतेसाठी अडथळा ठरू शकते. असिंक्रोनस आवृत्ती (`fs.readFile`) कॉलबॅक किंवा प्रॉमिसेससह आणखी बॉयलरप्लेट वाढवते.
• एकात्मतेचा अभाव: हे मॉड्यूल सिस्टमपासून वेगळे वाटते, कारण ते JSON फाइलला एक सामान्य टेक्स्ट फाइल मानते ज्याला मॅन्युअली पार्स करण्याची आवश्यकता असते.

क्लायंट-साइड (ब्राउझर्स): `fetch` API बॉयलरप्लेट

ब्राउझरमध्ये, डेव्हलपर्स सर्व्हरवरून JSON डेटा लोड करण्यासाठी बऱ्याच काळापासून `fetch` API वर अवलंबून आहेत. हे शक्तिशाली आणि लवचिक असले तरी, एका सरळ इम्पोर्टसाठी ते खूप लांबलचक आहे.

// क्लासिक fetch पॅटर्न let config; fetch('/config.json') .then(response => { if (!response.ok) { throw new Error('नेटवर्क प्रतिसाद ठीक नव्हता'); } return response.json(); // JSON बॉडी पार्स करते }) .then(data => { config = data; console.log(config.api.key); }) .catch(error => console.error('कॉन्फिग आणण्यात त्रुटी:', error));

हे पॅटर्न प्रभावी असले तरी, त्यात काही त्रुटी आहेत:

• बॉयलरप्लेट: प्रत्येक JSON लोडसाठी प्रॉमिसेस, प्रतिसाद तपासणी आणि त्रुटी हाताळणीची समान साखळी आवश्यक असते.
• असिंक्रोनसिटीचा भार: `fetch` च्या असिंक्रोनस स्वरूपाचे व्यवस्थापन करणे ऍप्लिकेशन लॉजिकला गुंतागुंतीचे बनवू शकते, ज्यामुळे लोडिंग फेज हाताळण्यासाठी अनेकदा स्टेट मॅनेजमेंटची आवश्यकता भासते.
• स्टॅटिक ॲनालिसिसचा अभाव: हे रनटाइम कॉल असल्यामुळे, बिल्ड टूल्स या अवलंबित्वचे सहजपणे विश्लेषण करू शकत नाहीत, ज्यामुळे ऑप्टिमायझेशनची संधी गमावली जाऊ शकते.

एक पाऊल पुढे: असर्शन्ससह डायनॅमिक `import()` (पूर्वीची आवृत्ती)

ही आव्हाने ओळखून, TC39 समितीने प्रथम इम्पोर्ट असर्शन्स प्रस्तावित केले. हा उपायाच्या दिशेने एक महत्त्वाचा टप्पा होता, ज्यामुळे डेव्हलपर्सना इम्पोर्टबद्दल मेटाडेटा प्रदान करण्याची परवानगी मिळाली.

// मूळ इम्पोर्ट असर्शन्स प्रस्ताव const configModule = await import('./config.json', { assert: { type: 'json' } }); const config = configModule.default;

ही एक मोठी सुधारणा होती. याने JSON लोडिंगला ESM सिस्टममध्ये समाकलित केले. `assert` क्लॉज जावास्क्रिप्ट इंजिनला लोड केलेला रिसोर्स खरोखरच JSON फाइल आहे की नाही हे तपासण्यास सांगत असे. तथापि, मानकीकरण प्रक्रियेदरम्यान, एक महत्त्वाचा अर्थपूर्ण फरक समोर आला, ज्यामुळे त्याचे इम्पोर्ट ॲट्रिब्यूट्समध्ये रूपांतर झाले.

इम्पोर्ट ॲट्रिब्यूट्सचा प्रवेश: एक घोषणात्मक आणि सुरक्षित दृष्टिकोन

इंजिन इम्प्लिमेंटर्सकडून विस्तृत चर्चा आणि अभिप्रायानंतर, इम्पोर्ट असर्शन्सना सुधारून इम्पोर्ट ॲट्रिब्यूट्स बनवण्यात आले. सिंटॅक्समध्ये थोडा फरक आहे, परंतु अर्थपूर्ण बदल खूप मोठा आहे. JSON मॉड्यूल्स इम्पोर्ट करण्याची ही नवीन, प्रमाणित पद्धत आहे:

स्टॅटिक इम्पोर्ट: import config from './config.json' with { type: 'json' };

डायनॅमिक इम्पोर्ट: const configModule = await import('./config.json', { with: { type: 'json' } }); const config = configModule.default;

`with` कीवर्ड: केवळ नावातील बदलापेक्षा अधिक

`assert` वरून `with` मध्ये झालेला बदल केवळ वरवरचा नाही. तो उद्देशातील मूलभूत बदल दर्शवतो:

• `assert { type: 'json' }`: या सिंटॅक्सचा अर्थ लोड-नंतरची पडताळणी असा होता. इंजिन मॉड्यूल आणेल आणि नंतर ते असर्शनशी जुळते की नाही हे तपासेल. जुळत नसल्यास, ते एक त्रुटी देईल. ही प्रामुख्याने एक सुरक्षा तपासणी होती.
• `with { type: 'json' }`: या सिंटॅक्सचा अर्थ लोड-पूर्वीचा निर्देश असा होतो. हे होस्ट वातावरणाला (ब्राउझर किंवा Node.js) सुरुवातीपासूनच मॉड्यूल कसे लोड आणि पार्स करायचे याबद्दल माहिती देते. ही केवळ तपासणी नाही; तर ही एक सूचना आहे.

हा फरक महत्त्वाचा आहे. `with` कीवर्ड जावास्क्रिप्ट इंजिनला सांगतो, "मी एक रिसोर्स इम्पोर्ट करू इच्छितो, आणि मी तुम्हाला लोडिंग प्रक्रियेला मार्गदर्शन करण्यासाठी ॲट्रिब्यूट्स देत आहे. योग्य लोडर निवडण्यासाठी आणि सुरुवातीपासूनच योग्य सुरक्षा धोरणे लागू करण्यासाठी या माहितीचा वापर करा." यामुळे उत्तम ऑप्टिमायझेशन आणि डेव्हलपर व इंजिन यांच्यात एक स्पष्ट करार शक्य होतो.

हे गेम चेंजर का आहे? सुरक्षिततेची गरज

इम्पोर्ट ॲट्रिब्यूट्सचा सर्वात महत्त्वाचा फायदा म्हणजे सुरक्षितता. ते MIME-टाइप गोंधळ म्हणून ओळखल्या जाणाऱ्या हल्ल्यांना रोखण्यासाठी डिझाइन केलेले आहेत, ज्यामुळे रिमोट कोड एक्झिक्यूशन (RCE) होऊ शकते.

अस्पष्ट इम्पोर्टमुळे RCE चा धोका

अशी कल्पना करा की इम्पोर्ट ॲट्रिब्यूट्सशिवाय सर्व्हरवरून कॉन्फिगरेशन फाइल लोड करण्यासाठी डायनॅमिक इम्पोर्ट वापरला जातो:

// संभाव्यतः असुरक्षित इम्पोर्ट const { settings } = await import('https://api.example.com/user-settings.json');

जर `api.example.com` येथील सर्व्हर हॅक झाला तर काय होईल? एक दुर्भावनापूर्ण व्यक्ती `user-settings.json` एंडपॉइंटला JSON फाइलऐवजी जावास्क्रिप्ट फाइल सर्व्ह करण्यासाठी बदलू शकते, तरीही `.json` विस्तार तसाच ठेवेल. सर्व्हर `Content-Type` हेडर `text/javascript` सह एक्झिक्युटेबल कोड परत पाठवेल.

प्रकार तपासण्याची यंत्रणा नसल्यामुळे, जावास्क्रिप्ट इंजिन कदाचित जावास्क्रिप्ट कोड पाहून तो कार्यान्वित करेल, ज्यामुळे आक्रमणकर्त्याला वापरकर्त्याच्या सेशनवर नियंत्रण मिळेल. ही एक गंभीर सुरक्षा त्रुटी आहे.

इम्पोर्ट ॲट्रिब्यूट्स धोका कसा कमी करतात

इम्पोर्ट ॲट्रिब्यूट्स ही समस्या सुंदरपणे सोडवतात. जेव्हा तुम्ही ॲट्रिब्यूटसह इम्पोर्ट लिहिता, तेव्हा तुम्ही इंजिनसोबत एक कठोर करार करता:

// सुरक्षित इम्पोर्ट const { settings } = await import('https://api.example.com/user-settings.json' with { type: 'json' });

आता काय होते ते पहा:

1. ब्राउझर `user-settings.json` साठी विनंती करतो.
2. सर्व्हर, जो आता हॅक झाला आहे, जावास्क्रिप्ट कोड आणि `Content-Type: text/javascript` हेडरसह प्रतिसाद देतो.
3. ब्राउझरचा मॉड्यूल लोडर पाहतो की प्रतिसादाचा MIME प्रकार (`text/javascript`) इम्पोर्ट ॲट्रिब्यूटमधील अपेक्षित प्रकाराशी (`json`) जुळत नाही.
4. फाइल पार्स किंवा कार्यान्वित करण्याऐवजी, इंजिन ताबडतोब `TypeError` फेकते, ज्यामुळे ऑपरेशन थांबते आणि कोणताही दुर्भावनापूर्ण कोड चालण्यापासून रोखला जातो.

ही साधी भर संभाव्य RCE असुरक्षिततेला एका सुरक्षित, अंदाजित रनटाइम त्रुटीमध्ये बदलते. हे सुनिश्चित करते की डेटा हा डेटाच राहील आणि त्याला चुकूनही एक्झिक्युटेबल कोड म्हणून समजले जाणार नाही.

व्यावहारिक उपयोग आणि कोड उदाहरणे

JSON साठी इम्पोर्ट ॲट्रिब्यूट्स केवळ एक सैद्धांतिक सुरक्षा वैशिष्ट्य नाही. ते विविध डोमेनमधील दैनंदिन विकासाच्या कामांमध्ये अर्गोनॉमिक सुधारणा आणतात.

१. ऍप्लिकेशन कॉन्फिगरेशन लोड करणे

हा एक क्लासिक उपयोग आहे. मॅन्युअल फाइल I/O ऐवजी, तुम्ही आता तुमचे कॉन्फिगरेशन थेट आणि स्टॅटिकली इम्पोर्ट करू शकता.

फाइल: `config.json` { "database": { "host": "db.production.example.com", "port": 5432, "user": "api_user" }, "featureFlags": { "newDashboard": true, "enableLogging": false } }

फाइल: `database.mjs` import config from './config.json' with { type: 'json' }; export function getDbHost() { return config.database.host; } console.log(`Connecting to database at: ${getDbHost()}`);

हा कोड स्वच्छ, घोषणात्मक आणि मानव तसेच बिल्ड टूल्ससाठी समजण्यास सोपा आहे.

२. आंतरराष्ट्रीयीकरण (i18n) डेटा

अनुवादांचे व्यवस्थापन करणे हे आणखी एक उत्तम उदाहरण आहे. तुम्ही भाषेच्या स्ट्रिंग्स वेगळ्या JSON फाइल्समध्ये साठवू शकता आणि आवश्यकतेनुसार त्या इम्पोर्ट करू शकता.

फाइल: `locales/en-US.json` { "welcomeMessage": "Hello, welcome to our application!", "logoutButton": "Log Out" }

फाइल: `locales/es-MX.json` { "welcomeMessage": "¡Hola, bienvenido a nuestra aplicación!", "logoutButton": "Cerrar Sesión" }

फाइल: `i18n.mjs` // डीफॉल्ट भाषा स्टॅटिकली इम्पोर्ट करा import defaultStrings from './locales/en-US.json' with { type: 'json' }; // वापरकर्त्याच्या पसंतीनुसार इतर भाषा डायनॅमिकली इम्पोर्ट करा async function getTranslations(locale) { if (locale === 'es-MX') { const module = await import('./locales/es-MX.json', { with: { type: 'json' } }); return module.default; } return defaultStrings; } const userLocale = 'es-MX'; const strings = await getTranslations(userLocale); console.log(strings.welcomeMessage); // स्पॅनिश संदेश आउटपुट करते

३. वेब ऍप्लिकेशन्ससाठी स्टॅटिक डेटा लोड करणे

एका ड्रॉपडाउन मेन्यूमध्ये देशांची यादी भरणे किंवा उत्पादन कॅटलॉग प्रदर्शित करण्याची कल्पना करा. हा स्टॅटिक डेटा एका JSON फाइलमध्ये व्यवस्थापित केला जाऊ शकतो आणि थेट तुमच्या कॉम्पोनेंटमध्ये इम्पोर्ट केला जाऊ शकतो.

फाइल: `data/countries.json` [ { "code": "US", "name": "United States" }, { "code": "DE", "name": "Germany" }, { "code": "JP", "name": "Japan" } ]

फाइल: `CountrySelector.js` (काल्पनिक कॉम्पोनेंट) import countries from '../data/countries.json' with { type: 'json' }; export class CountrySelector { constructor(elementId) { this.element = document.getElementById(elementId); this.render(); } render() { const options = countries.map(country => `${country.name}` ).join(''); this.element.innerHTML = options; } } // वापर new CountrySelector('country-dropdown');

ते पडद्याआड कसे कार्य करते: होस्ट वातावरणाची भूमिका

इम्पोर्ट ॲट्रिब्यूट्सचे वर्तन होस्ट वातावरणाद्वारे परिभाषित केले जाते. याचा अर्थ ब्राउझर आणि Node.js सारख्या सर्व्हर-साइड रनटाइममध्ये अंमलबजावणीमध्ये थोडे फरक आहेत, जरी परिणाम सुसंगत असतो.

ब्राउझरमध्ये

ब्राउझर संदर्भात, प्रक्रिया HTTP आणि MIME प्रकारांसारख्या वेब मानकांशी घट्टपणे जोडलेली आहे.

1. जेव्हा ब्राउझरला `import data from './data.json' with { type: 'json' }` आढळते, तेव्हा ते `./data.json` साठी HTTP GET विनंती सुरू करते.
2. सर्व्हरला विनंती प्राप्त होते आणि त्याने JSON सामग्रीसह प्रतिसाद दिला पाहिजे. महत्त्वाचे म्हणजे, सर्व्हरच्या HTTP प्रतिसादामध्ये `Content-Type: application/json` हेडर समाविष्ट असणे आवश्यक आहे.
3. ब्राउझरला प्रतिसाद मिळतो आणि तो `Content-Type` हेडर तपासतो.
4. ते हेडरच्या मूल्याची तुलना इम्पोर्ट ॲट्रिब्यूटमध्ये नमूद केलेल्या `type` शी करते.
5. जर ते जुळले, तर ब्राउझर प्रतिसाद बॉडीला JSON म्हणून पार्स करतो आणि मॉड्यूल ऑब्जेक्ट तयार करतो.
6. जर ते जुळत नसतील (उदा. सर्व्हरने `text/html` किंवा `text/javascript` पाठवले), तर ब्राउझर `TypeError` सह मॉड्यूल लोड नाकारतो.

Node.js आणि इतर रनटाइममध्ये

स्थानिक फाइल सिस्टम ऑपरेशन्ससाठी, Node.js आणि Deno MIME प्रकार वापरत नाहीत. त्याऐवजी, फाइल कशी हाताळायची हे ठरवण्यासाठी ते फाइल विस्तार आणि इम्पोर्ट ॲट्रिब्यूटच्या संयोजनावर अवलंबून असतात.

1. जेव्हा Node.js च्या ESM लोडरला `import config from './config.json' with { type: 'json' }` दिसते, तेव्हा ते प्रथम फाइलचा मार्ग ओळखते.
2. ते त्याचा अंतर्गत JSON मॉड्यूल लोडर निवडण्यासाठी `with { type: 'json' }` ॲट्रिब्यूटला एक मजबूत संकेत म्हणून वापरते.
3. JSON लोडर डिस्कवरून फाइलची सामग्री वाचतो.
4. ते सामग्रीला JSON म्हणून पार्स करते. फाइलमध्ये अवैध JSON असल्यास, सिंटॅक्स त्रुटी फेकली जाते.
5. एक मॉड्यूल ऑब्जेक्ट तयार केला जातो आणि परत केला जातो, सामान्यतः पार्स केलेल्या डेटासह `default` एक्सपोर्ट म्हणून.

ॲट्रिब्यूटकडून मिळालेली ही स्पष्ट सूचना संदिग्धता टाळते. Node.js ला निश्चितपणे माहित असते की त्याने फाइलला जावास्क्रिप्ट म्हणून कार्यान्वित करण्याचा प्रयत्न करू नये, मग तिची सामग्री काहीही असो.

ब्राउझर आणि रनटाइम सपोर्ट: हे प्रोडक्शनसाठी तयार आहे का?

नवीन भाषेचे वैशिष्ट्य स्वीकारण्यासाठी लक्ष्यित वातावरणातील त्याच्या समर्थनाचा काळजीपूर्वक विचार करणे आवश्यक आहे. सुदैवाने, JSON साठी इम्पोर्ट ॲट्रिब्यूट्सने जावास्क्रिप्ट इकोसिस्टममध्ये जलद आणि व्यापक स्वीकृती पाहिली आहे. २०२३ च्या उत्तरार्धात, आधुनिक वातावरणात समर्थन उत्कृष्ट आहे.

• Google Chrome / Chromium Engines (Edge, Opera): आवृत्ती 117 पासून समर्थित.
• Mozilla Firefox: आवृत्ती 121 पासून समर्थित.
• Safari (WebKit): आवृत्ती 17.2 पासून समर्थित.
• Node.js: आवृत्ती 21.0 पासून पूर्णपणे समर्थित. पूर्वीच्या आवृत्त्यांमध्ये (उदा. v18.19.0+, v20.10.0+), ते `--experimental-import-attributes` फ्लॅगमागे उपलब्ध होते.
• Deno: एक प्रगतीशील रनटाइम म्हणून, Deno ने या वैशिष्ट्याला (असर्शन्समधून विकसित झालेले) आवृत्ती 1.34 पासून समर्थन दिले आहे.
• Bun: आवृत्ती 1.0 पासून समर्थित.

ज्या प्रकल्पांना जुन्या ब्राउझर किंवा Node.js आवृत्त्यांना समर्थन देण्याची आवश्यकता आहे, त्यांच्यासाठी Vite, Webpack (योग्य लोडर्ससह), आणि Babel (ट्रान्सफॉर्म प्लगइनसह) सारखी आधुनिक बिल्ड टूल्स आणि बंडलर्स नवीन सिंटॅक्सला सुसंगत स्वरूपात ट्रान्सपाईल करू शकतात, ज्यामुळे तुम्हाला आज आधुनिक कोड लिहिण्याची परवानगी मिळते.

JSON च्या पलीकडे: इम्पोर्ट ॲट्रिब्यूट्सचे भविष्य

JSON हा पहिला आणि सर्वात प्रमुख उपयोग असला तरी, `with` सिंटॅक्स विस्तारासाठी डिझाइन केले गेले होते. हे मॉड्यूल इम्पोर्ट्सना मेटाडेटा जोडण्यासाठी एक सामान्य यंत्रणा प्रदान करते, ज्यामुळे इतर प्रकारच्या नॉन-जावास्क्रिप्ट संसाधनांना ES मॉड्यूल सिस्टममध्ये समाकलित करण्याचा मार्ग मोकळा होतो.

CSS मॉड्यूल स्क्रिप्ट्स

पुढील मोठे वैशिष्ट्य म्हणजे CSS मॉड्यूल स्क्रिप्ट्स. हा प्रस्ताव डेव्हलपर्सना CSS स्टाइलशीट्स थेट मॉड्यूल म्हणून इम्पोर्ट करण्याची परवानगी देतो:

import sheet from './styles.css' with { type: 'css' }; document.adoptedStyleSheets = [sheet];

जेव्हा एखादी CSS फाइल या प्रकारे इम्पोर्ट केली जाते, तेव्हा ती `CSSStyleSheet` ऑब्जेक्टमध्ये पार्स केली जाते जी प्रोग्रामॅटिकली डॉक्युमेंट किंवा शॅडो DOM वर लागू केली जाऊ शकते. वेब कॉम्पोनेंट्स आणि डायनॅमिक स्टाइलिंगसाठी ही एक मोठी झेप आहे, ज्यामुळे DOM मध्ये `