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

Par bezzy, il y a 9 ans

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, il y a 9 ans

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, il y a 9 ans

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; }; }