File Transfer Protocol (FTP): Port 20 (Data) and Port 21 (Control) Notes in Hindi : FTP प्रोटोकॉल: पोर्ट 20 (डेटा) और पोर्ट 21 (कंट्रोल कनेक्शन) और 20 महत्वपूर्ण MCQ प्रश्न (Rajasthan IT Exam)

PGDCA, BCA, B-Tech, MCA, M-Tech, B.Sc computer science राजस्थान सूचना सहायक व कंप्यूटर शिक्षक विशेष नोट्स: इस अध्याय में हम JavaScript DOM Manipulation: textContent, innerHTML, setAttribute (DOM मैनिपुलेशन: HTML बदलना, स्टाइल जोड़ना और एट्रिब्यूट बदलना) की संपूर्ण थ्योरी, मुख्य तकनीकी बिंदु, तुलनात्मक तालिका और विगत परीक्षाओं के पैटर्न पर आधारित 20 अति-महत्वपूर्ण बहुविकल्पीय प्रश्न (MCQs) विस्तृत हिंदी व अंग्रेजी व्याख्या सहित पढ़ेंगे।

Overview: DOM Manipulation APIs—including textContent, innerText, innerHTML, setAttribute, classList, and style—govern how scripts safely update visible text, HTML markup, attributes, and CSS classes.

अध्याय सार: DOM मैनिपुलेशन प्रॉपर्टीज़ जैसे textContent, innerHTML, setAttribute और classList की सहायता से JavaScript द्वारा वेब पेज का टेक्स्ट, HTML मार्कअप, एट्रिब्यूट्स और CSS क्लासेज डायनामिक रूप से बदले जाते हैं।

JavaScript DOM Manipulation: textContent, innerHTML, setAttribute: Detailed Notes & Architecture (DOM मैनिपुलेशन: HTML बदलना, स्टाइल जोड़ना और एट्रिब्यूट बदलना)

1. textContent vs innerText vs innerHTML (textContent, innerText और innerHTML में अंतर)

[EN] textContent reads or writes raw plain text across all child nodes (including hidden elements and <script>/<style> tags) without invoking HTML parsing or CSS reflow. innerText is CSS-aware: it excludes hidden elements (display:none) and preserves visual formatting. innerHTML parses HTML markup, which can create DOM XSS vulnerabilities if untrusted input is injected.

[HI] textContent बिना HTML पार्सिंग व बिना CSS रिफ्लो के तेज गति से सादा टेक्स्ट (छिपे टेक्स्ट सहित) पढ़ता/बदलता है। innerText CSS से प्रभावित होकर केवल दिखने वाला टेक्स्ट देता है। innerHTML टैग्स को HTML के रूप में पार्स करता है, इसलिए अविश्वसनीय इनपुट से XSS खतरा हो सकता है।

2. Attribute Manipulation: getAttribute, setAttribute & dataset (एट्रिब्यूट प्रबंधन एवं data-* एट्रिब्यूट्स)

[EN] Standard attributes can be controlled via setAttribute(name, val), getAttribute(name), hasAttribute(name), and removeAttribute(name). Custom data-* attributes (such as data-user-id='42') map automatically into camelCase keys on element.dataset (element.dataset.userId), offering clean state storage directly on DOM tags.

[HI] setAttribute, getAttribute और removeAttribute किसी भी HTML एट्रिब्यूट को नियंत्रित करते हैं। कस्टम data-* एट्रिब्यूट्स (जैसे data-roll-no='10') JavaScript में element.dataset.rollNo के रूप में सीधे उपलब्ध हो जाते हैं।

3. Managing CSS Classes with classList (classList द्वारा CSS क्लास प्रबंधन)

[EN] Instead of overwriting element.className strings manually, element.classList provides clean token methods: add(), remove(), toggle() (which accepts a second force boolean), contains(), and replace(oldClass, newClass), preserving existing classes safely.

[HI] पूरी className स्ट्रिंग बदलने के बजाय element.classList के add(), remove(), toggle(), contains() और replace() मेथड्स बिना अन्य क्लासेज को नुकसान पहुंचाए स्टाइल टॉगल करते हैं।

4. Inline Styles & CSS Custom Properties (इनलाइन स्टाइल व CSS वेरिएबल्स नियंत्रण)

[EN] The element.style property edits inline style attributes using camelCase property names (e.g., backgroundColor instead of background-color). To update CSS custom properties (like '--theme-color') or read final browser-rendered styles from external stylesheets, use style.setProperty('--theme-color', '#fff') and window.getComputedStyle(el).

[HI] element.style के लिए camelCase नाम (जैसे fontSize, backgroundColor) प्रयुक्त होते हैं। बाहरी CSS फाइल से लागू अंतिम स्टाइल पढ़ने के लिए window.getComputedStyle(el) उपयोग किया जाता है।

Syntax, Formula & Technical Example (JavaScript DOM Manipulation: textContent, innerHTML, setAttribute)

const box = document.getElementById('status');
box.textContent = '<b>Safe Plain Text</b>';   // Renders literal <b> tags
box.classList.add('active', 'highlight');
box.classList.toggle('hidden', false);         // Force-removes 'hidden'
box.setAttribute('aria-live', 'polite');
box.dataset.topicCode = 'DOM303';              // Sets data-topic-code="DOM303"

JavaScript DOM Manipulation: textContent, innerHTML, setAttribute Quick Reference & Comparison Table

API / Property	Primary Mechanism	Security & Performance Note
textContent	Reads/writes raw text without HTML parsing	XSS-safe and fastest, ignores CSS visibility
innerText	Reads/writes rendered visible text only	Triggers CSS layout reflow, skips display:none
innerHTML	Parses HTML string into DOM nodes	Unsafe for user input (XSS risk)
classList	DOMTokenList interface on class attribute	Provides add, remove, toggle, contains

JavaScript DOM Manipulation: textContent, innerHTML, setAttribute Top 20 Bilingual MCQs with Answers

Q1. Which property updates an element with user-supplied text while preventing Cross-Site Scripting (XSS)?

(यूज़र द्वारा दिए गए टेक्स्ट को XSS खतरे से बचाकर सुरक्षित रूप से दिखाने के लिए कौन सी प्रॉपर्टी सबसे उपयुक्त है?)

(A) document.write()

(B) element.outerHTML

(C) element.innerHTML

(D) element.textContent

Correct Answer: (D)

[EN] textContent escapes markup automatically by storing pure text nodes, preventing injected <script> or event handlers from executing.

[HI] textContent टेक्स्ट को HTML टैग के रूप में पार्स नहीं करता, जिससे स्क्रिप्ट इंजेक्शन (XSS) नहीं हो पाता।

Q2. What happens when you read el.textContent vs el.innerText on <div style='display:none'>Secret</div>?

(<div style='display:none'>Secret</div> पर textContent बनाम innerText पढ़ने से क्या मिलेगा?)

(A) Both return 'Secret'

(B) textContent returns 'Secret', whereas innerText returns '' (empty string)

(C) Both return ''

(D) innerText throws a CSSVisibilityError

Correct Answer: (B)

[EN] innerText respects CSS styling and omits hidden text, while textContent reads raw DOM text nodes directly.

[HI] innerText CSS के display:none का सम्मान करते हुए खाली स्ट्रिंग देता है, जबकि textContent 'Secret' लौटाता है।

Q3. How is HTML attribute data-course-name='BCA' accessed in JavaScript using element.dataset?

(HTML एट्रिब्यूट data-course-name='BCA' को JavaScript में element.dataset से कैसे एक्सेस किया जाता है?)

(A) element.data.courseName

(B) element.getAttribute.courseName

(C) element.dataset.courseName

(D) element.dataset['course-name']

Correct Answer: (C)

[EN] Hyphenated data-* attribute suffixes convert automatically to camelCase properties on element.dataset.

[HI] हाइफन वाले data-* एट्रिब्यूट नाम dataset ऑब्जेक्ट में स्वतः camelCase (courseName) बन जाते हैं।

Q4. Which statement about element.innerHTML += '<p>New</p>' inside a container with event listeners is TRUE?

(इवेंट लिसनर्स वाले कंटेनर में element.innerHTML += '<p>New</p>' चलाने पर क्या प्रभाव पड़ता है?)

(A) It blocks all CSS transitions permanently

(B) It appends safely like insertAdjacentHTML

(C) It serializes and recreates all existing child nodes, destroying existing JS event listeners on them

(D) It preserves all existing child references and listeners

Correct Answer: (C)

[EN] Using innerHTML += destroys and rebuilds the entire subtree; insertAdjacentHTML or appendChild preserves existing nodes.

[HI] innerHTML += पुराने पूरे कंटेंट को नष्ट कर दोबारा बनाता है जिससे अंदर लगे इवेंट लिसनर्स हट जाते हैं।

Q5. Which method checks if an HTML element currently has the CSS class 'open'?

(यह जांचने के लिए कि किसी एलिमेंट में 'open' CSS क्लास मौजूद है या नहीं, कौन सा मेथड है?)

(A) el.classList.has('open')

(B) el.classList.contains('open')

(C) el.hasClass('open')

(D) el.classList.includes('open')

Correct Answer: (B)

[EN] DOMTokenList defines .contains(token) to return a boolean indicating class presence.

[HI] classList ऑब्जेक्ट पर .contains('open') मेथड true या false लौटाता है।

Q6. What does el.classList.toggle('dark', isDark) do when isDark is boolean false?

(जब isDark का मान false हो, तो el.classList.toggle('dark', isDark) क्या करता है?)

(A) Unconditionally removes 'dark' if present (never adds it)

(B) Always flips its current state

(C) Throws a TypeError

(D) Adds 'dark' unconditionally

Correct Answer: (A)

[EN] The optional second boolean force parameter ensures false strictly removes the class and true strictly adds it.

[HI] दूसरा पैरामीटर false होने पर 'dark' क्लास को हटाया ही जाता है (यदि हो तो), जोड़ा नहीं जाता।

Q7. How do you set CSS background-color via JavaScript's element.style property?

(JavaScript की element.style प्रॉपर्टी से CSS background-color कैसे बदला जाता है?)

(A) el.css.backgroundColor = 'blue'

(B) el.style.backgroundColor = 'blue'

(C) el.style.bgColor = 'blue'

(D) el.style['background-color'] = 'blue'

Correct Answer: (B)

[EN] Hyphenated CSS properties map to camelCase keys on the CSSStyleDeclaration object (el.style).

[HI] JavaScript में style ऑब्जेक्ट पर हाइफन हटाकर camelCase (backgroundColor) लिखा जाता है।

Q8. Which method retrieves the final browser-calculated CSS width from external stylesheets?

(बाहरी CSS फाइल से लागू हुई किसी एलिमेंट की वास्तविक चौड़ाई (width) कैसे पढ़ी जाती है?)

(A) el.style.width

(B) window.getComputedStyle(el).width

(C) document.cssStyle(el).width

(D) el.getAttribute('style-width')

Correct Answer: (B)

[EN] el.style only reads inline style attributes; window.getComputedStyle(el) resolves external and inherited CSS rules.

[HI] el.style केवल इनलाइन स्टाइल पढ़ता है; बाहरी CSS से लागू मान पढ़ने के लिए window.getComputedStyle(el) चाहिए।

Q9. What value does el.setAttribute('disabled', '') apply to a <button>?

(किसी <button> पर el.setAttribute('disabled', '') लगाने से क्या प्रभाव होता है?)

(A) The button stays enabled because value is empty

(B) The attribute is deleted

(C) Throws InvalidAttributeValue

(D) The button becomes disabled because HTML boolean attributes activate by presence regardless of empty string

Correct Answer: (D)

[EN] Boolean HTML attributes (disabled, readonly, checked) take effect simply by existing on the tag.

[HI] HTML बूलियन एट्रिब्यूट्स केवल मौजूद होने भर से सक्रिय हो जाते हैं, चाहे वैल्यू खाली स्ट्रिंग हो।

Q10. Which method inserts an HTML string right before the closing tag of target without destroying existing children?

(मौजूदा चाइल्ड नोड्स को नष्ट किए बिना किसी एलिमेंट के अंत में HTML स्ट्रिंग जोड़ने का सुरक्षित मेथड कौन सा है?)

(A) el.replaceChildren(htmlStr)

(B) el.insertAdjacentHTML('beforeend', htmlStr)

(C) el.outerHTML = htmlStr

(D) el.innerHTML += htmlStr

Correct Answer: (B)

[EN] insertAdjacentHTML('beforeend', ...) parses only the new HTML fragment and appends it without re-parsing sibling nodes.

[HI] insertAdjacentHTML('beforeend', ...) पुराने एलिमेंट्स व इवेंट्स को छेड़े बिना अंत में नया HTML जोड़ता है।

Q11. What does setting el.outerHTML = '<div>Replaced</div>' replace?

(el.outerHTML = '<div>Replaced</div>' चलाने पर क्या बदलता है?)

(A) The element itself along with all of its descendants

(B) Only the parent element

(C) Only the text inside el

(D) Only attributes on el

Correct Answer: (A)

[EN] Unlike innerHTML (which replaces inner content), outerHTML replaces the entire target tag itself.

[HI] innerHTML केवल अंदर का हिस्सा बदलता है, जबकि outerHTML स्वयं उस पूरे एलिमेंट को भी बदल देता है।

Q12. How do you remove a custom or disabled attribute cleanly from a DOM element?

(किसी DOM एलिमेंट से 'disabled' या कोई अन्य एट्रिब्यूट पूरी तरह हटाने का सही तरीका क्या है?)

(A) delete el.disabled

(B) el.removeAttribute('disabled')

(C) el.attributes.pop('disabled')

(D) el.setAttribute('disabled', 'false')

Correct Answer: (B)

[EN] Setting 'disabled' to 'false' string keeps a boolean attribute active in HTML; removeAttribute() properly removes it.

[HI] setAttribute('disabled', 'false') भी बटन को बंद रखेगा, इसलिए removeAttribute() का उपयोग जरूरी है।

Q13. Which method replaces class 'btn-gray' directly with 'btn-blue' in one call?

(एक ही कॉल में 'btn-gray' क्लास को हटाकर 'btn-blue' लगाने का classList मेथड कौन सा है?)

(A) el.classList.replace('btn-gray', 'btn-blue')

(B) el.classList.change('btn-gray', 'btn-blue')

(C) el.className.replace('btn-gray')

(D) el.classList.swap('btn-gray', 'btn-blue')

Correct Answer: (A)

[EN] classList.replace(oldClass, newClass) swaps the class if oldClass exists and returns true/false.

[HI] classList.replace() सीधे पुरानी क्लास को नई क्लास से बदल देता है।

Q14. Why do browsers block inline <script>alert(1)</script> inserted via innerHTML per HTML5 specification?

(HTML5 विनिर्देश के अनुसार innerHTML द्वारा डाले गए <script>alert(1)</script> क्यों नहीं चलते?)

(A) DOM ignores all script tags completely

(B) HTML5 forbids executing <script> elements inserted via innerHTML to reduce accidental execution, though event attributes like onerror still run

(C) HTML5 converts scripts into plain text

(D) Browsers lack JS parsers after page load

Correct Answer: (B)

[EN] Per HTML5, <script> inserted via innerHTML will not execute, whereas <img src=x onerror=...> DOES execute (still an XSS vector!).

[HI] HTML5 में innerHTML से <script> नहीं चलता, पर <img onerror=...> जैसे कोड चल सकते हैं इसलिए XSS खतरा बना रहता है।

Q15. Which method sets a CSS custom property (variable) like --accent via JS?

(JavaScript से CSS कस्टम प्रॉपर्टी (वेरिएबल) जैसे --accent का मान कैसे सेट किया जाता है?)

(A) el.style.setProperty('--accent', '#2b6cb0')

(B) el.style.--accent = '#2b6cb0'

(C) el.dataset.accent = '#2b6cb0'

(D) el.setAttribute('--accent', '#2b6cb0')

Correct Answer: (A)

[EN] CSS variables require style.setProperty('--var-name', value) because camelCase conversion does not apply to '--'.

[HI] CSS वेरिएबल्स ('--accent') के लिए camelCase काम नहीं करता; style.setProperty() का उपयोग किया जाता है।

Q16. What does el.hasAttribute('href') return on <a title='Home'>?

(<a title='Home'> टैग पर el.hasAttribute('href') चलाने पर क्या लौटेगा?)

(A) undefined

(B) false

(C) ''

(D) null

Correct Answer: (B)

[EN] hasAttribute() returns a boolean indicating whether the attribute exists on the element.

[HI] hasAttribute() जांचता है कि वह एट्रिब्यूट टैग में है या नहीं और true/false लौटाता है।

Q17. Within JavaScript DOM Manipulation: textContent, innerHTML, setAttribute, which api / property directly maps to: "Reads/writes raw text without HTML parsing"?

(JavaScript DOM Manipulation: textContent, innerHTML, setAttribute में कौन सा API / Property सीधे "Reads/writes raw text without HTML parsing" से संबंधित है?)

(A) innerText

(B) classList

(C) textContent

(D) innerHTML

Correct Answer: (C)

[EN] In JavaScript DOM Manipulation: textContent, innerHTML, setAttribute, 'textContent' handles 'Reads/writes raw text without HTML parsing' (XSS-safe and fastest, ignores CSS visibility).

[HI] JavaScript DOM Manipulation: textContent, innerHTML, setAttribute में 'textContent' का कार्य/विवरण 'Reads/writes raw text without HTML parsing' (XSS-safe and fastest, ignores CSS visibility) है।

Q18. Which option accurately describes 'innerText' in JavaScript DOM Manipulation: textContent, innerHTML, setAttribute?

(JavaScript DOM Manipulation: textContent, innerHTML, setAttribute के संदर्भ में 'innerText' की सही विशेषता कौन सी है?)

(A) DOMTokenList interface on class attribute

(B) Parses HTML string into DOM nodes

(C) Reads/writes rendered visible text only

(D) Reads/writes raw text without HTML parsing

Correct Answer: (C)

[EN] 'innerText' provides 'Reads/writes rendered visible text only' — key point: Triggers CSS layout reflow, skips display:none.

[HI] 'innerText' का मुख्य विवरण 'Reads/writes rendered visible text only' है (Triggers CSS layout reflow, skips display:none)।

Q19. In JavaScript DOM Manipulation: textContent, innerHTML, setAttribute, identify the correct parameter for the specification: "Parses HTML string into DOM nodes".

(JavaScript DOM Manipulation: textContent, innerHTML, setAttribute में "Parses HTML string into DOM nodes" विवरण किस विकल्प के लिए सही है?)

(A) classList

(B) innerHTML

(C) textContent

(D) innerText

Correct Answer: (B)

[EN] 'innerHTML' corresponds to 'Parses HTML string into DOM nodes' (Unsafe for user input (XSS risk)).

[HI] 'innerHTML' का संबंध 'Parses HTML string into DOM nodes' (Unsafe for user input (XSS risk)) से है।

Q20. Considering JavaScript DOM Manipulation: textContent, innerHTML, setAttribute, what key behavior defines 'classList'?

(JavaScript DOM Manipulation: textContent, innerHTML, setAttribute में 'classList' की मुख्य भूमिका या मान क्या है?)

(A) Parses HTML string into DOM nodes

(B) Reads/writes rendered visible text only

(C) Reads/writes raw text without HTML parsing

(D) DOMTokenList interface on class attribute

Correct Answer: (D)

[EN] 'classList' represents 'DOMTokenList interface on class attribute' (Provides add, remove, toggle, contains).

[HI] 'classList' का अर्थ/मान 'DOMTokenList interface on class attribute' है (Provides add, remove, toggle, contains)।

JavaScript DOM Manipulation: textContent, innerHTML, setAttribute — Exam FAQs

Q1: What is the exact difference between element.checked (DOM property) and element.getAttribute('checked')?

element.checked प्रॉपर्टी और getAttribute('checked') में क्या अंतर है?

[EN] getAttribute('checked') returns the initial HTML attribute state, while element.checked returns the live boolean state updated when the user clicks the checkbox.

[HI] getAttribute('checked') HTML में लिखी शुरुआती स्थिति बताता है, जबकि element.checked यूजर के क्लिक से बदली लाइव स्थिति (true/false) देता है।

Q2: Is insertAdjacentHTML safer than innerHTML against XSS?

क्या insertAdjacentHTML, innerHTML की तुलना में XSS से सुरक्षित है?

[EN] No—both parse HTML markup. Never pass untrusted user input into either; always use textContent or sanitize input first.

[HI] नहीं—दोनों HTML पार्स करते हैं। अविश्वसनीय यूजर इनपुट के लिए हमेशा textContent उपयोग करें।

Q3: Why is textContent faster than innerText?

textContent, innerText की तुलना में तेज़ क्यों होता है?

[EN] textContent reads raw DOM strings immediately, while innerText forces the browser to compute CSS layout (reflow) to check element visibility.

[HI] textContent सीधे DOM टेक्स्ट पढ़ता है, जबकि innerText को दिखने वाला टेक्स्ट तय करने के लिए CSS लेआउट गणना (Reflow) करनी पड़ती है।

Web Technology