diff options
Diffstat (limited to 'files/fr/web/api/node')
40 files changed, 4141 insertions, 0 deletions
diff --git a/files/fr/web/api/node/appendchild/index.html b/files/fr/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..640709b22e --- /dev/null +++ b/files/fr/web/api/node/appendchild/index.html @@ -0,0 +1,151 @@ +--- +title: element.appendChild +slug: Web/API/Node/appendChild +tags: + - API + - Ajout + - DOM + - Enfant + - Méthodes + - Noeuds +translation_of: Web/API/Node/appendChild +--- +<p>{{APIRef("DOM")}}</p> + +<p>La méthode <code><strong>Node.appendChild()</strong></code> ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, <code>appendChild()</code> le déplace de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre).</p> + +<p>Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le {{domxref("Node.cloneNode()")}} peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec <code>cloneNode</code> ne seront pas automatiquement synchronisées.</p> + +<p>Si l'enfant donné est un {{domxref("DocumentFragment")}} , le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste d'enfants du noeud parent spécifié.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="eval">var <em>elementAjoute</em> = <em>element</em>.appendChild(<em>enfant</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><strong>enfant</strong></dt> + <dd>Le noeud à ajouter au noeud parent donné (généralement un élément).</dd> +</dl> + +<h3 id="Valeur_renvoyée">Valeur renvoyée</h3> + +<p>La valeur renvoyée <span id="result_box" lang="fr"><span>est l'enfant ajouté sauf si l'enfant donné est un {{domxref ("DocumentFragment")}}, auquel cas le {{domxref ("DocumentFragment")}} vide est renvoyé.</span></span></p> + +<h2 id="Notes">Notes</h2> + +<p>Le chaînage peut ne pas fonctionner comme prévu en raison de <code>appendChild()</code> renvoyant l'élément enfant :</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> aBlock <span class="operator token">=</span> doc<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'block'</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>doc<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'b'</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Définit <code>aBlock</code> pour <code><b></b></code> uniquement, ce que vous ne voulez probablement pas.</p> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// Crée un nouvel élément paragraphe et l'ajoute à la fin du corps du document</span> +<span class="keyword token">var</span> p <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>p<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Spécification">Spécification</h2> + +<p> </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Pas de changement de {{SpecName("DOM3 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Pas de changement de {{SpecName("DOM2 Core")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Pas de changement de {{SpecName("DOM1")}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.insertBefore")}}</li> + <li>{{domxref("Node.hasChildNodes")}}</li> + <li>{{domxref("ParentNode.append()")}}</li> +</ul> diff --git a/files/fr/web/api/node/baseuri/index.html b/files/fr/web/api/node/baseuri/index.html new file mode 100644 index 0000000000..cc52dd42cf --- /dev/null +++ b/files/fr/web/api/node/baseuri/index.html @@ -0,0 +1,71 @@ +--- +title: Node.baseURI +slug: Web/API/Node/baseURI +tags: + - API + - DOM + - HTML + - Propriétés + - URI + - URL + - URL absolue + - XML +translation_of: Web/API/Node/baseURI +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>La propriété en lecture seule <code><strong>Node.baseURI</strong></code> renvoie l'URL de base absolue d'un noeud.</p> + +<p>L'URL de base est utilisée pour <a href="http://developers.whatwg.org/urls.html#resolving-urls">résoudre</a> les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut <code>src</code> en HTML ou XML <code><a href="https://developer.mozilla.org/fr/docs/Glossaire/XLink">xlink</a>:href</code> d'un élément {{HTMLElement("img")}} HTML.</p> + +<p>En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> en XML.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">var <em>baseURI</em> = <em>node</em>.baseURI; +</pre> + +<ul> + <li><code>baseURI</code> est une {{ domxref("DOMString") }} (<em>chaîne de caractères</em>) représentant l'URL de base du {{domxref("Node")}} spécifié. Elle peut être <code>null</code> s'il est impossible d'obtenir une URI absolue.</li> + <li><code><em>node</em>.baseURI</code> est en lecture seule.</li> + <li><code><em>node</em>.baseURI</code> peut changer avec le temps (voir ci-dessous).</li> +</ul> + +<h2 id="Details" name="Details">Détails</h2> + +<h3 id="L'URL_de_base_d'un_document">L'URL de base d'un document</h3> + +<p>L'URL de base d'un <em>document</em> est par défaut l'adresse du document (telle qu'affichée par le navigateur et disponible dans {{domxref("window.location")}}), mais peut changer par défaut :</p> + +<ul> + <li>Si une balise HTML {{HTMLElement("base")}} est trouvée dans le document ;</li> + <li>Lorsque celui-ci est un nouveau document créé dynamiquement.</li> +</ul> + +<p>Voir la page <a href="http://developers.whatwg.org/urls.html#base-urls">Base URLs section of the HTML Living standard</a> (en) pour plus de détails.</p> + +<p>Vous pouvez utiliser <code><em>{{domxref("document")}}</em>.baseURI</code> pour obtenir l'URL de base d'un document. Notez que l'obtention de l'URL de base d'un document peut renvoyer des URL différentes au fil du temps si la balise {{HTMLElement("base")}} ou l'emplacement du document change.</p> + +<h3 id="L'URL_de_base_d'un_élément">L'URL de base d'un élément</h3> + +<p>L'URL de base d'un <em>element</em> en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud.</p> + +<p>Si le document contient des attributs <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (ce que vous ne devriez pas faire dans les documents HTML), l'<code><em>element</em>.baseURI</code> prend en compte l'attribut <code>xml:base</code> des parents de l'élément lors du calcul de l'URL de base. Voir <a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a> pour plus de détails.</p> + +<p>Vous pouvez utiliser <code><em>{{domxref("element")}}</em>.baseURI</code> pour obtenir l'URL de base d'un élément.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<ul> + <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-baseURI","DOM Level 3 Core: baseURI","REC")}}</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>l'élément {{HTMLElement("base")}} (HTML)</li> + <li>l'attribut <code><a href="https://developer.mozilla.org/fr/docs/Introduction_%C3%A0_XML/xml:base">xml:base</a></code> (documents XML).</li> + <li>{{domxref("Node.baseURIObject")}} - une variante de cette API pour les add-ons Mozilla et le code interne. Renvoie l'URL de base en tant que {{interface("nsIURI")}}.</li> +</ul> diff --git a/files/fr/web/api/node/baseuriobject/index.html b/files/fr/web/api/node/baseuriobject/index.html new file mode 100644 index 0000000000..8be97398f4 --- /dev/null +++ b/files/fr/web/api/node/baseuriobject/index.html @@ -0,0 +1,38 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +tags: + - API + - DOM + - Noeuds + - Propriétés + - URI + - URL +translation_of: Web/API/Node +--- +<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> + +<p>La propriété <code><strong>Node.baseURIObject</strong></code> renvoie le {{Interface("nsIURI")}} représentant l'URL de base du noeud (un document ou un élément). Elle est similaire à {{domxref("Node.baseURI")}}, à ceci près qu'elle renvoie une "nsIURI" à la place d'une "string" (<em>chaîne de caractères</em>).</p> + +<p>Cette propriété existe sur tous les noeuds (HTML, XUL, SVG, MathML, etc.), mais est utilisable par le script seulement s'il a des privilèges UniversalXPConnect.</p> + +<p>Voir {{domxref("Node.baseURI")}} pour plus de détails sur ce qu'est une URL de base.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, on ne peut y accèder qu'à partir du code privilégié.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<p>N'existe dans aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.baseURIObject")}}</p> diff --git a/files/fr/web/api/node/childnodes/index.html b/files/fr/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..d0dc5d7343 --- /dev/null +++ b/files/fr/web/api/node/childnodes/index.html @@ -0,0 +1,111 @@ +--- +title: element.childNodes +slug: Web/API/Node/childNodes +tags: + - API + - DOM + - Enfants + - Noeuds + - Propriétés +translation_of: Web/API/Node/childNodes +--- +<p>{{APIRef("DOM")}}</p> + +<p>La propriété en lecture seule <code><strong>Node.childNodes</strong></code> renvoie une {{domxref("NodeList")}} (<em>liste de noeuds</em>) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0.</p> + +<h2 id="Syntaxe_et_valeurs" name="Syntaxe_et_valeurs">Syntaxe</h2> + +<pre class="eval"><a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/var" title="https://developer.mozilla.org/fr/Référence_de_JavaScript_1.5_Core/Instructions/var"><span style="color: #800080;">var</span></a> <var>collNoeuds</var> = elementDeReference.<a href="/fr/DOM/element.childNodes" title="https://developer.mozilla.org/fr/DOM/element.childNodes">childNodes</a>; +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// parg est une référence d'objet pour un élément <p></span> + +<span class="comment token">// D'abord vérifier que l'élément a des noeuds enfants </span> +<span class="keyword token">if</span> <span class="punctuation token">(</span>parg<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span> + + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// faire quelque chose avec chaque enfant[i]</span> + <span class="comment token">// NOTE: La liste est en ligne, l'ajout ou la suppression des enfants changera la liste</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="Supprimer_tous_les_enfants_d'un_nom">Supprimer tous les enfants d'un nom</h3> + +<pre><span style="color: #999999;">// Voici une manière de supprimer tous les enfants d'un nœud +// (boite est une référence à un élément ayant des enfants)</span> +<a href="/fr/Référence_de_JavaScript_1.5_Core/Instructions/while" title="https://developer.mozilla.org/fr/Référence_de_JavaScript_1.5_Core/Instructions/while">while</a>( boite.<a href="/fr/DOM/element.firstChild" title="https://developer.mozilla.org/fr/DOM/element.firstChild">firstChild</a>) { + <span style="color: #999999;">// La liste n'est pas une copie, elle sera donc réindexée à chaque appel</span> + boite.<a href="/fr/DOM/element.removeChild" title="https://developer.mozilla.org/fr/DOM/element.removeChild">removeChild</a>( boite.<a href="/fr/DOM/element.firstChild" title="https://developer.mozilla.org/fr/DOM/element.firstChild">firstChild</a>); +} +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple <code>elementNodeReference.childNodes[1].nodeName</code> pour obtenir son nom, etc.)</p> + +<p>L'objet <a href="/fr/DOM/document" title="https://developer.mozilla.org/fr/DOM/document"><code>document</code></a> lui-même a deux enfants : la déclaration <a href="/fr/DOM/document.doctype" title="https://developer.mozilla.org/fr/DOM/document.doctype">Doctype</a> et l'élément racine, généralement appelés <code>documentElement</code> . (Dans les documents (X)HTML il s'agit d'éléments <a href="/fr/HTML/Element/html" title="https://developer.mozilla.org/fr/HTML/Element/html"><code>HTML</code></a>).</p> + +<p><code>childNodes</code> inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place.</p> + +<p> </p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> + + +<p>{{Compat("api.Node.childNodes")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.firstChild")}}</li> + <li>{{domxref("Node.lastChild")}}</li> + <li>{{domxref("Node.nextSibling")}}</li> + <li>{{domxref("Node.previousSibling")}}</li> + <li>{{domxref("ParentNode.children")}}</li> +</ul> + +<p> </p> diff --git a/files/fr/web/api/node/clonenode/index.html b/files/fr/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..80f3474516 --- /dev/null +++ b/files/fr/web/api/node/clonenode/index.html @@ -0,0 +1,171 @@ +--- +title: element.cloneNode +slug: Web/API/Node/cloneNode +tags: + - API + - DOM + - Duplication + - Méthodes + - Noeuds +translation_of: Web/API/Node/cloneNode +--- +<p>{{APIRef("DOM")}}</p> + +<p>La méthode <strong><code>Node.cloneNode()</code></strong> renvoie une copie du nœud sur lequel elle a été appelée.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em><var>dupNode</var></em> = <em><var>node</var></em>.cloneNode([<em><var>deep]</var></em>); +</pre> + +<dl> + <dt>node</dt> + <dd>Le noeud à dupliquer.</dd> + <dt>dupNode</dt> + <dd>Le nouveau noeud qui sera un clone du <code>node</code>.</dd> + <dt>deep <em>{{optional_inline}} (profondeur)</em></dt> + <dd><code>true</code> (<em>vrai</em>) si les enfants du noeud doivent aussi être clonés ou <code>false</code> (<em>faux</em>) si seul le noeud spécifié doit l'être.</dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), <code>deep</code> est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de <code>deep</code> était <strong><code>true</code></strong> par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, <code>deep</code> doit être défini sur <code>false</code>.</p> + +<p>Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de <code>deep</code> était <strong><code>false</code></strong>. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument <code>deep</code> pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond.</p> +</div> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre>p = document.getElementById("para1"); +p_prime = p.cloneNode(true); +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Cloner un nœud copie tous ses attributs ainsi que leurs valeurs, y compris les auditeurs intrinsèques (en ligne). Il ne copie pas les auditeurs d'évènement ajoutés avec <a href="https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener"><code>addEventListener()</code></a> ou ceux assignés au propriétés d'éléments (par exemple <code>node.onclick = fn</code>). De plus, pour un élément {{HTMLElement("canvas")}} l'image peinte n'est pas copiée.</p> + +<p>Le nœud dupliqué renvoyé par <code>cloneNode</code> ne fera pas partie du document tant qu'il n'y est pas ajouté via la méthode {{domxref("Node.appendChild()")}} ou une méthode similaire. De même, il n'a pas de parent tant qu'il n'a pas été ajouté à un autre nœud.</p> + +<p>Si <code>deep</code> est défini à <code>false</code>, aucun des nœuds enfants n'est copié.<br> + <em>T</em>out texte contenu dans le nœud n'est pas copié non plus , car il fait partie d'un ou plusieurs nœuds {{domxref("Text")}} enfants.</p> + +<p>Si <code>deep</code> est évalué à <code>true</code>, le sous-arbre entier est copié également (y compris le texte qui peut être contenu dans des nœuds {{domxref("Text")}} enfants). Pour les nœuds vides (par exemple les éléments {{HTMLElement("img")}} et {{HTMLElement("input")}} ) le fait de mettre <code>deep</code> à <code>true</code> ou <code>false</code> n'a aucune incidence sur la copie, mais il est tout de même nécessaire de fournir une valeur.</p> + +<div class="warning"> +<p><strong>Attention :</strong> <code>cloneNode()</code> peut conduire à dupliquer des ID (<em>identifiant</em>) d'éléments dans un document.</p> +</div> + +<p>Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus.</p> + +<p>Pour cloner un noeud à ajouter dans un document différent, utilisez {{domxref("Document.importNode()")}} à la place.</p> + +<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>deep</code> as an optional parameter</td> + <td> + <p>{{CompatVersionUnknown}}<sup>[1]</sup></p> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatVersionUnknown}}<sup>[1]</sup></p> + </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>deep</code> as an optional parameter</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La valeur par défaut pour le paramètre <code>deep</code> est <code>false</code></p> + +<p> </p> diff --git a/files/fr/web/api/node/comparedocumentposition/index.html b/files/fr/web/api/node/comparedocumentposition/index.html new file mode 100644 index 0000000000..7e7c2a7273 --- /dev/null +++ b/files/fr/web/api/node/comparedocumentposition/index.html @@ -0,0 +1,158 @@ +--- +title: Node.compareDocumentPosition() +slug: Web/API/Node/compareDocumentPosition +tags: + - API + - Arborescence + - DOM + - Méthodes + - Noeuds + - Position +translation_of: Web/API/Node/compareDocumentPosition +--- +<div>{{APIRef("DOM")}}</div> + +<p>La méthode <code><strong>Node.compareDocumentPosition()</strong></code>compare la position du noeud courant par rapport à un autre noeud dans tout autre document.</p> + +<p>La valeur retournée est un masque de bits avec les valeurs suivantes :</p> + +<table> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col">Valeur</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td> + <td>1</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_PRECEDING</code></td> + <td>2</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_FOLLOWING</code></td> + <td>4</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_CONTAINS</code></td> + <td>8</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td> + <td>16</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td> + <td>32</td> + </tr> + </tbody> +</table> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>node</em>.compareDocumentPosition( <em>otherNode</em> ) +</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js">var head = document.getElementsByTagName('head').item(0); + +if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING) { + console.log("well-formed document"); +} else { + console.log("<head> is not before <body>"); +} +</pre> + +<div class="note"> +<p><strong>Note :</strong> Parce que le résultat renvoyé par<em> </em><code>compareDocumentPosition</code> est un masque de bits, des <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires" title="/en-US/docs/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators">opérateurs binaires</a> doivent être utilisés pour des résultats significatifs.</p> +</div> + +<div class="note"> +<p><strong>Note :</strong> La première instruction utilise l' <code>item(0)</code> de la méthode <a href="/en-US/docs/Web/API/NodeList/item">NodeList</a> , qui est l'équivalent de <code>getElementsByTagName('head')[0].</code></p> +</div> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/contains" title="/en-US/docs/DOM/Node.contains">Node.contains</a></code></li> +</ul> diff --git a/files/fr/web/api/node/contains/index.html b/files/fr/web/api/node/contains/index.html new file mode 100644 index 0000000000..912ef76f66 --- /dev/null +++ b/files/fr/web/api/node/contains/index.html @@ -0,0 +1,115 @@ +--- +title: Node.contains +slug: Web/API/Node/contains +tags: + - API + - DOM + - Filiation + - Méthodes + - Noeuds +translation_of: Web/API/Node/contains +--- +<div>{{APIRef("DOM")}}</div> + +<div>La méthode <strong><code>Node.contains()</code></strong> renvoie une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) indiquant si un nœud est un descendant d'un nœud donné, c'est-à-dire le nœud lui-même, l'un de ses enfants directs ({{domxref("Node.childNodes", "childNodes")}}), l'un des enfants directs des enfants, et ainsi de suite.</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">node.contains( otherNode ) +</pre> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>Cette fonction vérifie si un élément est dans le corps de la page. Comme <code>contains</code> est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de <code>isInPage<font face="Open Sans, sans-serif">,</font></code><font face="Open Sans, sans-serif"> donc ce cas renvoie </font><code>false</code>.</p> + +<pre class="brush:js">function isInPage(node) { + return (node === document.body) ? false : document.body.contains(node); +}</pre> + +<p> </p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>5.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer <a href="https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect">only supports <code>contains()</code> for elements</a>.</p> + +<p>[2] Safari 2.x <a href="https://books.google.de/books?id=KW9G9rdlStIC&lpg=PA299&ots=4XRWUISZVr&dq=safari+node+contains+professional+javascript&pg=PA299&hl=de#v=onepage&q=safari%20node%20contains%20professional%20javascript&f=false">implemented <code>contains()</code> incorrectly</a>.</p> +</div> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.compareDocumentPosition")}}</li> + <li>{{domxref("Node.hasChildNodes")}}</li> +</ul> diff --git a/files/fr/web/api/node/firstchild/index.html b/files/fr/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..a9392e7650 --- /dev/null +++ b/files/fr/web/api/node/firstchild/index.html @@ -0,0 +1,92 @@ +--- +title: element.firstChild +slug: Web/API/Node/firstChild +tags: + - API + - DOM + - Enfant + - Noeuds + - Propriété +translation_of: Web/API/Node/firstChild +--- +<p>{{APIRef("DOM")}}</p> + +<p>La propriété en lecture seule <strong><code>Node.firstChild</code> r</strong>envoie le premier nœud enfant de l'arbre ou <code>null</code> s'il n'en a pas. Si le noeud est un <code>Document</code> , il renvoie le premier noeud de la liste de ses enfants directs.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;</pre> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<p>Cet exemple montre l'utilisation de <code>firstChild</code> et la manière dont les nœuds d'espaces peuvent interférer.</p> + +<pre><p id="para-01"> + <span>Premier span</span> +</p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>Dans le code ci-dessus, la <a href="https://developer.mozilla.org/fr/docs/Web/API/Console">console</a> affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes <p> et <span>. <strong>Tout</strong> <a href="https://developer.mozilla.org/fr/docs/Gestion_des_espaces_dans_le_DOM">espace</a> provoquera l'insertion d'un nœud <code>#text</code> , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc.</p> + +<p>Un autre nœud <code>#text</code> est inséré entre les balises de fermeture </span> et </p>.</p> + +<p>Si ces espaces sont retirés du code source, les nœuds <code>#text</code> n'apparaîtront plus et l'élément span deviendra le premier enfant du paragraphe.</p> + +<pre><p id="para-01"><span>Premier span</span></p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>À présent, l'alerte affichera « SPAN ».</p> + +<p>Pour éviter le problème avec <code>node.firstChild</code> renvoyant des noeuds <code>#text</code> ou <code>#comment</code>, {{domxref("ParentNode.firstElementChild")}} peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois, <code>node.firstElementChild</code> nécessite un "shim" pour Internet Explorer 9 et antérieurs.</p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-firstchild', 'Node.firstChild')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-169727388', 'Node.firstChild')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-169727388', 'Node.firstChild')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.firstChild")}}</p> + +<div id="compat-desktop"> </div> diff --git a/files/fr/web/api/node/getrootnode/index.html b/files/fr/web/api/node/getrootnode/index.html new file mode 100644 index 0000000000..277df08cd3 --- /dev/null +++ b/files/fr/web/api/node/getrootnode/index.html @@ -0,0 +1,95 @@ +--- +title: Node.getRootNode() +slug: Web/API/Node/getRootNode +tags: + - API + - DOM + - Méthodes + - Noeuds + - Racine +translation_of: Web/API/Node/getRootNode +--- +<p>{{APIRef("DOM")}}</p> + +<p>La méthode <strong><code>getRootNode()</code></strong> de l'interface {{domxref("Node")}} renvoie le contexte de la racine de l'objet, qui peut optionnellement inclure la racine "shadow" si elle est disponible.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var root = node.getRootNode(options)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>options {{optional_inline}}</dt> + <dd>Un objet qui définit les options pour obtenir le noeud racine. Les options disponibles sont : + <ul> + <li><code>composed</code> : un {{jsxref('Boolean')}} (<em>booléen</em>) qui indique si la racine shadow doit être retournée (<code>false</code> (<em>faux</em>) par défaut) ou un noeud racine au-delà de la racine shadow (<code>true</code>).</li> + </ul> + </dd> +</dl> + +<h3 id="Retourne">Retourne</h3> + +<p>Une interface {{domxref('Node')}}.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Le premier exemple retourne une référence au noeud HTML/document lorsqu'il est exécuté dans les navigateurs de support :</p> + +<pre class="brush: js language-html"><code class="language-html">rootNode = node.getRootNode();</code></pre> + +<p>Cet exemple plus complexe montre la différence entre retourner une racine normale et une racine qui inclut la racine shadow (voir le <a href="https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html">code source complet</a>):</p> + +<pre class="brush: html"><!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html --> +<div class="js-parent"> + <div class="js-child"></div> +</div> +<div class="js-shadowHost"></div> +<script> + // work on Chrome 54+，Opera41+ + + var parent = document.querySelector('.js-parent'), + child = document.querySelector('.js-child'), + shadowHost = document.querySelector('.js-shadowHost'); + + console.log(parent.getRootNode().nodeName); // #document + console.log(child.getRootNode().nodeName); // #document + + // create a ShadowRoot + var shadowRoot = shadowHost.attachShadow({mode:'open'}); + shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style>' + + '<div class="js-shadowChild">content</div>'; + var shadowChild = shadowRoot.querySelector('.js-shadowChild'); + + // The default value of composed is false + console.log(shadowChild.getRootNode() === shadowRoot); // true + console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true + console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document +</script></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-getrootnode','getRootNode()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.Node.getRootNode")}}</p> +</div> + +<div id="compat-mobile"> </div> diff --git a/files/fr/web/api/node/getuserdata/index.html b/files/fr/web/api/node/getuserdata/index.html new file mode 100644 index 0000000000..0ddb31d8ff --- /dev/null +++ b/files/fr/web/api/node/getuserdata/index.html @@ -0,0 +1,118 @@ +--- +title: Node.getUserData() +slug: Web/API/Node/getUserData +tags: + - API + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/getUserData +--- +<div>{{APIRef("DOM")}}{{obsolete_header}}</div> + +<p>La méthode <code><strong>Node.getUserData()</strong></code>renvoie tout {{domxref("DOMUserData")}} d'utilisateur défini précédemment sur le noeud donné par {{domxref("Node.setUserData()")}}.</p> + +<div class="note"> +<p>Les méthodes <code>Node.setUserData</code> et {{domxref("Node.getUserData")}} ne sont plus disponibles pour le contenu à partir du web. {{domxref("Element.dataset")}} ou <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> peuvent être utilisés à la place.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<ul> + <li><code>userKey</code> est la clé pour choisir les données spécifiques recherchées pour le nœud donné. Plus d'une clé peuvent avoir été assignées sur un nœud donné, contenant leurs propres valeurs.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js">var d = document.setUserData('key', 15, null); +console.log(document.getUserData('key')); // 15</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Supprimée de la spécification.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(1)}}<br> + {{CompatNo}} 22.0[1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(1)}}<br> + {{CompatNo}} 22.0[1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La méthode est toujours disponible à partir de scripts chrome.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.setUserData()")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li>{{domxref("DOMUserData")}}</li> +</ul> diff --git a/files/fr/web/api/node/haschildnodes/index.html b/files/fr/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..93d5f636aa --- /dev/null +++ b/files/fr/web/api/node/haschildnodes/index.html @@ -0,0 +1,122 @@ +--- +title: element.hasChildNodes +slug: Web/API/Node/hasChildNodes +tags: + - API + - DOM + - Enfant + - Méthodes + - Noeuds +translation_of: Web/API/Node/hasChildNodes +--- +<p>{{APIRef("DOM")}}</p> + +<p>La méthode <code><strong>Node.hasChildNodes()</strong></code> renvoie une valeur <strong>booléenne</strong> indiquant si le {{domxref("Node","noeud")}} actuel possède des <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/childNodes">nœuds enfants</a> ou non.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval">resultat =<em>element</em>.hasChildNodes(); +</pre> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<p>L'exemple suivant supprime le premier noeud enfant à l'intérieur de l'élément avec l'identifiant <code>"foo"</code> si "foo" a des noeuds enfant.</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> foo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">if</span> <span class="punctuation token">(</span>foo<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// faire quelque chose avec les 'foo.childNodes'</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Polyfill</h2> + +<p> </p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="punctuation token">;</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>prototype<span class="punctuation token">)</span> <span class="punctuation token">{</span> + prototype<span class="punctuation token">.</span>hasChildNodes <span class="operator token">=</span> prototype<span class="punctuation token">.</span>hasChildNodes <span class="operator token">||</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> <span class="operator token">!</span><span class="operator token">!</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span>Node<span class="punctuation token">.</span>prototype<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Résumé">Résumé</h2> + +<p>Il y a différentes façons de déterminer si le noeud a un noeud enfant :</p> + +<ul> + <li>node.hasChildNodes()</li> + <li>node.firstChild != null (ou juste node.firstChild)</li> + <li>node.childNodes && node.childNodes.length (ou node.childNodes.length > 0)</li> +</ul> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> + +<ul> + <li><a href="https://dom.spec.whatwg.org/#dom-node-haschildnodes">WHATWG: hasChildNodes</a></li> + <li><a class="external external-icon" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li> +</ul> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>7.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.childNodes")}}</li> + <li>{{domxref("Node.hasAttributes")}}</li> +</ul> + +<div class="noinclude"> </div> + +<p> </p> diff --git a/files/fr/web/api/node/index.html b/files/fr/web/api/node/index.html new file mode 100644 index 0000000000..2d46618b6b --- /dev/null +++ b/files/fr/web/api/node/index.html @@ -0,0 +1,310 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Document + - Element + - Interface + - Node + - Référence DOM + - Structure + - hierarchy +translation_of: Web/API/Node +--- +<p>{{ApiRef("DOM")}}</p> + +<p><code><strong>Node</strong></code> (<em>nœud)</em> est une classe abstraite de laquelle de nombreux objets de type DOM API héritent, leur permettant d'être traités de manière similaire et souvent interchangeable. Étant une classe abstraire, il n'existe pas d'objet qui soit directement un <code>Node</code>. Tous les objets implantant les fonctionnalités de <code>Node</code> sont des instances d'une de ses sous-classes, dont les plus notables sont {{domxref("Document")}}, {{domxref("Element")}} et {{domxref("DocumentFragment")}}.</p> + +<p>De pls, tous les types de nœuds du DOM sont représentés par une classe héritant des propriétés et méthodes de <code>Node</code> : {{domxref("CharacterData")}} (duquel {{domxref("Text")}}, {{domxref("Comment")}} et {{domxref("CDATASection")}} héritent), {{domxref("ProcessingInstruction")}}, , {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}} et {{domxref("EntityReference")}}.</p> + +<p>Les propriétés ou méthodes de ces interfaces peuvent retourner <code>null</code> lorsque leur existence n'est pas pertinente. Elles peuvent aussi générer une exception – par exemple lors de l'ajout d'un enfant à un type de nœud pour lequel aucun enfant ne peut exister.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Propriétés">Propriétés</h2> + +<p><em>Hérite les propriétés de son parent {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{DOMxRef("Node.baseURI")}} {{readonlyInline}}</dt> + <dd>Retourne une {{domxref("DOMString")}} (<em>chaine de caractères</em>) <span id="result_box" lang="fr"><span>représentant l'URL de base du document contenant le <code>Node</code>.</span><span> En HTML, il correspond au protocole, au nom de domaine et à la structure du répertoire, jusqu'au dernier</span></span> <code>/</code>.</dd> + <dt>{{DOMxRef("Node.baseURIObject")}} {{Non-standard_inline()}} {{Fx_minversion_inline("3")}}</dt> + <dd><span id="result_box" lang="fr"><span>(Non disponible pour le contenu Web). L'objet </span></span><span id="result_box" lang="fr"><span>en lecture seule</span></span> <span lang="fr"><span> {{Interface ("nsIURI")}} représentant l'URI de base pour l'élément.</span></span></dd> + <dt>{{DOMxRef("Node.childNodes")}} {{readonlyInline}}</dt> + <dd>Renvoie un {{domxref ("NodeList")}} contenant tous les enfants de ce nœud. {{domxref ("NodeList")}} signifie que si les enfants du <code>Node</code> changent, l'objet {{domxref ("NodeList")}} est automatiquement mis à jour.</dd> + <dt>{{DOMxRef("Node.firstChild")}} {{readonlyInline}}</dt> + <dd>Renvoie un {{domxref ("Node")}} représentant le premier nœud enfant direct de ce nœud ou <code>null</code> s'il n'a pas d'enfant.</dd> + <dt>{{DOMxRef("Node.lastChild")}} {{readonlyInline}}</dt> + <dd>Retourne un {{domxref("Node")}} représentant le dernier nœud enfant direct de ce nœud ou <code>null</code> s'il n'a pas d'enfant.</dd> + <dt>{{DOMxRef("Node.nextSibling")}} {{readonlyInline}}</dt> + <dd>Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou <code>null</code> s'il n'y en a pas.</dd> + <dt>{{DOMxRef("Node.nodeName")}} {{readonlyInline}}</dt> + <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme <code>'audio'</code> pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne <code>'#text'</code> ou un {{domxref("Document")}} doit avoir la chaîne <code>'#document'.</code>.</dd> + <dt>{{DOMxRef("Node.nodeType")}}{{readonlyInline}}</dt> + <dd>Retourne un <code>unsigned short</code> (<em>non signé court</em>) représentant le type du nœud. Les valeurs possibles sont :</dd> +</dl> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Nom</th> + <th scope="col">Valeur</th> + </tr> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline()}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline()}}</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline()}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{deprecated_inline()}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{deprecated_inline()}}</td> + <td><code>12</code></td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{DOMxRef("Node.nodeValue")}}</dt> + <dd>Retourne / définit la valeur du nœud courant.</dd> + <dt>{{DOMxRef("Node.ownerDocument")}}{{readonlyInline}}</dt> + <dd>Retourne le {{domxref("Document")}} auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne <code>null</code> .</dd> + <dt>{{DOMxRef("Node.parentNode")}}{{readonlyInline}}</dt> + <dd>Retourne un {{domxref("Node")}} qui est le parent de ce nœud. S'il n'existe pas, parce qu'il est en haut de l'arbre ou parce qu'il ne participe pas à un arbre, cette propriété retourne <code>null</code> .</dd> + <dt>{{DOMxRef("Node.parentElement")}}{{readonlyInline}}</dt> + <dd>Retourne un {{domxref("Element")}} qui est le parent de ce nœud. <span id="result_box" lang="fr"><span>Si le nœud n'a aucun parent ou si ce parent n'est pas un </span></span> {{domxref("Element")}} , cette propriété retourne <code>null</code>.</dd> + <dt>{{DOMxRef("Node.previousSibling")}}{{readonlyInline}}</dt> + <dd>Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou <code>null</code> s'il n'y en a pas.</dd> + <dt>{{DOMxRef("Node.textContent")}}</dt> + <dd>Retourne / définit <span id="result_box" lang="fr"><span>le contenu textuel d'un élément et de tous ses descendants.</span></span></dd> +</dl> + +<dl> +</dl> + +<h3 id="Propriétés_obsolètes">Propriétés obsolètes</h3> + +<dl> + <dt>{{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Retourne un {{domxref("DOMString")}} représentant <span class="short_text" id="result_box" lang="fr"><span>la partie locale du nom d'un élément.</span></span></dd> +</dl> + +<div class="note"> +<p><strong>Note :</strong> <span id="result_box" lang="fr"><span>Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML).</span> <span>Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML.</span></span> {{gecko_minversion_inline("1.9.2")}}</p> +</div> + +<dl> + <dt>{{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>L'URI du "Namespace" de ce nom, ou <code>null</code> s'il n'y en a pas.</dd> +</dl> + +<div class="note"> +<p>Note : Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" <code><a class="linkification-ext external external-icon" href="https://www.w3.org/1999/xhtml/" title="Linkification: http://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml/</a></code> <span class="short_text" id="result_box" lang="fr"><span>pour HTML et XML. </span></span> {{gecko_minversion_inline("1.9.2")}}</p> +</div> + +<dl> + <dt>{{DOMxRef("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou <code>null</code> si aucun préfixe n'est spécifié.</dd> + <dt>{{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}}{{Fx_MinVersion_Inline("3")}}</dt> + <dd>Un {{Interface("nsIPrincipal")}} représentant le nœud principal.</dd> + <dt>{{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}}</dt> + <dd>Retourne un objet {{DOMxRef("Node")}} représentant le noeud le plus haut dans l'arbre ou le noeud en cours s'il est le noeud le plus haut de l'arbre. Cette propriété a été remplacée par {{DOMxRef("Node.getRootNode()")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p><em>Hérite des méthodes de son parent {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p> + +<dl> + <dt>{{DOMxRef("Node.appendChild()", "Node.appendChild(<var>childNode</var>)")}}</dt> + <dd>Ajoute l'argument <code>childNode</code> spécifié comme dernier enfant au noeud actuel.<br> + Si l'argument fait référence à un noeud existant sur l'arborescence DOM, le nœud sera détaché de sa position actuelle et attaché à la nouvelle position.</dd> + <dt>{{DOMxRef("Node.cloneNode()")}}</dt> + <dd>Clône un {{domxref("Node")}} et, éventuellement, tout son contenu. Par défaut, il duplique le contenu de ce nœud.</dd> + <dt>{{DOMxRef("Node.compareDocumentPosition()")}}</dt> + <dd>Compare la position du nœud courant par rapport à un autre nœud dans tout autre document.</dd> + <dt>{{DOMxRef("Node.contains()")}}</dt> + <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléen</em>) <span id="result_box" lang="fr"><span>indiquant si un noeud est un descendant d'un noeud donné ou non.</span></span></dd> + <dt>{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}</dt> + <dd>Retourne une liste des boites CSS des nœuds relatifs à un autre nœud.</dd> + <dt>{{DOMxRef("Node.getRootNode()")}}</dt> + <dd><span id="result_box" lang="fr"><span>Retourne la racine de l'objet contextuel qui comprend éventuellement la "Shadow root" si elle est disponible.</span></span></dd> + <dt>{{DOMxRef("Node.hasChildNodes()")}}</dt> + <dd>Retourne un {{jsxref("Boolean")}} (<em>booléen</em>) indiquant si l'élément a des<span id="result_box" lang="fr"><span> noeuds enfants ou non.</span></span></dd> + <dt>{{DOMxRef("Node.insertBefore()")}}</dt> + <dd>Insère un {{domxref("Node")}} avant <span id="result_box" lang="fr"><span>le nœud de référence en tant qu'enfant du noeud actuel.</span></span></dd> + <dt>{{DOMxRef("Node.isDefaultNamespace()")}}</dt> + <dd>Accepte une URI d'espace de nom comme argument et retourne une valeur {{jsxref("Boolean")}} avec <code>true</code> (<em>vrai</em>) si l'espace de nom est celui par défaut du noeud donné ou <code>false</code> (<em>faux</em>) sinon.</dd> + <dt>{{DOMxRef("Node.isEqualNode()")}}</dt> + <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) qui indique si oui ou non deux noeuds sont du même type et si tous leurs points de données définis correspondent.</dd> + <dt>{{DOMxRef("Node.isSameNode()")}}</dt> + <dd>Retourne une valeur {{jsxref("Boolean")}} (<em>booléenne</em>) indiquant si les deux noeuds sont ou non identiques (c'est-à-dire qu'ils font référence au même objet).</dd> + <dt>{{DOMxRef("Node.lookupPrefix()")}}</dt> + <dd>Retourne une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le préfixe d'une URI d'un espace de nom donné, s'il est présent, et <code>null</code> sinon.</dd> + <dt>{{DOMxRef("Node.lookupNamespaceURI()")}}</dt> + <dd>Accepte un préfixe et retourne l'URI de l'espace de noms qui lui est associé sur le nœud donné s'il le trouve, <code>null</code> sinon. Fournir <code>null</code> comme préfixe retournera l'espace de noms par défaut.</dd> + <dt>{{DOMxRef("Node.normalize()")}}</dt> + <dd>Nettoye tous les nœuds de texte en-dessous de cet élément (fusionne adjacent, supprime vide).</dd> + <dt>{{DOMxRef("Node.removeChild()")}}</dt> + <dd>Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud.</dd> + <dt>{{DOMxRef("Node.replaceChild()")}}</dt> + <dd>Remplace un {{domxref("Node")}} enfant du nœud courant par celui donné dans le paramètre.</dd> +</dl> + +<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3> + +<dl> + <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> + <dd>Permet à un utilisateur d'obtenir un objet {{DOMxRef("DOMUserData")}} à partir du nœud fourni.</dd> + <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> + <dd><span id="result_box" lang="fr"><span>Permet à un utilisateur d'obtenir une {{domxref ("DOMUserData")}} (<em>donnée utilisateur</em>) à partir du </span></span>nœud<span lang="fr"><span>.</span></span></dd> + <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> + <dd>Retourne un {{jsxref("Boolean")}} <span id="result_box" lang="fr"><span>indiquant si l'élément possède des attributs ou non.</span></span></dd> + <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> + <dd>Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test <span id="result_box" lang="fr"><span>si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le </span></span>nœud<span lang="fr"><span> spécifique.</span></span></dd> + <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> + <dd><span class="short_text" id="result_box" lang="fr"><span>Permet à un utilisateur d'attacher ou d'enlever </span></span> {{domxref("DOMUserData")}} du nœud.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Parcourir_tous_les_nœuds_enfants"><span class="short_text" id="result_box" lang="fr"><span>Parcourir tous les nœuds enfants</span></span></h3> + +<p>La fonction suivante parcourt de manière récursive tous les nœuds enfants d'un noeud et exécute une fonction de rappel sur eux (et sur le nœud parent lui-même).</p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> DOMComb <span class="punctuation token">(</span>oParent<span class="punctuation token">,</span> oCallback<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>oParent<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> oNode <span class="operator token">=</span> oParent<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> oNode<span class="punctuation token">;</span> oNode <span class="operator token">=</span> oNode<span class="punctuation token">.</span>nextSibling<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">DOMComb</span><span class="punctuation token">(</span>oNode<span class="punctuation token">,</span> oCallback<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> + oCallback<span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span>oParent<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h4 id="Syntaxe">Syntaxe</h4> + +<pre class="syntaxbox notranslate">DOMComb(parentNode, callbackFunction);</pre> + +<h4 id="Description">Description</h4> + +<p>Suit le cycle récursif de tous les nœuds enfants d'un <code>parentNode</code> et le <code>parentNode</code> lui-même, et exécute la fonction <code>callbackFunction</code> (<em>rappel</em>) sur eux comme un objet <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a>.</p> + +<h4 id="Paramètres">Paramètres</h4> + +<dl> + <dt><code>parentNode</code></dt> + <dd>Le nœud parent (<code><strong>Node</strong> <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object" title="en-US/docs/JavaScript/Reference/Global_Objects/Object">Object</a></code>)</dd> + <dt><code>callbackFunction</code></dt> + <dd>La fonction de rappel (<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" title="en-US/docs/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>).</dd> +</dl> + +<h4 id="Exemples_dutilisation">Exemples d'utilisation</h4> + +<p><span id="result_box" lang="fr"><span>L'exemple suivant envoie à la <code>console.log</code> le contenu texte du corps :</span></span></p> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> printContent <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>nodeValue<span class="punctuation token">)</span> <span class="punctuation token">{</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>nodeValue<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> +<span class="punctuation token">}</span> + +onload <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="function token">DOMComb</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span>body<span class="punctuation token">,</span> printContent<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Supprimer_tous_les_enfants_imbriqués_dans_un_nœud">Supprimer tous les enfants imbriqués dans un nœud</h3> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js">Element<span class="punctuation token">.</span>prototype<span class="punctuation token">.</span>removeAll <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">while</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> + <span class="keyword token">return</span> <span class="keyword token">this</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> + +<h4 id="Exemple_dutilisation">Exemple d'utilisation</h4> + +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="comment token">/* ... an alternative to document.body.innerHTML = "" ... */</span> +document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">removeAll</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td><span class="short_text" id="result_box" lang="fr"><span>Supprime les propriétés suivantes :</span></span> <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, et <code>localName</code>.<br> + Supprime les méthodes suivantes : <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, et <code>getUserData()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Les méthodes <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, et<code>appendChild()</code> renvoient un autre type d'erreur (<code>NOT_SUPPORTED_ERR</code>) si elles sont appelées par {{domxref("Document")}}.<br> + La méthode <code>normalize()</code> a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie.<br> + Ajout des méthodes suivantes : <code>compareDocumentPosition()</code>, <code>isSameNode()</code>, <code>lookupPrefix()</code>, <code>isDefaultNamespace()</code>, <code>lookupNamespaceURI()</code>, <code>isEqualNode()</code>, <code>getFeature()</code>, <code>setUserData()</code>, et <code>getUserData().</code><br> + Ajout des propriétés suivantes : <code>baseURI</code> et <code>textContent</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>La propriété <code>ownerDocument</code>a été légèrement modifiée pour que {{domxref("DocumentFragment")}} renvoie également <code>null</code>.<br> + Ajout des propriétés suivantes : <code>namespaceURI</code>, <code>prefix</code>, et <code>localName</code>.<br> + Ajout des méthodes suivantes : <code>normalize()</code>, <code>isSupported()</code> et <code>hasAttributes()</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node")}}</p> + +<div id="compat-desktop"></div> diff --git a/files/fr/web/api/node/innertext/index.html b/files/fr/web/api/node/innertext/index.html new file mode 100644 index 0000000000..6b9d530411 --- /dev/null +++ b/files/fr/web/api/node/innertext/index.html @@ -0,0 +1,42 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +translation_of: Web/API/HTMLElement/innerText +--- +<div>{{APIRef("DOM")}}</div> + +<h2 id="Sommaire">Sommaire</h2> + +<p><code><strong>Node.innerText</strong></code> est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.</p> + +<p>{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.</p> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Introduction basée sur le <a href="https://github.com/rocallahan/innerText-spec" lang="en">brouillon de spécification de innerText</a>. Voir <a href="https://github.com/whatwg/html/issues/465">whatwg/html#465</a> et <a href="https://github.com/whatwg/compat/issues/5">whatwg/compat#5</a> pour l’histoire.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.innerText")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("HTMLElement.outerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> +</ul> diff --git a/files/fr/web/api/node/insertbefore/index.html b/files/fr/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..c66b4b3200 --- /dev/null +++ b/files/fr/web/api/node/insertbefore/index.html @@ -0,0 +1,214 @@ +--- +title: element.insertBefore +slug: Web/API/Node/insertBefore +tags: + - API + - DOM + - Enfant + - Insertion + - Méthodes + - Noeud +translation_of: Web/API/Node/insertBefore +--- +<p>{{APIRef("DOM")}}</p> + +<p>La méthode <code><strong>Node.insertBefore()</strong></code> insère un nœud juste avant le noeud de référence en tant qu'enfant du nœud parent spécifié. Si l'enfant donné est une référence à un noeud existant dans le document, <code>insertBefore()</code> le déplace vers sa nouvelle position (il n'est pas nécessaire de supprimer le noeud de son parent avant son ajout à un autre noeud).</p> + +<p>Cela signifie que le noeud ne peut pas être à 2 points du document simultanément. Donc, si le noeud a déjà un parent, le noeud est d'abord supprimé puis inséré dans la nouvelle position. La méthode {{domxref("Node.cloneNode()")}} peut être utilisée pour réaliser une copie du noeud avant son ajout sous le nouveau parent. Notez que les copies faites avec <code>cloneNode</code> ne seront pas automatiquement synchronisées.</p> + +<p>Si le noeud de référence est <code>null</code> , le noeud spécifié est ajouté à la fin de la liste des enfants du noeud parent spécifié.</p> + +<p>Si l'enfant donné est un {{domxref("DocumentFragment")}}, le contenu entier du {{domxref("DocumentFragment")}} est déplacé dans la liste des enfants du noeud parent spécifié.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>insertedNode</em> = <em>parentNode</em>.insertBefore(<em>newNode</em>, <em>referenceNode</em>); +</pre> + +<p>Si <code><var>referenceNode</var></code> vaut <code>null</code>, <code><var>newNode</var></code> est inséré à la fin de la liste des nœuds enfants.</p> + +<div class="note"> +<p><em><code>referenceNode</code></em> <strong>n'est pas</strong> un paramètre facultatif -- vous devez explicitement transmettre un <code>Node</code> ou <code>null</code>. Ne pas le fournir ou transmettre des valeurs invalides provoque des <a href="https://code.google.com/p/chromium/issues/detail?id=419780">comportements différents</a> selon les différentes versions des navigateurs.</p> +</div> + +<h2 id="Exemple" name="Exemple">Valeur retournée</h2> + +<p>La valeur renvoyée est l'enfant ajouté sauf si le <code>newNode</code> est un {{domxref("DocumentFragment")}}, auquel cas, le {{domxref("DocumentFragment")}} vide est retourné.</p> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parentElement<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>childElement<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>foo bar<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> +<span class="comment token">// Crée un nouveau noeud à insérer</span> +<span class="keyword token">var</span> newNode <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Obtient une référence sur le noeud parent</span> +<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childElement"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span> + +<span class="comment token">// Commence le cas test [ 1 ] : un childElement existe --> tout fonctionne correctement</span> +<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childElement"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newNode<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Fin du cas test [ 1 ]</span> + +<span class="comment token">// Commence le cas test [ 2 ] : childElement est d'un Type indéfini</span> +<span class="keyword token">var</span> sp2 <span class="operator token">=</span> undefined<span class="punctuation token">;</span> <span class="comment token">// Il n'existe pas de noeud à l'ID "childElement"</span> +parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newNode<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Fusion dynamique implicite pour le type du noeud</span> +<span class="comment token">// Fin du cas test [ 2 ]</span> + +<span class="comment token">// Commence le cas test [ 3 ] : childElement est d'un Type "undefined" (string) (<em>chaîne de caractères</em>)</span> +<span class="keyword token">var</span> sp2 <span class="operator token">=</span> <span class="string token">"undefined"</span><span class="punctuation token">;</span> <span class="comment token">// </span></span></code> <code class="language-html"><span class="language-javascript script token"><span class="comment token">Il n'existe pas de noeud à l'ID "childElement"</span></span></code> <code class="language-html"><span class="language-javascript script token"> +parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newNode<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Génère "Type Error: Invalid Argument" (<em>Erreur du Type : Argument non valide</em>) </span> +<span class="comment token">// Fin du cas test [ 3 ]</span> +</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> + +<p> </p> + +<ul> + <li><code>insertedNode</code> Le noeud en cours d'insertion, c'est-à-dire <code>newNode</code></li> + <li><code>parentNode</code> Le parent du nouveau noeud inséré.</li> + <li><code>newNode</code> Le noeud à insérer.</li> + <li><code>referenceNode</code> Le noeud devant lequel le <code>newNode</code> est inséré.</li> +</ul> + +<h2 id="Exemple_2">Exemple</h2> + +<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>parentElement<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>childElement<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>foo bar<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> +<span class="comment token">// Crée un nouvel élément <span> simple</span> +<span class="keyword token">var</span> sp1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Obtient une référence à l'élément avant lequel nous voulons insérer</span> +<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childElement"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Obtient une référence à l'élément parent</span> +<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> sp2<span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span> + +<span class="comment token">// Insère le nouvel élément dans le DOM avant sp2</span> +parentDiv<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>sp1<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span> +</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> + +<p>Il n'existe pas de méthode <code>insertAfter</code>. Il peut être émulé avec une combinaison des méthodes <code>insertBefore</code><a class="internal" href="/fr/DOM/element.insertBefore" title="fr/DOM/element.insertBefore"> </a>et <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nextSibling" title="fr/DOM/element.nextSibling">nextSibling</a></code>.</p> + +<p>Dans l'exemple ci-dessus, <code>sp1</code> pourrait être inséré après <code>sp2</code> en utilisant :</p> + +<pre class="brush:js">parentDiv.insertBefore(sp1, sp2.nextSibling); +</pre> + +<p>Si <code>sp2</code> n'a pas d'enfant suivant, c'est qu'il est le dernier enfant. Dans ce cas, <code>sp2.nextSibling</code> renverra <code>null</code> et <code>sp1</code> sera donc inséré à la fin de la liste des nœuds enfants (c'est-à-dire immédiatement après <code>sp2</code>).</p> + +<h2 id="Exemple_3">Exemple</h2> + +<p>Insérer un élément avant le premier élément enfant en utilisant la propriété <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/firstChild" title="Node.firstChild">firstChild</a>.</p> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// Obtenir une référence à l'élément dans lequel nous voulons insérer un nouveau noeud</span> +<span class="keyword token">var</span> parentElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'parentElement'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="comment token">// Obtenir une référence au premier enfant</span> +<span class="keyword token">var</span> theFirstChild <span class="operator token">=</span> parentElement<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> + +<span class="comment token">// Créer un nouvel élément</span> +<span class="keyword token">var</span> newElement <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// Insérer le nouvel élément avant le premier enfant</span> +parentElement<span class="punctuation token">.</span><span class="function token">insertBefore</span><span class="punctuation token">(</span>newElement<span class="punctuation token">,</span> theFirstChild<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Si l'élément n'a pas de premier enfant, alors <code>firstChild</code> est <code>null</code>. L'élément est toujours ajouté au parent après le dernier enfant. Comme l'élément parent n'avait pas de premier enfant, il n'avait pas non plus de dernier enfant. Par conséquent, le nouvel élément est le seul élément, après l'insertion.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> +</div> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<p> </p> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Corrige les erreurs dans l'algorithme d'insertion</td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>Décrit l'algorithme plus en détail</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Pas de changement notable</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Pas de changement notable</td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> diff --git a/files/fr/web/api/node/isconnected/index.html b/files/fr/web/api/node/isconnected/index.html new file mode 100644 index 0000000000..0e2acb7b5b --- /dev/null +++ b/files/fr/web/api/node/isconnected/index.html @@ -0,0 +1,96 @@ +--- +title: Node.isConnected +slug: Web/API/Node/isConnected +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/isConnected +--- +<p> </p> + +<p>{{APIRef("DOM")}}</p> + +<p>La propriété en lecture seule <strong><code>isConnected</code></strong> de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var isItConnected = nodeObjectInstance.isConnected</pre> + +<h3 id="Renvoie_la_valeur">Renvoie la valeur</h3> + +<p>Un {{domxref("Boolean")}} (<em>booléen</em>) — <code>true</code> (<em>vrai</em>) si le noeud est connecté <span class="short_text" id="result_box" lang="fr"><span>à son objet contextuel pertinent</span></span> et <code>false</code> (<em>faux</em>) sinon.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Un exemple DOM standard :</p> + +<pre class="brush: js"><code class="language-html">let test = document.createElement('p'); +console.log(test.isConnected); // renvoie false (<em>faux</em>) +document.body.appendChild(test);</code> +<code class="language-html">console.log(test.isConnected); // renvoie true</code> (<em>vrai</em>) +</pre> + +<p>Un exemple DOM shadow :</p> + +<pre class="brush: js">// Crée une racine shadow +var shadow = this.attachShadow({mode: 'open'}); + +// Crée du CSS à appliquer au dom shadow +var style = document.createElement('style'); +console.log(style.isConnected); // renvoie false (<em>faux</em>) + +style.textContent = '.wrapper {' + + 'position: relative;' + + '}' + + + '.info {' + + 'font-size: 0.8rem;' + + 'width: 200px;' + + 'display: inline-block;' + + 'border: 1px solid black;' + + 'padding: 10px;' + + 'background: white;' + + 'border-radius: 10px;' + + 'opacity: 0;' + + 'transition: 0.6s all;' + + 'position: absolute;' + + 'bottom: 20px;' + + 'left: 10px;' + + 'z-index: 3;' + + '}' + + +// attache l'élément de style créé au dom shadow + +shadow.appendChild(style); +console.log(style.isConnected); // renvoie true (<em>vrai</em>)</pre> + +<p> </p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div> + + +<p>{{Compat("api.Node.isConnected")}}</p> +</div> +</div> diff --git a/files/fr/web/api/node/isdefaultnamespace/index.html b/files/fr/web/api/node/isdefaultnamespace/index.html new file mode 100644 index 0000000000..67da853471 --- /dev/null +++ b/files/fr/web/api/node/isdefaultnamespace/index.html @@ -0,0 +1,39 @@ +--- +title: Node.isDefaultNamespace() +slug: Web/API/Node/isDefaultNamespace +tags: + - API + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/isDefaultNamespace +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>La méthode <strong><code>Node.isDefaultNamespace()</code></strong> accepte un URI d'espace de nom comme argument et renvoie un {{jsxref("Boolean")}} (booléen) avec une valeur <code>true</code> (<em>vrai</em>) si l'espace de nom est celui par défaut du noeud donné ou <code>false</code> (<em>faux</em>) sinon.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>result</em> = <em>node</em>.isDefaultNamespace(<em>namespaceURI</em>) +</pre> + +<ul> + <li><code>result</code> détient la valeur de retour <code>true</code> (<em>vrai</em>) ou <code>false</code> (<em>faux</em>).</li> + <li><code>namespaceURI</code> est une <code>string</code> (<em>chaîne de caractères</em>) représentant l'espace de nom par rapport auquel l'élément sera vérifié.</li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; +var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0]; + +alert(el.isDefaultNamespace(XULNS)); // true</pre> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li> + <li><a href="/en-US/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> +</ul> diff --git a/files/fr/web/api/node/isequalnode/index.html b/files/fr/web/api/node/isequalnode/index.html new file mode 100644 index 0000000000..e78eb9a7c2 --- /dev/null +++ b/files/fr/web/api/node/isequalnode/index.html @@ -0,0 +1,140 @@ +--- +title: Node.isEqualNode() +slug: Web/API/Node/isEqualNode +tags: + - API + - Comparaison + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/isEqualNode +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p>La méthode <code><strong>Node.isEqualNode()</strong></code> permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(<var>otherNode</var>); +</pre> + +<ul> + <li><code>otherNode</code> : Le noeud à comparer.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans cet exemple, nous créons trois blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Alors, nous éxécutons du JavaScript pour comparer les noeuds en utilisant <code>isEqualNode()</code> et sortons les résultats.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>This is the second element.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span>This is the first element.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre> + +<h3 id="Specification" name="Specification">CSS</h3> + +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="id token">#output</span> </span><span class="punctuation token">{</span> + <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">440</span>px<span class="punctuation token">;</span> + <span class="property token">border</span><span class="punctuation token">:</span> <span class="number token">2</span>px solid black<span class="punctuation token">;</span> + <span class="property token">border-radius</span><span class="punctuation token">:</span> <span class="number token">5</span>px<span class="punctuation token">;</span> + <span class="property token">padding</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> + <span class="property token">margin-top</span><span class="punctuation token">:</span> <span class="number token">20</span>px<span class="punctuation token">;</span> + <span class="property token">display</span><span class="punctuation token">:</span> block<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"output"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">let</span> divList <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">"div"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 0: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"<br/>"</span><span class="punctuation token">;</span> +output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 1: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">1</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"<br/>"</span><span class="punctuation token">;</span> +output<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> <span class="string token">"div 0 equals div 2: "</span> <span class="operator token">+</span> divList<span class="punctuation token">[</span><span class="number token">0</span><span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">isEqualNode</span><span class="punctuation token">(</span>divList<span class="punctuation token">[</span><span class="number token">2</span><span class="punctuation token">]</span><span class="punctuation token">)</span> <span class="operator token">+</span> <span class="string token">"<br/>"</span><span class="punctuation token">;</span></code></pre> + +<h3 id="Résultats">Résultats</h3> + +<p>{{ EmbedLiveSample('Example', 480) }}</p> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.9")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.isSameNode()")}}</li> +</ul> diff --git a/files/fr/web/api/node/issamenode/index.html b/files/fr/web/api/node/issamenode/index.html new file mode 100644 index 0000000000..5ed912e638 --- /dev/null +++ b/files/fr/web/api/node/issamenode/index.html @@ -0,0 +1,151 @@ +--- +title: Node.isSameNode() +slug: Web/API/Node/isSameNode +tags: + - API + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/isSameNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>La méthode <code><strong>Node.isSameNode()</strong></code> teste si deux noeuds sont identiques, c'est-à-dire, s'ils font référence au même objet.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>isSameNode</em> = <em>node</em>.isSameNode(<em>other</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<ul> + <li><code>other</code> Le {{domxref("Node")}} à tester.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans cet exemple, nous créons 3 blocs {{HTMLElement("div")}}. Le premier et le troisième ont les mêmes contenus et attributs, alors que le second est différent. Ensuite, nous exécutons du JavaScript pour comparer les nœuds en utilisant <code>isSameNode()</code> et sortons les résultats.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>This is the first element.</div> +<div>This is the second element.</div> +<div>This is the first element.</div> + +<p id="output"></p></pre> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); + +output.innerHTML += "div 0 same as div 0: " + divList[0].isSameNode(divList[0]) + "<br/>"; +output.innerHTML += "div 0 same as div 1: " + divList[0].isSameNode(divList[1]) + "<br/>"; +output.innerHTML += "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) + "<br/>"; +</pre> + +<h3 id="Résultats">Résultats</h3> + +<p>{{ EmbedLiveSample('Example', 480) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Pas de changement (a été longtemps retiré).</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + Removed in {{CompatGeckoDesktop("10")}}<br> + Readded in {{CompatGeckoDesktop("48")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<br> + Removed in {{CompatGeckoMobile("10")}}<br> + Readded in {{CompatGeckoMobile("48")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.isEqualNode()")}}</li> +</ul> diff --git a/files/fr/web/api/node/issupported/index.html b/files/fr/web/api/node/issupported/index.html new file mode 100644 index 0000000000..0a329b1fcd --- /dev/null +++ b/files/fr/web/api/node/issupported/index.html @@ -0,0 +1,139 @@ +--- +title: element.isSupported +slug: Web/API/Node/isSupported +tags: + - API + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/isSupported +--- +<p>{{APIRef("DOM")}}{{obsolete_header}}</p> + +<p>La méthode <code><strong>Node.isSupported()</strong></code> renvoie une marque {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique.</p> + +<h3 id="Syntaxe" name="Syntaxe">Syntaxe</h3> + +<pre class="syntaxbox"><em>boolValue</em> = <em>element</em>.isSupported(<em>feature</em>, <em>version</em>)</pre> + +<dl> + <dt> + <h3 id="Paramètres">Paramètres</h3> + </dt> + <dt><code>feature</code></dt> + <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode <code>hasFeature</code> de <a href="https://developer.mozilla.org/fr/docs/Web/API/Document/implementation">DOMImplementation</a>. Les valeurs possibles définies dans la spécification DOM core sont listées dans la section <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance</a> de DOM Level 2.</dd> + <dt><code>version</code></dt> + <dd>est une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « <code>2.0</code> ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur <code>true</code>.</dd> +</dl> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>doc<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> + <span class="comment token">// Obtenir un élément et vérifier pour voir s'il est pris en charge par les modules HTML DOM2.</span> + <span class="keyword token">var</span> main <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'doc'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> output <span class="operator token">=</span> main<span class="punctuation token">.</span><span class="function token">isSupported</span><span class="punctuation token">(</span><span class="string token">'HTML'</span><span class="punctuation token">,</span> <span class="string token">'2.0'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<p> </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Supprimée de la spécification</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Pas de changement de {{SpecName('DOM2 Core')}}.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#Level-2-Core-Node-supports', 'Node.isSupported()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatGeckoDesktop(1)}}</p> + + <p>{{CompatGeckoDesktop(19)}} (partial)[1]</p> + + <p>{{CompatGeckoDesktop(22)}}{{CompatNo}}</p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td> + <p>{{CompatGeckoMobile(1)}}</p> + + <p>{{CompatGeckoMobile(19)}} (partial)[1]</p> + + <p>{{CompatGeckoMobile(22)}}{{CompatNo}}</p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Cette méthode retournera toujours <code>true</code> ({{bug("801425")}})</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface {{domxref("Node")}} à laquelle elle appartient.</li> +</ul> diff --git a/files/fr/web/api/node/lastchild/index.html b/files/fr/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..3f31c8f722 --- /dev/null +++ b/files/fr/web/api/node/lastchild/index.html @@ -0,0 +1,70 @@ +--- +title: element.lastChild +slug: Web/API/Node/lastChild +tags: + - API + - DOM + - Enfant + - Noeuds + - Propriétés +translation_of: Web/API/Node/lastChild +--- +<p>{{APIRef("DOM")}}</p> + +<p>La propriété en lecture seule<strong> </strong><code><strong>Node.lastChild</strong></code> renvoie le dernier enfant du noeud. Si son parent est un élément, l'enfant est généralement un noeud élément, texte ou commentaire. Elle renvoie <code>null</code> s'il n'y a aucun enfant.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.lastChild; +</pre> + +<p> </p> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<p> </p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> tr <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"row1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> corner_td <span class="operator token">=</span> tr<span class="punctuation token">.</span>lastChild<span class="punctuation token">;</span></code></pre> + +<h2 id="Spécification">Spécification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.lastChild")}}</p> + +<div id="compat-desktop"> </div> diff --git a/files/fr/web/api/node/localname/index.html b/files/fr/web/api/node/localname/index.html new file mode 100644 index 0000000000..ea563ffab1 --- /dev/null +++ b/files/fr/web/api/node/localname/index.html @@ -0,0 +1,116 @@ +--- +title: element.localName +slug: Web/API/Node/localName +tags: + - API + - DOM + - Noeuds + - Nom local + - Propriétés +translation_of: Web/API/Node/localName +--- +<p>{{APIRef("DOM")}}{{obsolete_header}}</p> + +<p>La propriété en lecture seule <code><strong>Node.localName</strong></code> renvoie la partie locale du nom qualifié de ce nœud.</p> + +<div class="warning"> +<p>Dans DOM4, cette API a été déplacée de <code>Node</code> vers les interfaces {{domxref("Element")}} et {{domxref("Attr")}}.</p> +</div> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>name</var> = <var>element</var>.localName +</pre> + +<ul> + <li><code>name</code> est le nom local sous la forme d'une chaîne (voir {{ Anch("Notes") }} plus bas pour plus de détails)</li> +</ul> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<p>(Doit être servi avec un type de contenu XML, comme <code>text/xml</code> ou <code>application/xhtml+xml</code> .)</p> + +<pre class="brush:xml line-numbers language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span> <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/1999/xhtml<span class="punctuation token">"</span></span> + <span class="attr-name token"><span class="namespace token">xmlns:</span>svg</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="cdata token"><![CDATA[ + function test() { + var text = document.getElementById('text'); + var circle = document.getElementById('circle'); + + text.value = "<svg:circle> has:\n" + + "localName = '" + circle.localName + "'\n" + + "namespaceURI = '" + circle.namespaceURI + "'"; + } + ]]></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span> <span class="attr-name token">onload</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test()<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">svg:</span>svg</span> <span class="attr-name token">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<span class="punctuation token">"</span></span> + <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100px<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100px<span class="punctuation token">"</span></span> + <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 100 100<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">svg:</span>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>30<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">fill</span><span class="punctuation token">:</span><span class="hexcode token">#aaa</span></span><span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>circle<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span><span class="namespace token">svg:</span>svg</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>4<span class="punctuation token">"</span></span> <span class="attr-name token">cols</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>55<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Notes" name="Notes"><a id="Notes" name="Notes"></a>Notes</h2> + +<p>Le nom local d'un nœud est la partie de son nom qualifié qui suit les deux points. Les noms qualifiés sont typiquement utilisés en XML comme parties des espaces de noms de documents XML particuliers. Par exemple, dans le nom qualifié <code>ecomm:partners</code>, <code>partners</code> est le nom local et <code>ecomm</code> est le préfixe :</p> + +<pre><ecomm:business id="soda_shop" type="brick_n_mortar"> + <ecomm:partners> + <ecomm:partner id="1001">Tony's Syrup Warehouse + </ecomm:partner> + </ecomm:partner> +</ecomm:business> +</pre> + +<p><span class="comment">Needs to be reworded; right now it's wrong. -Nickolay Le préfixe — dans ce cas « ecomm » — définit l'espace de noms dans lequel le nom local peut être utilisé.</span></p> + +<div class="note"> +<p>Dans {{Gecko("1.9.2")}} et antérieurs, la propriété retourne en casse majuscule le nom local pour les éléments HTML dans le DOM HTML (par opposition aux éléments XHTML dans le DOM XML). Dans les versions ultérieures, en conformité avec HTML5, la propriété renvoie dans le cas d'un stockage DOM interne, en casse minuscule pour les éléments HTML dans le DOM HTML et les éléments XHTML dans le DOM XML. La propriété {{domxref("element.tagName","tagName")}} continue de renvoyer en casse majuscule pour les éléments HTML dans le DOM HTML.</p> +</div> + +<p>Pour les nœuds de tout autre <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeType">type</a> qu'<code>ELEMENT_NODE</code> et <code>ATTRIBUTE_NODE</code>, <code>localName</code> vaut toujours <code>null</code>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-NodeNSLocalN', 'Node.localName')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-NodeNSLocalN', 'Node.localName')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.localName")}}</p> + +<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> + +<ul> + <li>{{domxref("Node.namespaceURI")}}</li> + <li>{{domxref("Node.prefix")}}</li> + <li>{{domxref("Element.localName")}}</li> + <li>{{domxref("Attr.localName")}}</li> +</ul> + +<p> </p> diff --git a/files/fr/web/api/node/lookupnamespaceuri/index.html b/files/fr/web/api/node/lookupnamespaceuri/index.html new file mode 100644 index 0000000000..52e72bec1f --- /dev/null +++ b/files/fr/web/api/node/lookupnamespaceuri/index.html @@ -0,0 +1,23 @@ +--- +title: Node.lookupNamespaceURI() +slug: Web/API/Node/lookupNamespaceURI +tags: + - API + - DOM + - Méthodes + - Noeuds +translation_of: Web/API/Node/lookupNamespaceURI +--- +<div>{{APIRef("DOM")}}</div> + +<p>La méthode <code><strong>Node.lookupNamespaceURI()</strong></code> accepte un préfixe et renvoie l'URI de l'espace de nom associé avec lui sur le noeud donné s'il le trouve (et <code>null</code> sinon). La fourniture de <code>null</code> pour le préfixe renverra l'espace de nom par défaut.</p> + +<p>Du fait du <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne pas avec les espaces de noms attribués dynamiquement (c'est-à-dire ceux qui sont définis par <a href="/en/DOM/Node.prefix" title="En/DOM/Node.prefix">Node.prefix</a>).</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespaceURI" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...upNamespaceURI</a></li> +</ul> + +<p> </p> diff --git a/files/fr/web/api/node/lookupprefix/index.html b/files/fr/web/api/node/lookupprefix/index.html new file mode 100644 index 0000000000..968deea85e --- /dev/null +++ b/files/fr/web/api/node/lookupprefix/index.html @@ -0,0 +1,23 @@ +--- +title: Node.lookupPrefix() +slug: Web/API/Node/lookupPrefix +tags: + - API + - DOM + - Méthodes + - Noeuds + - Préfixes + - URI +translation_of: Web/API/Node/lookupPrefix +--- +<div>{{APIRef("DOM")}}</div> + +<p>La méthode <code><strong>Node.lookupPrefix()</strong></code> renvoie une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) contenant le préfixe d'un URI d'un espace de nom donné, s'il est présent, et <code>null</code> sinon. Quand plusieurs préfixes sont possibles, le résultat dépend de l'implémentation.</p> + +<p>En raison du <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312019" title="https://bugzilla.mozilla.org/show_bug.cgi?id=312019">bug 312019</a>, cette méthode ne fonctionne plus avec les espaces de nom définis dynamiquement, c'est-à-dire ceux qui sont fixés avec la propriété {{domxref("Node.prefix")}}.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix" rel="freelink">http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix</a></li> +</ul> diff --git a/files/fr/web/api/node/namespaceuri/index.html b/files/fr/web/api/node/namespaceuri/index.html new file mode 100644 index 0000000000..d185da9057 --- /dev/null +++ b/files/fr/web/api/node/namespaceuri/index.html @@ -0,0 +1,97 @@ +--- +title: element.namespaceURI +slug: Web/API/Node/namespaceURI +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/namespaceURI +--- +<p>{{APIRef("DOM")}}{{obsolete_header}}</p> + +<p>La propriété en lecture seule <code><strong>Node.namespaceURI</strong></code> renvoie l'URI d'espace de noms du nœud, ou <code>null</code> si le noeud n'est pas dans un espace de nom. Quand le noeud est un document, elle retourne l'espace de nom XML pour le document courant.</p> + +<div class="warning"> +<p>Dans DOM4, cette API a été déplacée de <code>Node</code> vers les interfaces {{domxref("Element")}} et {{domxref("Attr")}}.</p> +</div> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>namespace</var> = <var>node</var>.namespaceURI</pre> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<p>Dans cet extrait, on examine les propriétés {{domxref("Node.localName")}} et <code>namespaceURI</code> d'un nœud. Si <code>namespaceURI</code> renvoie l'espace de noms XUL et que <code>localName</code> renvoie « browser » (<em>navigateur</em>), on peut considérer que le nœud est un <code><browser/></code> XUL.</p> + +<pre>if (node.localName == "browser" && + node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { + // il s'agit d'un browser XUL +} +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Il ne s'agit pas d'une valeur calculée qui serait le résultat d'une vérification d'espace de noms basée sur les déclarations visibles. C'est simplement l'URI d'espace de noms donnée à la création.</p> + +<p>Dans Firefox 3.5 et antérieurs; l'URI d'espace de nom pour les éléments HTML dans les documents HTML est <code>null</code> . Dans les versions ultérieures, en conformité avec HTML5, il est <code><a class="external external-icon" href="https://www.w3.org/1999/xhtml" rel="freelink">https://www.w3.org/1999/xhtml</a></code> comme en XHTML.{{gecko_minversion_inline("1.9.2")}}</p> + +<p>Pour les nœuds de tout autre <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeType">type</a> qu'<code>ELEMENT_NODE</code> et <code>ATTRIBUTE_NODE</code>, la valeur de <code>namespaceURI</code> vaut toujours <code>null</code>.</p> + +<p>Il est possible de créer un élément en spécifiant une adresse <code>namespaceURI</code> avec la méthode DOM Level 2 {domxref("Document.createElementNS")}} et les attributs avec la méthode {{domxref("Element.setAttributeNS")}}.</p> + +<p>Suivant la spécification <a class="external" href="http://www.w3.org/TR/xml-names11/">Namespaces in XML</a>, un attribut n'hérite pas de son espace de noms depuis l'élément auquel il est attaché. Si un attribut n'a pas reçu explicitement d'espace de noms, il n'en aura aucun.</p> + +<p>Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.</p> + +<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Spécifie le comportement lorsqu'il est défini sur <code>null</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div> + + +<p>{{Compat("api.Node.namespaceURI")}}</p> +</div> +</div> + +<div id="compat-mobile"> </div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.localName")}}</li> + <li>{{domxref("Node.prefix")}}</li> + <li>{{domxref("Element.namespaceURI")}}</li> + <li>{{domxref("Attr.namespaceURI")}}</li> +</ul> + +<p> </p> diff --git a/files/fr/web/api/node/nextsibling/index.html b/files/fr/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..b3e6cf3e7f --- /dev/null +++ b/files/fr/web/api/node/nextsibling/index.html @@ -0,0 +1,83 @@ +--- +title: element.nextSibling +slug: Web/API/Node/nextSibling +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/nextSibling +--- +<p>{{APIRef("DOM")}}</p> + +<p>La propriété en lecture seule <code><strong>Node.nextSibling</strong></code> renvoie le nœud (<code>node</code>) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou <code>null</code> si le nœud spécifié est le dernier dans cette liste.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces + vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou + <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément + que l'auteur comptait obtenir.</p> + + <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a> + et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i> + dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p> + +<p>{{domxref("Element.nextElementSibling")}} peut être utilisé pour obtenir l'élément suivant en ignorant les noeuds d'espace.</p> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-01<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-02<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> +<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div-01'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>nextSibling<span class="punctuation token">,</span> + i <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Siblings of div-01:'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">while</span> <span class="punctuation token">(</span>el<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="string token">'. '</span> <span class="operator token">+</span> el<span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span> + el <span class="operator token">=</span> el<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span> + i<span class="operator token">++</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + +/************************************************** + Ce qui suit est écrit sur la console pendant le chargement: + + Siblings of div-01 + + 1. #text + 2. DIV + 3. #text + 4. SCRIPT + +**************************************************/</code></pre> + +<p>Dans cet exemple, on peut voir que des nœuds <code>#text</code> sont insérés dans le DOM là où des espaces se trouvent dans le code source entre les balises (c'est-à-dire après la balise de fermeture d'un élément et avant la balise d'ouverture du suivant). Aucun espace n'est créé entre les éléments insérés par l'instruction <code>document.write</code> .</p> + +<p>L'inclusion possible de nœuds textes dans le DOM doit être prise en compte pour le parcours du DOM à l'aide de <code>nextSibling</code>. Consultez les ressources dans la section Notes .</p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a> <small>— <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">traduction</a> (non normative)</small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-6AC54C2F">traduction</a> (non normative)</small></li> +</ul> + +<h2 class="noinclude" id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.nextSibling")}}</p> + +<h2 class="noinclude" id="Voir_aussi">Voir aussi</h2> + +<p>{{domxref("Element.nextElementSibling")}}</p> diff --git a/files/fr/web/api/node/nodename/index.html b/files/fr/web/api/node/nodename/index.html new file mode 100644 index 0000000000..da778cda15 --- /dev/null +++ b/files/fr/web/api/node/nodename/index.html @@ -0,0 +1,111 @@ +--- +title: element.nodeName +slug: Web/API/Node/nodeName +tags: + - API + - DOM + - Noeuds + - Nom + - Propriété +translation_of: Web/API/Node/nodeName +--- +<p>{{APIRef("DOM")}}</p> + +<p>La propriété en lecture seule <code><strong>Node.nodeName</strong></code> renvoie le nom du nœud courant dans une chaîne.</p> + +<p>Les valeurs retournées pour les différents types de noeuds sont :</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Interface</th> + <th>Valeur nodeName</th> + </tr> + <tr> + <td>{{domxref("Attr")}}</td> + <td>La valeur de {{domxref("Attr.name")}}</td> + </tr> + <tr> + <td>{{domxref("CDATASection")}}</td> + <td><code>"#cdata-section"</code></td> + </tr> + <tr> + <td>{{domxref("Comment")}}</td> + <td><code>"#comment"</code></td> + </tr> + <tr> + <td>{{domxref("Document")}}</td> + <td><code>"#document"</code></td> + </tr> + <tr> + <td>{{domxref("DocumentFragment")}}</td> + <td><code>"#document-fragment"</code></td> + </tr> + <tr> + <td>{{domxref("DocumentType")}}</td> + <td>La valeur de {{domxref("DocumentType.name")}}</td> + </tr> + <tr> + <td>{{domxref("Element")}}</td> + <td>La valeur de {{domxref("Element.tagName")}}</td> + </tr> + <tr> + <td>{{domxref("Entity")}}</td> + <td>Le nom de l'entité</td> + </tr> + <tr> + <td>{{domxref("EntityReference")}}</td> + <td>Le nom de la référence d'entité</td> + </tr> + <tr> + <td>{{domxref("Notation")}}</td> + <td>Le nom de notation</td> + </tr> + <tr> + <td>{{domxref("ProcessingInstruction")}}</td> + <td>La valeur de {{domxref("ProcessingInstruction.target")}}</td> + </tr> + <tr> + <td>{{domxref("Text")}}</td> + <td><code>"#text"</code></td> + </tr> + </tbody> +</table> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>str</em> = <em>node</em>.nodeName; +</pre> + +<h2 id="Exemple">Exemple</h2> + +<p>Avec le balisage suivant :</p> + +<pre><div id="d1">hello world</div> +<input type="text" id="t"/> +</pre> + +<p>et le script suivant :</p> + +<pre>var div1 = document.getElementById("d1"); +var text_field = document.getElementById("t"); +text_field.value = div1.nodeName; +</pre> + +<p>En XHTML (ou tout autre format XML), la valeur de <code>text_field</code> sera « div ». Cependant, en HTML, la valeur de <code>text_field</code> sera « DIV », parce que <code>nodeName</code> et <code>tagName</code> renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus <a href="http://ejohn.org/blog/nodename-case-sensitivity/" title="http://ejohn.org/blog/nodename-case-sensitivity/">détails sur la sensibilité à la casse de nodeName dans différents navigateurs</a> (en).</p> + +<p>Notez que la propriété <code><a href="fr/DOM/element.tagName">tagName</a></code> aurait pu être uilisée à la place, puisque <code>nodeName</code> a la même valeur que <code>tagName</code> pour un élément. Souvenez vous cependant que <code>nodeName</code> renverra <code>#text</code> pour les nœuds texte tandis que <code>tagName</code> renverra <code>undefined</code>.</p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D095">traduction</a> (non normative)</small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.nodeName")}}</p> diff --git a/files/fr/web/api/node/nodeprincipal/index.html b/files/fr/web/api/node/nodeprincipal/index.html new file mode 100644 index 0000000000..b1813302bb --- /dev/null +++ b/files/fr/web/api/node/nodeprincipal/index.html @@ -0,0 +1,39 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +tags: + - API + - DOM + - Noeuds + - Principal + - Propriétés +translation_of: Web/API/Node +--- +<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> + +<p>La propriété en lecture seule <code><strong>Node.nodePrincipal</strong></code> renvoie l'objet {{Interface("nsIPrincipal")}} représentant le contexte de sécurité actuel du noeud.</p> + +<p>{{Note("Cette propriété existe sur tous les nœuds (HTML, XUL, SVG, MathML, etc.), mais n'est accessible par le script que s'il possède des privilèges de chrome.")}}</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>principalObj</em> = <em>Node</em>.nodePrincipal +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un objet <code>nsIPrincipal</code> représentant le contexte de sécurité du noeud.</p> + +<h2 id="Notes">Notes</h2> + +<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, cette propriété est accessible seulement par le code privilégié.</p> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p>N'existe dans aucune spécification. C'est une propriété propre à Firefox.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.nodePrincipal")}}</p> diff --git a/files/fr/web/api/node/nodetype/index.html b/files/fr/web/api/node/nodetype/index.html new file mode 100644 index 0000000000..d6f0a4eb2e --- /dev/null +++ b/files/fr/web/api/node/nodetype/index.html @@ -0,0 +1,180 @@ +--- +title: element.nodeType +slug: Web/API/Node/nodeType +tags: + - API + - DOM + - Noeuds + - Propriétés + - Types +translation_of: Web/API/Node/nodeType +--- +<div>{{APIRef("DOM")}}</div> + +<div>La propriété en lecture seule <code><strong>Node.nodeType</strong></code> représente le type du noeud.</div> + +<h2 id="Description">Description</h2> + +<p>La propriété <strong><code>nodeType</code></strong> peut être utilisée pour distinguer les uns des autres les différents genres de noeuds tels que {{domxref("Element")}}, {{domxref("Text")}} et {{domxref("Comment")}} .</p> + +<h2 id="Syntaxe"><font><font>Syntaxe</font></font></h2> + +<pre class="syntaxbox"><var><font><font>Type</font></font></var> = <var><font><font>node</font></font></var> .nodeType +</pre> + +<p id="Exemple"><font><font>Renvoie un entier (<em>integer</em>) qui spécifie le type du noeud ; les valeurs possibles sont listées dans </font></font> {{anch("Constantes")}}.</p> + +<h2 id="Exemple" name="Exemple"><a id="Constantes" name="Constantes"></a>Constantes</h2> + +<h3 id="Exemple" name="Exemple">Constantes de type nœud</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Constante</th> + <th scope="col">Valeur</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Node.ELEMENT_NODE</code></td> + <td><code>1</code></td> + <td>Un noeud {{domxref("Element")}} tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}<code>.</code></td> + </tr> + <tr> + <td><code>Node.TEXT_NODE</code></td> + <td><code>3</code></td> + <td>Le {{domxref("Text")}} actuel de l'{{domxref("Element")}} ou {{domxref("Attr")}}.</td> + </tr> + <tr> + <td><code>Node.PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + <td>Une {{domxref("ProcessingInstruction")}} d'un document XML tel que la déclaration <code><?xml-stylesheet ... ?></code>.</td> + </tr> + <tr> + <td><code>Node.COMMENT_NODE</code></td> + <td><code>8</code></td> + <td>Un noeud {{domxref("Comment")}}.</td> + </tr> + <tr> + <td><code>Node.DOCUMENT_NODE</code></td> + <td><code>9</code></td> + <td>Un noeud {{domxref("Document")}}.</td> + </tr> + <tr> + <td><code>Node.DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + <td>Un noeud {{domxref("DocumentType")}} c'est-à-dire <code><!DOCTYPE html></code> pour des documents HTML5.</td> + </tr> + <tr> + <td><code>Node.DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + <td>Un noeud {{domxref("DocumentFragment")}}.</td> + </tr> + </tbody> +</table> + +<h3 id="Constantes_de_type_noeud_dépréciées_deprecated_inline()">Constantes de type noeud dépréciées {{deprecated_inline()}}</h3> + +<p>Les constantes suivantes ont été dépréciées et ne doivent plus être utilisées.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td>Constante</td> + <td>Valeur</td> + <td>Description</td> + </tr> + <tr> + <td><code>Node.ATTRIBUTE_NODE</code></td> + <td>2</td> + <td>Un {{domxref("Attr", "Attribut")}} d'un {{domxref("Element")}}. Les attributs d'élément n'implémentent plus l'interface {{domxref("Node")}} dans la spécification {{SpecName("DOM4")}}.</td> + </tr> + <tr> + <td><code>Node.CDATA_SECTION_NODE</code></td> + <td><code>4</code></td> + <td>Une {{domxref("CDATASection")}}. Supprimée dans la spécification {{SpecName("DOM4")}}.</td> + </tr> + <tr> + <td><code>Node.ENTITY_REFERENCE_NODE</code></td> + <td>5</td> + <td>Un noeud référence d'entité XML. Supprimé dans la spécification {{SpecName("DOM4")}}.</td> + </tr> + <tr> + <td><code>Node.ENTITY_NODE</code></td> + <td>6</td> + <td>Un noeud <code><!ENTITY ...></code> XML. Supprimé dans la spécificatioin {{SpecName("DOM4")}}.</td> + </tr> + <tr> + <td><code>Node.NOTATION_NODE</code></td> + <td>12</td> + <td>Un noeud <code><!NOTATION ...></code> XML. Supprimé dans la spécification {{SpecName("DOM4")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Exemple" name="Exemple"><font><font>Exemples</font></font></h2> + +<h3 id="Différents_types_de_noeuds"><font><font>Différents types de noeuds</font></font></h3> + +<pre class="brush: js">document.nodeType === Node.DOCUMENT_NODE; // true (<em>vrai</em>) +document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true (<em>vrai</em>) + +var fragment = document.createDocumentFragment(); +fragment.nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true (<em>vrai</em>) + +<code>var p = document.createElement("p"); +p.textContent = "Once upon a time...";</code> + +p.nodeType === Node.ELEMENT_NODE; // true (<em>vrai</em>) +p.firstChild.nodeType === Node.TEXT_NODE; // true (<em>vrai</em>) +</pre> + +<h3 id="Commentaires">Commentaires</h3> + +<p><font><font>Cet exemple vérifie si le premier noeud dans l'élément du document est un noeud commentaire et si ce n'est pas le cas, affiche un message.</font></font></p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> node <span class="operator token">=</span> document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span>firstChild<span class="punctuation token">;</span> +<span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>nodeType <span class="operator token">!=</span> Node<span class="punctuation token">.</span>COMMENT_NODE<span class="punctuation token">)</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">"You should comment your code well!"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification"><font><font>Spécifications</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-nodetype', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Sont dépréciés les types <code>ATTRIBUTE_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE et NOTATION_NODE</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Pas de changement.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-111237558', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Pas de changement.</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-111237558', 'Node.nodeType')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.nodeType")}}</p> diff --git a/files/fr/web/api/node/nodevalue/index.html b/files/fr/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..07e228342e --- /dev/null +++ b/files/fr/web/api/node/nodevalue/index.html @@ -0,0 +1,93 @@ +--- +title: element.nodeValue +slug: Web/API/Node/nodeValue +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/nodeValue +--- +<p>{{APIRef("DOM")}}</p> + +<p>La propriété <code><strong>Node.nodeValue</strong></code> renvoie ou définit la valeur du nœud courant.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue; +</pre> + +<p><code>value</code> (<em>valeur</em>) est une chaîne contenant la valeur du nœud courant, s'il y en a une.</p> + +<h2 id="Notes">Notes</h2> + +<p>Pour le document lui-même, <code>nodeValue</code> renvoie <code>null</code>. Pour des nœuds texte, de commentaires et CDATA, <code>nodeValue</code> renvoie le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut.</p> + +<p>Le tableau suivant montre les valeurs de retour pour différents types de nœuds :</p> + +<table> + <tbody> + <tr> + <td>Attr</td> + <td>valeur de l'attribut</td> + </tr> + <tr> + <td>CDATASection</td> + <td>contenu de la section CDATA</td> + </tr> + <tr> + <td>Comment</td> + <td>contenu du commentaire</td> + </tr> + <tr> + <td>Document</td> + <td><code>null</code></td> + </tr> + <tr> + <td>DocumentFragment</td> + <td><code>null</code></td> + </tr> + <tr> + <td>DocumentType</td> + <td><code>null</code></td> + </tr> + <tr> + <td>Element</td> + <td><code>null</code></td> + </tr> + <tr> + <td>NamedNodeMap</td> + <td><code>null</code></td> + </tr> + <tr> + <td>EntityReference</td> + <td><code>null</code></td> + </tr> + <tr> + <td>Notation</td> + <td><code>null</code></td> + </tr> + <tr> + <td>ProcessingInstruction</td> + <td>tout le contenu à l'exception de la cible</td> + </tr> + <tr> + <td>Text</td> + <td>contenu du nœud texte</td> + </tr> + </tbody> +</table> + +<p>Lorsque <code>nodeValue</code> est défini comme étant <code>null</code>, l'assignation n'a aucun effet.</p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-F68D080">traduction</a> (non normative)</small></li> +</ul> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.nodeValue")}}</p> diff --git a/files/fr/web/api/node/normalize/index.html b/files/fr/web/api/node/normalize/index.html new file mode 100644 index 0000000000..c58ba06945 --- /dev/null +++ b/files/fr/web/api/node/normalize/index.html @@ -0,0 +1,40 @@ +--- +title: element.normalize +slug: Web/API/Node/normalize +translation_of: Web/API/Node/normalize +--- +<p>{{ ApiRef("DOM") }}</p> + +<h2 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h2> + +<p>Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval"><em>élément</em>.normalize(); +</pre> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush:js line-numbers language-js">var conteneur = document.createElement("div"); +conteneur.appendChild( document.createTextNode("Partie 1 ") ); +conteneu.appendChild( document.createTextNode("Partie 2 ") ); + +// Ici, conteneur.childNodes.length === 2 +// conteneur.childNodes[0].textContent === "Partie 1 " +// conteneur.childNodes[1].textContent === "Partie 2 " + +conteneur.normalize(); + +// À présent, conteneur.childNodes.length === 1 +// conteneur.childNodes[0].textContent === "Partie 1 Partie 2 "</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize (en)</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-normalize">traduction en français</a> (non normative)</small></li> +</ul> + +<p>{{ languages( { "en": "en/DOM/element.normalize", "pl": "pl/DOM/element.normalize" } ) }}</p> diff --git a/files/fr/web/api/node/ownerdocument/index.html b/files/fr/web/api/node/ownerdocument/index.html new file mode 100644 index 0000000000..cc197c1d80 --- /dev/null +++ b/files/fr/web/api/node/ownerdocument/index.html @@ -0,0 +1,70 @@ +--- +title: element.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - API + - DOM + - Document + - Noeuds + - Propriétés +translation_of: Web/API/Node/ownerDocument +--- +<p>{{APIRef("DOM")}}</p> + +<p>La propriété en lecture seule <code><strong>Node.ownerDocument</strong></code> renvoie l'objet document de niveau supérieur pour ce nœud.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval"><em>document</em> = element.ownerDocument; +</pre> + +<ul> + <li><code>document</code> est l'objet <a href="https://developer.mozilla.org/fr/docs/Web/API/document"><code>document</code></a> parent de l'élément courant.</li> +</ul> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush: html">// étant donné un nœud "p", obtient le premier enfant HTML +// de l'objet document +var d = p.ownerDocument; +var html = d.documentElement; +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>L'objet <code>document</code> renvoyé par cette propriété est l'objet principal avec lequel tous les nœuds enfants du document HTML réel sont créés. Si cette propriété est utilisée sur un nœud qui est lui-même un document, le résultat est <code>null</code>.</p> + +<h3 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th>Spécification</th> + <th>Statut</th> + <th>Commentaire</th> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Pas de changement</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.ownerDocument")}}</p> + +<div id="compat-desktop"> </div> diff --git a/files/fr/web/api/node/parentelement/index.html b/files/fr/web/api/node/parentelement/index.html new file mode 100644 index 0000000000..7da92f2334 --- /dev/null +++ b/files/fr/web/api/node/parentelement/index.html @@ -0,0 +1,53 @@ +--- +title: Node.parentElement +slug: Web/API/Node/parentElement +tags: + - API + - DOM + - Noeuds + - Propriétés + - parent +translation_of: Web/API/Node/parentElement +--- +<div> +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<div>La propriété en lecture seule <code style="font-style: normal;"><strong>Node.parentElement</strong></code> renvoie le parent du noeud DOM ({{domxref("Element")}}) ou <code style="font-style: normal;"><strong>null</strong></code> si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM.</div> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>parentElement</em> = <em>node</em>.parentElement +</pre> + +<p><code><strong>parentElement</strong></code> référence l'élément parent d'un n<span class="notranslate" style="line-height: 1.5;">œ</span>ud (<code><strong>node</strong></code>). C'est toujours un objet <span style="line-height: 1.5;">{{domxref("Element")}} </span> du DOM <span style="line-height: 1.5;">ou <code>null</code>.</span></p> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentElement<span class="punctuation token">)</span> <span class="punctuation token">{</span> + node<span class="punctuation token">.</span>parentElement<span class="punctuation token">.</span>style<span class="punctuation token">.</span>color <span class="operator token">=</span> <span class="string token">"red"</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>Sur quelques navigateurs, la propriété <code>parentElement</code> est seulement définie sur les noeuds qui sont eux-mêmes des {{domxref("Element")}}. En particulier, elle n'est pas définie sur les noeuds texte.</p> + +<div> + + +<p>{{Compat("api.Node.parentElement")}}</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<ul> + <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li> +</ul> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.parentNode")}}</li> +</ul> diff --git a/files/fr/web/api/node/parentnode/index.html b/files/fr/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..50123e2cb6 --- /dev/null +++ b/files/fr/web/api/node/parentnode/index.html @@ -0,0 +1,67 @@ +--- +title: element.parentNode +slug: Web/API/Node/parentNode +tags: + - API + - DOM + - Noeuds + - Propriétés + - parent +translation_of: Web/API/Node/parentNode +--- +<p>{{APIRef("DOM")}}</p> + +<p>La propriété en lecture seule <strong>parentNode</strong> <span id="result_box" lang="fr"><span>renvoie le parent du nœud spécifié dans l'arborescence de DOM</span></span> .</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>parentNode</em> = <em>node</em>.parentNode</pre> + +<p><code>parentNode</code> est l'élément parent du nœud courant. <span class="short_text" id="result_box" lang="fr"><span>Le parent d'un élément est un </span></span>nœud <code>Element</code> , un nœud <code>Document</code> ou un nœud <code>DocumentFragment</code> .</p> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// supprime un noeud de l'arbre, </span> + <span class="comment token">// sauf s'il a déjà été supprimé</span> + node<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>node<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Les <a href="https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType" title="DOM/Node.nodeType">noeuds </a><code>Document</code> et <code>DocumentFragment</code> ne peuvent jamais avoir de parent, alors <code>parentNode</code> retournera toujours <code>null</code> .</p> + +<p> Il renvoie également <code>null</code> si le nœud vient d'être créé et n'est pas encore attaché à l'arbre.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div id="compat-desktop"> + + +<p>{{Compat("api.Node.parentNode")}}</p> + +<h2 id="Spécification">Spécification</h2> +</div> + +<ul> + <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li> + <li><a class="external external-icon" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<article class="approved text-content"> +<div class="boxed translate-rendered"> +<ul> + <li>{{Domxref("Node.firstChild")}}</li> + <li>{{Domxref("Node.lastChild")}}</li> + <li>{{Domxref("Node.childNodes")}}</li> + <li>{{Domxref("Node.nextSibling")}}</li> + <li>{{Domxref("Node.parentElement")}}</li> + <li>{{Domxref("Node.previousSibling")}}</li> + <li>{{Domxref("Node.removeChild")}}</li> +</ul> +</div> +</article> + +<article class="localized"></article> diff --git a/files/fr/web/api/node/prefix/index.html b/files/fr/web/api/node/prefix/index.html new file mode 100644 index 0000000000..2ab6f61b73 --- /dev/null +++ b/files/fr/web/api/node/prefix/index.html @@ -0,0 +1,80 @@ +--- +title: element.prefix +slug: Web/API/Node/prefix +tags: + - API + - DOM + - Noeuds + - Propriétés + - Préfixe +translation_of: Web/API/Node/prefix +--- +<p>{{APIRef("DOM")}}{{obsolete_header}}</p> + +<p>La propriété en lecture seule <code><strong>Node.prefix</strong></code> renvoie le préfixe de l'espace de noms pour le nœud spécifié ou <code>null</code> si aucun préfixe n'est spécifié.</p> + +<div class="warning"> +<p>Dans DOM4, cet API a été déplacé de <code>Node</code> vers les interfaces {{domxref("Element")}} et {{domxref("Attr")}}.</p> +</div> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>string</var> = <var>node</var>.prefix +</pre> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<p>Le code suivant affichera « x » sur la console.</p> + +<pre class="brush:xml line-numbers language-xml"><code class="language-xml"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span><span class="namespace token">x:</span>div</span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>console.log(this.prefix)<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span></code></pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Ceci fonctionnera uniquement lorsqu'un analyseur gérant les espaces de noms est utilisé, c'est-à-dire lorsque le document est servi avec un type mime XML. Cela ne fonctionnera pas pour les documents HTML.</p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<article class="approved"> +<div class="boxed translate-rendered text-content"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-NodeNSPrefix", "Node.prefix")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Spécifie le comportement quand elle est définie à <code>null</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-NodeNSPrefix", "Initial definition")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.Node.prefix")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.localName")}}</li> + <li>{{domxref("Node.namespaceURI")}}</li> + <li>{{domxref("Element.prefix")}}</li> + <li>{{domxref("Attr.prefix")}}</li> +</ul> +</div> +</article> + +<p> </p> diff --git a/files/fr/web/api/node/previoussibling/index.html b/files/fr/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..2f9f178b1f --- /dev/null +++ b/files/fr/web/api/node/previoussibling/index.html @@ -0,0 +1,56 @@ +--- +title: element.previousSibling +slug: Web/API/Node/previousSibling +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/previousSibling +--- +<p>{{APIRef("DOM")}}</p> + +<p>La propriété en lecture seule <code><strong>Node.previousSibling</strong></code> renvoie le nœud (<code>node</code>) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou <code>null</code> s'il s'agit du premier nœud de la liste.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>previousNode</var> = <em>node</em>.previousSibling; +</pre> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// <a><b1 id="b1"/><b2 id="b2"/></a></span> + +<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"b1"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>previousSibling<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// null</span> +<span class="function token">alert</span><span class="punctuation token">(</span>document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"b2"</span><span class="punctuation token">)</span><span class="punctuation token">.</span>previousSibling<span class="punctuation token">.</span>id<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// "b1"</span></code></pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces + vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou + <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément + que l'auteur comptait obtenir.</p> + + <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a> + et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i> + dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p> + +<p>L'opération inverse <code><a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nextSibling">Node.nextSibling</a></code> permet de rechercher l'élément suivant.</p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a> <small>— <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">traduction</a> (non normative)</small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a> <small>— <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">traduction</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li> +</ul> + +<h2 class="noinclude" id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.previousSibling")}}</p> + +<h2 class="noinclude" id="Voir_aussi">Voir aussi</h2> + +<p>{{domxref("Node.nextSibling")}}</p> diff --git a/files/fr/web/api/node/removechild/index.html b/files/fr/web/api/node/removechild/index.html new file mode 100644 index 0000000000..cff831cdef --- /dev/null +++ b/files/fr/web/api/node/removechild/index.html @@ -0,0 +1,112 @@ +--- +title: element.removeChild +slug: Web/API/Node/removeChild +tags: + - API + - DOM + - Enfant + - Méthodes + - Noeuds + - Suppression +translation_of: Web/API/Node/removeChild +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>La méthode <code><strong>Node.removeChild()</strong></code> retire un nœud enfant de l'arbre DOM et retourne le nœud retiré.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>); +<strong>OR</strong> +<em>node</em>.removeChild(<em>child</em>); +</pre> + +<ul> + <li><code>child</code> est le nœud enfant à retirer du DOM.</li> + <li><code><font face="Consolas, Liberation Mono, Courier, monospace">node </font></code>est le nœud parent de <code>child</code>.</li> + <li><code>oldchild</code> conserve une référence au nœud enfant retiré. <code>oldchild</code> === <code>child</code>.</li> +</ul> + +<p>Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet <code>ancienEnfant</code><em>. </em></p> + +<p>Avec la seconde forme montrée en exemple, aucune référence à l'objet <code>ancienEnfant</code> n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire">automatiquement supprimé</a> de la mémoire après un court moment.</p> + +<p>Si <code>child</code> n'est pas un enfant du noeud <code>element</code>, la méthode provoque une exception. Une exception sera aussi lancée dans la cas où le nœud <code>enfant </code>est bien un enfant du nœud <code>element </code>au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'événement invoqué dans la cadre d'une tentative de suppression du nœud <code>element </code>(comme <em>blur</em>).</p> + +<p>La méthode peut lever une exception de deux façons :</p> + +<ol> + <li>Si <code>enfant</code> était bien un enfant de <font face="Consolas, Liberation Mono, Courier, monospace">element </font>et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :<code></code><br> + <code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node</code>.</li> + <li>si l'<code>enfant</code> n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante :<br> + <code>Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.</code></li> +</ol> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token"><!--Sample HTML code--></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> + <span class="keyword token">var</span> top <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">var</span> garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">//Cas test 2: la méthode lance l'exception (2)</span> + +</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + +<span class="comment token"><!--Sample HTML code--></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>nested<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> + <span class="keyword token">var</span> top <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">var</span> garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Ce premier appel supprime correctement le noeud</span> + + <span class="comment token">// ......</span> + garbage <span class="operator token">=</span> top<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>nested<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// Cas test 1 : la méthode dans le second appel ici, lance l'exception (1)</span> + +</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="comment token"><!--Sample HTML code--></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>top<span class="punctuation token">"</span></span> <span class="attr-name token">align</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>center<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>nested<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// Supprime un élément spécifié quand son noeud parent est connu</span> +<span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> d_nested <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> throwawayNode <span class="operator token">=</span> d<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>d_nested<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// Supprime un élément spécifié sans avoir à spécifier son noeud parent</span> +<span class="keyword token">var</span> node <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"nested"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">if</span> <span class="punctuation token">(</span>node<span class="punctuation token">.</span>parentNode<span class="punctuation token">)</span> <span class="punctuation token">{</span> + node<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>node<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<pre class="brush:js line-numbers language-js"> +<code class="language-js"><span class="comment token">// Supprime tous les enfant d'un élément</span> +<span class="keyword token">var</span> element <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"top"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">while</span> <span class="punctuation token">(</span>element<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{</span> + element<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>element<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a> — <a class="external" href="http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">traduction en français</a> (non normative)</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a> — <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-1734834066">traduction en français</a> (non normative)</li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.parentNode")}}</li> + <li>{{domxref("ChildNode.remove")}}</li> +</ul> diff --git a/files/fr/web/api/node/replacechild/index.html b/files/fr/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..2233bbd419 --- /dev/null +++ b/files/fr/web/api/node/replacechild/index.html @@ -0,0 +1,133 @@ +--- +title: element.replaceChild +slug: Web/API/Node/replaceChild +tags: + - API + - DOM + - Enfant + - Méthodes + - Noeuds + - Remplacement +translation_of: Web/API/Node/replaceChild +--- +<p>{{APIRef("DOM")}}</p> + +<p>La méthode <strong><code>Node.replaceChild()</code></strong> remplace un nœud enfant du noeud spécifié par un autre nœud.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>replacedNode</em> = <em>parentNode</em>.replaceChild(<em>newChild</em>, <em>oldChild</em>); +</pre> + +<ul> + <li><code>newChild</code> est le nouveau nœud qui remplacera <code>oldChild</code>. S'il existe déjà dans le DOM, il sera d'abord enlevé.</li> + <li><code>oldChild</code> est le nœud existant à remplacer.</li> + <li><code>replaceNode</code> est le nœud remplacé. C'est le même nœud que <code>oldChild</code>.</li> +</ul> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// <div></span> +<span class="comment token">// <span id="childSpan">foo bar</span></span> +<span class="comment token">// </div></span> + +<span class="comment token">// crée un noeud élément vide</span> +<span class="comment token">// sans ID, aucun attribut ni contenu</span> +<span class="keyword token">var</span> sp1 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"span"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// lui donne un attribut id appelé 'newSpan'</span> +sp1<span class="punctuation token">.</span>id <span class="operator token">=</span> <span class="string token">"newSpan"</span><span class="punctuation token">;</span> + +<span class="comment token">// crée un contenu pour le nouvel élément.</span> +<span class="keyword token">var</span> sp1_content <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"new replacement span element."</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// applique ce contenu au nouvel élément</span> +sp1<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>sp1_content<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// construit une référence au noeud existant devant être remplacé</span> +<span class="keyword token">var</span> sp2 <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"childSpan"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> parentDiv <span class="operator token">=</span> sp2<span class="punctuation token">.</span>parentNode<span class="punctuation token">;</span> + +<span class="comment token">// remplace le noeud existant sp2 avec le nouvel élément span sp1</span> +parentDiv<span class="punctuation token">.</span><span class="function token">replaceChild</span><span class="punctuation token">(</span>sp1<span class="punctuation token">,</span> sp2<span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="comment token">// résultat :</span> +<span class="comment token">// <div></span> +<span class="comment token">// <span id="newSpan">nouvel élément span de remplacement.</span></span> +<span class="comment token">// </div></span></code></pre> + +<div> </div> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core : replaceChild</a> — <small><a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-785887307">traduction en français</a> (non normative)</small></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li> +</ul> + +<p> </p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatGeckoDesktop(1)}}</td> + <td> IE6 (Maybe Earlier)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatOpera(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Edge Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td>IE6 (Maybe Earlier)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatOperaMobile(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatChrome(1.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> +</ul> + +<p> </p> diff --git a/files/fr/web/api/node/rootnode/index.html b/files/fr/web/api/node/rootnode/index.html new file mode 100644 index 0000000000..df91e2aa76 --- /dev/null +++ b/files/fr/web/api/node/rootnode/index.html @@ -0,0 +1,70 @@ +--- +title: Node.rootNode +slug: Web/API/Node/rootNode +tags: + - API + - Arborescence + - DOM + - Noeuds + - Propriétés + - Racine +translation_of: Web/API/Node/getRootNode +--- +<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p> + +<p>La propriété en lecture seule <code><strong>Node.rootNode</strong></code> renvoie un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre, ou le noeud actuel s'il est le noeud du plus haut niveau de l'arbre. Il est trouvé par rétro-navigation à travers les noeuds parents {{domxref("Node.parentNode")}} jusqu'à l'arrivée au sommet.</p> + +<div class="warning"> +<p><strong>Important </strong>: Pour des raisons de compatibilité, cette propriété a été remplacée par la méthode {{domxref("Node.getRootNode()")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre><var>rootNode</var> = <em>node</em>.rootNode; +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre.</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>L'exécution de la ligne suivante dans les navigateurs de support doit renvoyer une référence au noeud HTML / document :</p> + +<pre class="brush: js">console.log(document.body.rootNode);</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces + vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou + <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément + que l'auteur comptait obtenir.</p> + + <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a> + et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i> + dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.rootNode")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> diff --git a/files/fr/web/api/node/setuserdata/index.html b/files/fr/web/api/node/setuserdata/index.html new file mode 100644 index 0000000000..1d4a18cce0 --- /dev/null +++ b/files/fr/web/api/node/setuserdata/index.html @@ -0,0 +1,127 @@ +--- +title: Node.setUserData() +slug: Web/API/Node/setUserData +tags: + - API + - DOM + - Données utilisateur + - Méthodes + - Noeuds +translation_of: Web/API/Node/setUserData +--- +<div>{{APIRef("DOM")}}{{obsolete_header}}</div> + +<p>La méthode <code><strong>Node.setUserData()</strong></code> permet à un utilisateur de joindre (ou supprimer) des données à un élément, sans avoir besoin de modifier le DOM. Notez que ces données ne seront pas conservées lors de l'importation via {{domxref("Node.importNode")}}, comme avec les opérations {{domxref("Node.cloneNode()")}} et {{domxref("Node.renameNode()")}} (bien que {{domxref("Node.adoptNode")}} conserve l'information), et les tests d'égalité dans {{domxref("Node.isEqualNode()")}} ne prennent pas en compte les données de l'utilisateur lors de l'évaluation.</p> + +<p>Cette méthode offre l'avantage d'associer des données à des noeuds spécifiques sans nécessiter de modification de la structure du document et de façon standard, mais cela signifie aussi que des étapes supplémentaires peuvent être nécessaires si l'on souhaite sérialiser l'information ou l'inclure sur un clone, importer ou renommer des opérations.</p> + +<div class="note"> +<p>Les méthodes <code>Node.getUserData</code> et {{domxref("Node.setUserData")}} ne sont plus disponibles depuis le contenu Web. {{domxref("HTMLElement.dataset")}} ou <a href="/en-US/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> peuvent être utilisées à la place.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>var prevUserData</var> = <var>someNode</var>.setUserData(<var>userKey</var>, <var>userData</var>, <var>handler</var>);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<ul> + <li><code>userKey</code> est utilisé comme une clé par laquelle on peut ensuite obtenir les données stockées. Plus d'une clé peuvent être définies pour un nœud donné.</li> + <li><code>handler</code> est un rappel qui sera appelé à chaque fois que le noeud est cloné, importé, renommé, supprimé ou adopté ; une fonction peut être utilisée ou un objet mettant en œuvre la méthode <code>handle</code> (partie de l'interface {{domxref("UserDataHandler")}}). Le gestionnaire recevra 5 arguments : un entier (<em>integer</em>) représentant le type d'opération (tel que 1 pour indiquer une opération de clonage), la clé utilisateur, les données sur le noeud, le noeud source (<code>null</code> s'il a été supprimé), le noeud de destination (le nouveau noeud créé ou <code>null</code> si aucun). Si aucun gestionnaire n'est souhaité, il faut spécifier <code>null</code>.</li> + <li><code>userData</code> est l'objet à associer à <code>userKey</code> sur someNode. Si <code>null</code>, tout objet précédemment enregistré et l'UserDataHandler associé à <code>userKey</code> sur ce noeud seront supprimés.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: js">var d = document.implementation.createDocument('', 'test', null); +d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element] +console.log(d.documentElement.getUserData('key')); // 15 +var e = document.importNode(d.documentElement, true); // provoque l'appel du gestionnaire +console.log(e.getUserData('key')); // null puisque les données utilisateur ne sont pas copiées. +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Supprimé de la spécification.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatNo}} {{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.0")}}<br> + {{CompatNo}} {{CompatGeckoMobile("22.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] La méthode reste disponible dans les scripts chrome.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("Node.getUserData()")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li>{{domxref("DOMUserData")}}</li> +</ul> diff --git a/files/fr/web/api/node/textcontent/index.html b/files/fr/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..aa5b90cf7a --- /dev/null +++ b/files/fr/web/api/node/textcontent/index.html @@ -0,0 +1,125 @@ +--- +title: element.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Noeuds + - Propriétés +translation_of: Web/API/Node/textContent +--- +<p>{{APIRef("DOM")}}</p> + +<p>La propriété <code><strong>Node.textContent</strong></code> représente le contenu textuel d'un nœud et de ses descendants.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <em>text</em> = element.textContent; +element.textContent = "ceci est un simple exemple de texte"; +</pre> + +<h2 id="Notes" name="Notes">Description</h2> + +<ul> + <li><code>textContent</code> renvoie <code>null</code> si l'élément est un <a href="https://developer.mozilla.org/fr/docs/Web/API/document">document</a>, 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 <code> <a href="https://developer.mozilla.org/fr/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> .</li> + <li>Si le nœud est une section CDATA, un commentaire, une instruction de traitement ou un nœud texte, <code>textContent</code> renvoie le texte à l'intérieur du nœud (la valeur <a href="https://developer.mozilla.org/fr/docs/Web/API/Node/nodeValue">nodeValue</a>).</li> + <li>Pour les autres types de nœuds, <code>textContent</code> renvoie la concaténation des valeurs de propriété <code>textContent</code> 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.</li> + <li>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.</li> +</ul> + +<h3 id="Différences_avec_innerText">Différences avec <code>innerText</code></h3> + +<p>Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'intention est similaire mais comporte les différences suivantes :</p> + +<ul> + <li><code>textContent</code> 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 <code>innerText</code>.</li> + <li><code>innerText</code> 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 <code>textContent</code>.</li> + <li>Comme <code>innerText</code> reconnaît le style CSS, il déclenchera une refusion (<em>reflow</em>), alors que <code>textContent</code> ne le fera pas.</li> + <li>Contrairement à <code>textContent</code>, la modification <code>innerText</code> 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) .</li> +</ul> + +<h3 id="Différences_avec_innerHTML">Différences avec <code>innerHTML</code></h3> + +<p>{{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 <code>innerHTML</code>. Cependant, <code>textContent</code> a souvent de meilleures performances car le texte n'est pas analysé en HTML. De plus, l'utilisation de <code>textContent</code> peut empêcher les attaques XSS.</p> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="eval">// Étant donné le fragment de HTML suivant : +// <div id="divA">Ceci est un <span>exemple de</span> texte</div> + +// 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> +</pre> + +<h2 id="Polyfill_pour_IE8">Polyfill pour IE8</h2> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// Source: Eli Grey @ http://eligrey.com/blog/post/textcontent-in-ie8</span> +<span class="keyword token">if</span> <span class="punctuation token">(</span>Object<span class="punctuation token">.</span>defineProperty + <span class="operator token">&&</span> Object<span class="punctuation token">.</span>getOwnPropertyDescriptor + <span class="operator token">&&</span> Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">)</span> + <span class="operator token">&&</span> <span class="operator token">!</span>Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> innerText <span class="operator token">=</span> Object<span class="punctuation token">.</span><span class="function token">getOwnPropertyDescriptor</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"innerText"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + Object<span class="punctuation token">.</span><span class="function token">defineProperty</span><span class="punctuation token">(</span>Element<span class="punctuation token">.</span>prototype<span class="punctuation token">,</span> <span class="string token">"textContent"</span><span class="punctuation token">,</span> + <span class="comment token">// Passing innerText or innerText.get directly does not work,</span> + <span class="comment token">// wrapper function is required.</span> + <span class="punctuation token">{</span> + <span class="keyword token">get</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> innerText<span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">,</span> + <span class="keyword token">set</span><span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>s<span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">return</span> innerText<span class="punctuation token">.</span><span class="keyword token">set</span><span class="punctuation token">.</span><span class="function token">call</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">,</span> s<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + <span class="punctuation token">}</span> + <span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<ul> +</ul> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.textContent")}}</p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Pas de changement de DOM4</td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">Plus sur les différences entre <code>innerText</code> et <code>textContent</code></a> (blog post en)</li> +</ul> + +<p> </p> |