Echivalentul nativ JavaScript al text() pentru un singur element selectat (Programare, Javascript)

user1032531 a intrebat.

Cum aș putea returna Some Text, , <a href="abc.html">Some Anchor</a>, , și <img src="abc.jpg" /> din următoarele trei elemente fără a utiliza jQuery? Cu alte cuvinte, cum aș putea să returnez $('#t1).text(), , $('#t2).text(), , $('#t3).text() fără a utiliza jQuery? Nu am nevoie să returnez o matrice dacă sunt mai multe elemente, deoarece voi selecta doar un singur element la un moment dat.

<td id="t1">Some Text</td>
<td id="t2"><a href="abc.html">Some Anchor</a></td>
<td id="t3"><img src="abc.jpg" /><td>

jQuery face text() după cum urmează. Pare exagerat, deoarece nu sunt îngrijorat de returnarea unui array pentru mai multe elemente.

text: function( value ) {
    return jQuery.access( this, function( value ) {
        return value === undefined ?
            jQuery.text( this ) :
            this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) );
    }, null, value, arguments.length );
},

Mulțumesc

Comentarii

  • $('#t2') ar returna Some Anchor, , nu <a href.... Același lucru pentru $('#t3'). –  > Por Florian Margaine.
  • Poți să citești doar innerHTML după ce ați folosit document.getElementById()? –  > Por Gordon Gustafson.
  • @CrazyJugglerDrummer. Nu, va funcționa doar pentru <a> și <img>, nu și pentru nodul text. –  > Por user1032531.
  • trebuie să vă ocupați de acest caz <a>a <b>b</b> c</a> și să recuperați a b c? –  > Por capră.
  • @FlorianMargaine. Aveți dreptate. Cred că ar fi echivalent cu .html(). –  > Por user1032531.
2 răspunsuri
Bruno

Poți prelua textul unui nod(e) astfel:

var el = document.getElementById("t1");
var text = el.textContent || el.innerText;

Mai multe informații despre textContent și innerText pe site-ul MDN aici

Comentarii

  • Ah ha, mulțumesc! Prima dată am folosit el.data și a funcționat fără elementele html. Mai târziu am încercat innerHTML și a greșit la valorile textului. Sunt doar curios, de ce textContent în loc de data și innerText în loc de innerHTML? –  > Por user1032531.
  • @user103252531 innerText este versiunea IE a textContent. Un lucru la care trebuie să aveți grijă cu innerText este că nu va returna textul ascuns. Pentru mai multe informații, consultați linkul către MDN. Ei explică mult mai bine decât aș putea eu vreodată 🙂 –  > Por Bruno.
Florian Margaine

data este o proprietate asupra Nodurilor pentru a obține datele sale (nerecursivă). innerHTML este HTML, o proprietate asupra elementelor. textContent este o proprietate standard pentru a obține textul (fără HTML) al unui Element. innerText este modul nestandardizat al vechiului IE pentru a obține textContent.

Acum ar trebui să știți de ce aveți nevoie 🙂

Comentarii

  • Mulțumesc Florian, acum știu mai multe! –  > Por user1032531.