नोडल्यू बनाम इनर HTML और टेक्स्टकॉन्टेंट। कैसे चुनाव करें?

Question

मैं एक लेबल तत्व के आंतरिक पाठ को बदलने के लिए सादे js का उपयोग कर रहा हूं, और मुझे इस बात पर यकीन नहीं था कि मुझे किस आधार पर आंतरिक HTML या नोडवैल्यू या टेक्स्टकॉन्टेंट का उपयोग करना चाहिए। मुझे एक नया नोड बनाने या HTML तत्वों या किसी भी चीज़ को बदलने की ज़रूरत नहीं है - बस पाठ को बदलें। यहाँ कोड का एक उदाहरण है:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

मैंने jQuery स्रोत के माध्यम से देखा, और यह एक बार में बिलकुल एक बार लेकिन भीतर HTML और textContent नोडवैल्यू का उपयोग करता है। तब मुझे यह jsperf टेस्ट मिला जो इंगित करता है कि firstChild.nodeValue काफी तेज है। कम से कम यही है कि मैं इसका मतलब क्या है।

अगर FirstChild.nodeValue इतना तेज है, तो क्या पकड़ है? क्या यह व्यापक रूप से समर्थित नहीं है? क्या कोई और मुद्दा है?

Answer 1

MDN पर textContent / innerText / innerHTML के बीच अंतर।

और इंटरटेक्स्ट / नोडवैल्यू के बारे में एक स्टैकओवरफ़्लो उत्तर।

सारांश

1. आंतरिक HTML HTML के रूप में सामग्री को पार्स करता है, इसलिए इसमें अधिक समय लगता है।
2. नोडवैल्यू सीधे पाठ का उपयोग करता है, HTML को पार्स नहीं करता है, और तेज है।
3. textContent सीधे पाठ का उपयोग करता है, HTML को पार्स नहीं करता है, और तेज है।
4. इनरटेक्स्ट शैलियों को ध्यान में रखता है । उदाहरण के लिए इसमें छिपा हुआ पाठ नहीं मिलेगा।

innerTextCaniuse के अनुसार फ़ायरफ़ॉक्स 45 तक फ़ायरफ़ॉक्स में मौजूद नहीं था, लेकिन अब सभी प्रमुख ब्राउज़रों में समर्थित है।

Comments

उह, nodeValuehtml को या तो पार्स नहीं करता

— Bergi

"TextContent के उपयोग से XSS के हमलों को रोका जा सकता है" developer.mozilla.org/en-US/docs/Web/API/Node/textContent

— DRP

Answer 2

.textContentआउटपुट text/plainकरते समय .innerHTMLआउटपुट text/html।

त्वरित उदाहरण:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

आउटपुट: <a href="http://google.com"> Google </a>

example.innerHTML = '<a href="https://google.com">google</a>';

आउटपुट: गूगल

आप पहले उदाहरण से देख सकते हैं कि text/plainब्राउज़र द्वारा प्रकार का आउटपुट पार्स नहीं किया गया है और परिणाम पूर्ण सामग्री प्रदर्शित करता है। प्रकार का आउटपुट text/htmlब्राउज़र को प्रदर्शित करने से पहले उसे पार्स करने के लिए कहता है।

MDN innerHTML , MDN textContent , MDN नोडवैल्यू

Answer 3

जिन दो को मैं अच्छी तरह से जानता हूं और जिनके साथ काम करते हैं वे हैं भीतर की HTML और textContent ।

जब मैं सिर्फ एक पैराग्राफ का पाठ बदलना चाहता हूं या जैसा है, तो मैं टेक्स्ट कॉन्टेंट का उपयोग करता हूं:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

इसलिए, TextContent बस पाठ को बदलता है, लेकिन यह HTML को पार्स नहीं करता है, जैसा कि हम परिणाम में सादे पाठ में दिखाई देने वाले टैग से बता सकते हैं।

यदि हम HTML को पार्स करना चाहते हैं, तो हम इस तरह इनर HTML का उपयोग करते हैं:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

तो, वह दूसरा उदाहरण HTML के रूप में DOM तत्व की आंतरिक HTML प्रॉपर्टी पर दिए गए स्ट्रिंग को पार्स करता है ।

यह कमाल है, और एक बड़ी सुरक्षा भेद्यता:)

(यदि आप इसके लिए सुरक्षा के बारे में जानना चाहते हैं तो XSS देखें)

Answer 4

अगर आपने पाठ का चयन किया और इसे कॉपी किया तो इनरटेक्स्ट लगभग है। जो तत्व प्रदान नहीं किए गए हैं वे इनरटेक्स्ट में मौजूद नहीं हैं।

textContent उप-ट्री में सभी TextNodes के मूल्यों का एक संयोजन है । रेंडर किया गया या नहीं।

यहाँ मतभेदों का विवरण देने वाली एक बेहतरीन पोस्ट है

innerHTML , innerText या textContent के साथ एक तुलना में शामिल नहीं किया जाना चाहिए के रूप में यह पूरी तरह से अलग है, और तुम सच में जानना क्यों :-) यह देखो ऊपर अलग से चाहिए

Comments

आप भीतर के HTML के बारे में जो कुछ कहते हैं, वह मेरे लिए इतना स्पष्ट है कि मुझे समझ में नहीं आता कि बहुत सारे ऐसे क्यों हैं जो इसे नहीं मिला।

— user34660

Answer 5

[नोट: यह पोस्ट एक विशिष्ट डेटा साझा करने के बारे में अधिक है जो किसी को यह बताने में मदद कर सकता है कि लोगों को क्या करना है]

अगर कोई सोच रहा है कि आज सबसे तेज क्या है: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( दूसरे परीक्षण के लिए, अवधि की सामग्री सादा पाठ है, परिणाम इसकी सामग्री के अनुसार बदल सकते हैं)

ऐसा लगता है कि .innerHtmlशुद्ध गति के मामले में महान विजेता है!

(नोट: मैं केवल यहाँ गति के बारे में बात कर रहा हूँ, आप यह चुनने से पहले दूसरों के मापदंड देखना चाह सकते हैं कि कौन सा उपयोग करना है!)

Answer 6

Element.innerHTML की संपत्ति setया getHTML कोड के लिए गुण ।

Ex: हमारे पास इसके साथ एक <h1>टैग और मजबूत शैली है:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> करने के लिए getतत्व की सामग्री आईडी "myHeader" के बराबर होती है, हम क्या करेंगे एक ही है:

var element = document.getElementById("myHeader");
element.innerHTML

वापसी परिणाम:

<strong>My Header</strong> Normal Text`

इस तत्व के लिए नई सामग्री (मान) सेट करने के लिए, कोड यहां होगा:

Element.innerHTML = "My Header My Text";

इसलिए यह संपत्ति न केवल सादे पाठ के साथ काम करती है, बल्कि इसका उद्देश्य HTML कोड को पारित या कॉपी करना है।

=> हमें इसका उपयोग नहीं करना चाहिए।

हालाँकि, कई प्रोग्रामर (स्वयं सहित) वेब पेज में टेक्स्ट डालने के लिए इस विशेषता का उपयोग करते हैं, और यह विधि एक संभावित जोखिम वहन करती है:

1. गलत संचालन: केवल प्रत्येक पाठ को सम्मिलित करना कभी-कभी सम्मिलित तत्व के अन्य सभी HTML कोड को हटा देता है।
2. सुरक्षा के लिए: बेशक, ऊपर दिए गए दो उदाहरण पूरी तरह से हानिरहित हैं, भले ही टैग का उपयोग करना अभी भी कोई समस्या नहीं है क्योंकि HTML5 मानक ने टैग के अंदर कमांड लाइन के निष्पादन को रोक दिया है। जब वेब पेज में आंतरिक HTML विशेषता के माध्यम से डाला जाता है। इस नियम को यहां देखें ।

इस कारण से, innerHTMLसादे पाठ को सम्मिलित करते समय उपयोग करने की अनुशंसा नहीं की जाती है, इसके बजाय उपयोग करें textContent। textContentसंपत्ति नहीं समझोगे कि कोड आप पारित एक HTML वाक्य रचना है, लेकिन सिर्फ एक 100% पाठ कोई और अधिक और कम नहीं।

textContentउपरोक्त उदाहरण में उपयोग करने पर परिणाम मिलता है :

My Header My Text