From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/node/textcontent/index.md | 134 +++++++++++------------------ 1 file changed, 51 insertions(+), 83 deletions(-) (limited to 'files/fr/web/api/node/textcontent') diff --git a/files/fr/web/api/node/textcontent/index.md b/files/fr/web/api/node/textcontent/index.md index 63e892d5b6..0b195eaa7a 100644 --- a/files/fr/web/api/node/textcontent/index.md +++ b/files/fr/web/api/node/textcontent/index.md @@ -8,61 +8,56 @@ tags: - Propriétés translation_of: Web/API/Node/textContent --- -

{{APIRef("DOM")}}

+{{APIRef("DOM")}} -

La propriété Node.textContent  représente le contenu textuel d'un nœud et de ses descendants.

+La propriété **`Node.textContent`**  représente le contenu textuel d'un nœud et de ses descendants. -

Syntaxe

+## Syntaxe -
var text = element.textContent;
-element.textContent = "ceci est un simple exemple de texte";
-
+ var text = element.textContent; + element.textContent = "ceci est un simple exemple de texte"; -

Description

+## Description - +- `textContent` renvoie `null` si l'élément est un [document](/fr/docs/Web/API/document), un type de document (doctype) ou une notation. Pour saisir toutes les données textuelles et CDATA pour l'ensemble du document, on peut utiliser `document.documentElement.textContent` . +- Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, `textContent` renvoie le texte à l'intérieur du nœud (la valeur [nodeValue](/fr/docs/Web/API/Node/nodeValue)). +- Pour les autres types de nœuds, `textContent` renvoie la concaténation des valeurs de propriété `textContent` de chaque nœud enfant, à l'exception des commentaires et nœuds d'instructions de traitement. Si le nœud n'a pas d'enfants, il s'agira d'une chaîne vide. +- En définissant cette propriété sur un nœud, on enlève tous ses enfants et ceux-ci sont remplacés par un seul nœud texte avec la valeur donnée. -

Différences avec innerText

+### Différences avec `innerText` -

Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'intention est similaire mais comporte les différences suivantes :

+Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'intention est similaire mais comporte les différences suivantes : - +- `textContent` récupère le contenu de tous les éléments, y compris {{HTMLElement("script")}} et {{HTMLElement("style")}}, ce qui n'est pas le cas de `innerText`. +- `innerText` prend en compte le style de l'élément et ne retournera rien pour les éléments cachés. Aussi, il déclenchera un reflow à l'inverse de `textContent`. +- Comme `innerText` reconnaît le style CSS, il déclenchera une refusion (_reflow_), alors que `textContent` ne le fera pas. +- Contrairement à `textContent`, la modification `innerText` dans Internet Explorer (jusqu'à la version 11 incluse), non seulement supprime les nœuds enfants de l'élément, mais détruit aussi définitivement tout nœud de texte descendant (il est donc impossible d'insérer à nouveau des nœuds dans un autre élément ou dans le même élément) . -

Différences avec innerHTML

+### Différences avec `innerHTML` -

{{domxref("Element.innerHTML")}} renvoie le HTML comme son nom l'indique. Souvent, pour récupérer ou écrire du texte dans un élément, les utilisateurs utilisent innerHTML. Cependant, textContent a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de textContent peut empêcher les attaques XSS.

+{{domxref("Element.innerHTML")}} renvoie le HTML comme son nom l'indique. Souvent, pour récupérer ou écrire du texte dans un élément, les utilisateurs utilisent `innerHTML`. Cependant, `textContent` a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de `textContent` peut empêcher les attaques XSS. -

Exemple

+## Exemple -
// Étant donné le fragment de HTML suivant :
-//   <div id="divA">Ceci est un <span>exemple de</span> texte</div>
+    // Étant donné le fragment de HTML suivant :
+    //   
Ceci est un exemple de texte

 
-// On obtient le contenu textuel :
-var text = document.getElementById("divA").textContent;
-// |text| vaut "Ceci est un exemple de texte".
+    // On obtient le contenu textuel :
+    var text = document.getElementById("divA").textContent;
+    // |text| vaut "Ceci est un exemple de texte".
 
-// On définit le contenu textuel :
-document.getElementById("divA").textContent = "Ceci est un exemple de texte";
-// Le HTML pour divA est à présent <div id="divA">Ceci est un exemple de texte</div>
-
+ // On définit le contenu textuel : + document.getElementById("divA").textContent = "Ceci est un exemple de texte"; + // Le HTML pour divA est à présent
Ceci est un exemple de texte
-

Polyfill pour IE8

+## Polyfill pour IE8 -
// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8
+```js
+// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8
 if (Object.defineProperty
-  && Object.getOwnPropertyDescriptor
-  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
-  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
+  && Object.getOwnPropertyDescriptor
+  && Object.getOwnPropertyDescriptor(Element.prototype, "textContent")
+  && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) {
   (function() {
     var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
     Object.defineProperty(Element.prototype, "textContent",
@@ -78,48 +73,21 @@ if (Object.defineProperty
      }
    );
   })();
-}
- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.Node.textContent")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Pas de changement de DOM4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Définition initiale.
- -

Voir aussi

- - - -

 

+} +``` + +## Compatibilité des navigateurs + +{{Compat("api.Node.textContent")}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------- | +| {{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM WHATWG')}} | Pas de changement de DOM4 | +| {{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM4')}} |   | +| {{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}} | {{Spec2('DOM3 Core')}} | Définition initiale. | + +## Voir aussi + +- [Plus sur les différences entre `innerText` et `textContent`](http://perfectionkills.com/the-poor-misunderstood-innerText/) (blog post en) -- cgit v1.2.3-54-g00ecf