क्या केवल शीर्ष तत्व के आंतरिक पाठ प्राप्त करने का कोई तरीका है (और बच्चे तत्व के आंतरिक पाठ को अनदेखा करें)?

Question

क्या केवल शीर्ष तत्व के आंतरिक पाठ प्राप्त करने का कोई तरीका है (और बच्चे तत्व के आंतरिक पाठ को अनदेखा करें)?

उदाहरण:

<div> 
    top node text 
    <div> child node text </div> 
</div> 

कैसे जबकि "चाइल्ड नोड पाठ" अनदेखी "शीर्ष नोड पाठ" पाने के लिए? शीर्ष div की आंतरिक पाठ संपत्ति आंतरिक, शीर्ष पाठ दोनों के संयोजन को वापस करने लगती है।

Answer 1

बस बच्चे नोड पर पुनरावृति और श्रेणीबद्ध पाठ नोड्स:

var el = document.getElementById("your_element_id"), 
    child = el.firstChild, 
    texts = []; 

while (child) { 
    if (child.nodeType == 3) { 
     texts.push(child.data); 
    } 
    child = child.nextSibling; 
} 

var text = texts.join(""); 

Answer 2

1. तत्व क्लोन करें।
2. सभी बच्चे नोड्स (पीछे की ओर, विवादों से बचने के लिए) के माध्यम से लूप:
   यदि तत्व में tagName विशेषता है, तो यह एक तत्व है: नोड निकालें।
3. पाठ सामग्री प्राप्त करने के लिए innerText का उपयोग करें (पर फ़ॉलबैक के साथ, innerText समर्थित नहीं है)।

कोड:

var elem = document.getElementById('theelement'); 
elem = elem.cloneNode(true); 
for (var i=elem.childNodes.length-1; i>=0; i--) { 
    if (elem.childNodes[i].tagName) elem.removeChild(elem.childNodes[i]); 
} 
var innerText = elem['innerText' in elem ? 'innerText' : 'textContent']; 

Answer 3

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

function getInnerText(el) { 
    var x = []; 
    var child = el.firstChild; 
    while (child) { 
     if (child.nodeType == 3) { 
      x.push(child.nodeValue); 
     } 
     else if (child.nodeType == 1) { 
      var ii = getInnerText(child); 
      if (ii.length > 0) x.push(ii); 
     } 
     child = child.nextSibling; 
    } 
    return x.join(" "); 
} 

Answer 4

यह आपके उदाहरण में काम करेगा: document.getElementById("item").firstChild.nodeValue;

नोट: ध्यान रखें कि इस यदि आप जानते हैं आप उस विशिष्ट HTML के साथ काम कर रहे हैं काम करेंगे। अपने HTML उदाहरण के लिए, बदल सकते हैं:

<div> 
    <div class="item"> child node text </div> 
    top node text 
</div> 

तो आप @Tim Down

---

यहाँ से अधिक सामान्य समाधान का उपयोग करना चाहिए काम कर रहा है कोड का टुकड़ा:

window.onload = function() { 
 
    var text = document.getElementById("item").firstChild.nodeValue; 
 
    document.getElementById("result").innerText = text.trim(); 
 
};

#result { 
 
    border: 1px solid red; 
 
}

<div id="item"> 
 
    top node text 
 
    <div> child node text </div> 
 
</div> 
 

 

 

 
<strong>Result:</strong> <div id="result"></div>