Séléctionner un élément sans ses enfants

bezzy
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je séléctionne l'élément par sa classe

var source      =   document.getElementsByClassName("source")[0].si;

Ici mon html

<p class="source">David Allen<span class="citation">Making It All Work</span><span class="year">2009</span></p>

Ce que je veux

Je veux obtenir seulement l'élément avec la classe "source" sans les enfants.

en gros je veux que quand je tape console.log(source)

j'ai une sorti de ce type

<p class="source">David Allen</p>

pour que je puisse le modifier avec innerHTML sans que cela affecte les enfants

Ce que j'obtiens

<p class="source">David Allen<span class="citation">Making It All Work</span><span class="year">2009</span></p>

Le problème est que cela est innexploitable avec un inneHTML.

Merci les gars :)

2 réponses

Ekim Kael
Réponse acceptée

si tu veux modifier juste le texte à l'intérieur tu peux utiliser innerText ou textContent
ou alors une autre idée c'est d'avoir trois enfants dans ton paragraphe et selectionner le premier pour faire tes modifs dessus
exemple: 

<p class="source">
    <span class="author">David Allen</span>
    <span class="citation">Making It All Work</span>
    <span class="year">2009</span>
</p>

je pense ce serait plus facile comme ça et là tu pourras faire : 

var author = document.querySelector('.source .author')

et ton console.log(author) te donnera le resultat que tu souhaites

betaWeb
Réponse acceptée

Salut,

Je pense que la solution que propose @Mich'Kael est adaptée : en modifiant un petit peu l'agencement de tes éléments HTML, tu pourras récupérer plus facilement l'information dont tu as besoin :)

Je te conseille néanmoins d'ajouter ce polyfill afin d'ajouter la méthode querySelector() à l'élément document au cas où celui-ci ne serait pas déclaré (pour IE7 LTE il me semble) :

if (!document.querySelectorAll) {
  document.querySelectorAll = function (selectors) {
    var style = document.createElement('style'), elements = [], element;
    document.documentElement.firstChild.appendChild(style);
    document._qsa = [];

    style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';
    window.scrollBy(0, 0);
    style.parentNode.removeChild(style);

    while (document._qsa.length) {
      element = document._qsa.shift();
      element.style.removeAttribute('x-qsa');
      elements.push(element);
    }
    document._qsa = null;
    return elements;
  };
}

if (!document.querySelector) {
  document.querySelector = function (selectors) {
    var elements = document.querySelectorAll(selectors);
    return (elements.length) ? elements[0] : null;
  };
}