From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/api/parentnode/append/index.html | 137 ++++++++++++++++++ .../api/parentnode/childelementcount/index.html | 98 +++++++++++++ files/fr/web/api/parentnode/children/index.html | 89 ++++++++++++ .../api/parentnode/firstelementchild/index.html | 45 ++++++ files/fr/web/api/parentnode/index.html | 75 ++++++++++ .../web/api/parentnode/lastelementchild/index.html | 161 +++++++++++++++++++++ files/fr/web/api/parentnode/prepend/index.html | 137 ++++++++++++++++++ .../fr/web/api/parentnode/queryselector/index.html | 105 ++++++++++++++ .../web/api/parentnode/queryselectorall/index.html | 83 +++++++++++ 9 files changed, 930 insertions(+) create mode 100644 files/fr/web/api/parentnode/append/index.html create mode 100644 files/fr/web/api/parentnode/childelementcount/index.html create mode 100644 files/fr/web/api/parentnode/children/index.html create mode 100644 files/fr/web/api/parentnode/firstelementchild/index.html create mode 100644 files/fr/web/api/parentnode/index.html create mode 100644 files/fr/web/api/parentnode/lastelementchild/index.html create mode 100644 files/fr/web/api/parentnode/prepend/index.html create mode 100644 files/fr/web/api/parentnode/queryselector/index.html create mode 100644 files/fr/web/api/parentnode/queryselectorall/index.html (limited to 'files/fr/web/api/parentnode') diff --git a/files/fr/web/api/parentnode/append/index.html b/files/fr/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..d6818894a3 --- /dev/null +++ b/files/fr/web/api/parentnode/append/index.html @@ -0,0 +1,137 @@ +--- +title: ParentNode.append() +slug: Web/API/ParentNode/append +tags: + - API + - DOM + - Reference +translation_of: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}}
+ +

La méthode ParentNode.append insère un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant de ParentNode. Les objets {{domxref("DOMString")}} (c’est-à-dire les chaînes de caractères) sont insérés comme nœuds {{domxref("Text")}} équivalents.

+ +

Différences avec {{domxref("Node.appendChild()")}} :

+ + + +

Syntaxe

+ +
[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+
+ +

Paramètres

+ +
+
nodes
+
Un ensemble d’objets {{domxref("Node")}} ou {{domxref("DOMString")}} à insérer.
+
+ +

Exceptions

+ + + +

Exemples

+ +

Ajouter un élément

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

Ajouter du texte

+ +
var parent = document.createElement("div");
+parent.append("Du texte");
+
+console.log(parent.textContent); // "Du texte"
+ +

Ajouter un élément et du texte

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Du texte", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Du texte", <p> ]
+ +

ParentNode.append() est unscopable

+ +

La méthode append() n’est pas accessible dans un bloc with. Voir {{jsxref("Symbol.unscopables")}} pour plus d’information.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

Polyfill

+ +

Vous pouvez utiliser la méthode append() dans Internet Explorer 9 (et supérieur) avec le code suivant :

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ParentNode.append")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/parentnode/childelementcount/index.html b/files/fr/web/api/parentnode/childelementcount/index.html new file mode 100644 index 0000000000..df243c5b32 --- /dev/null +++ b/files/fr/web/api/parentnode/childelementcount/index.html @@ -0,0 +1,98 @@ +--- +title: ParentNode.childElementCount +slug: Web/API/ParentNode/childElementCount +tags: + - API + - DOM + - Noeuds + - Propriétés + - Reference + - parent +translation_of: Web/API/ParentNode/childElementCount +--- +
+

{{APIRef("DOM") }}

+
+ +

La propriété ParentNode.childElementCount en lecture seule renvoie un unsigned long (long non signé) représentant le nombre d'élèments fils de l'élément donné.

+ +
+

Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}.
+ Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (noeuds) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, childElementCount a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.

+
+ +

Syntaxe

+ +
var count = node.childElementCount;
+
+ +
+
count
+
détient la valeur de retour, un type unsigned long (long non signé) (simplement un nombre entier)
+
node
+
est un objet représentant un Document, un DocumentFragment ou un Element.
+
+ +

Exemple

+ +
var foo = document.getElementById("foo");
+if (foo.childElementCount > 0) {
+    // faire quelque chose
+}
+ +

Polyfill pour IE8 & IE9 & Safari

+ +

Cette propriété n'est pas supportée par les versions antérieures à IE9 ni par IE9 ni par Safari. Ainsi, les objets Document, DocumentFragment dans ces navigateurs ne l'ont pas.

+ +
;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.childElementCount == null) {
+        Object.defineProperty(constructor.prototype, 'childElementCount', {
+            get: function() {
+                var i = 0, count = 0, node, nodes = this.childNodes;
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) count++;
+                }
+                return count;
+            }
+        });
+    }
+})(window.Node || window.Element);
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}Divise l'interface ElementTraversal en {{domxref("ChildNode")}} et ParentNode. La propriété est maintenant définie sur cette dernière.
+ Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}}Ajout de sa définition initiale à la pure interface ElementTraversal et de son utilisation sur {{domxref("Element")}}.
+ +

Compatibilité des navigateurs

+ + +

{{Compat("api.ParentNode.childElementCount")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/parentnode/children/index.html b/files/fr/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..52c529a1b8 --- /dev/null +++ b/files/fr/web/api/parentnode/children/index.html @@ -0,0 +1,89 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - DOM + - Noeuds + - Propriétés + - parent +translation_of: Web/API/ParentNode/children +--- +

{{ APIRef("DOM") }}

+ +

La propriété children de {{domxref("ParentNode")}} est une propriété en lecture seule qui renvoie une {{domxref("HTMLCollection")}} directe contenant tous les enfants {{domxref("Element","éléments")}} du noeud sur lequel elle a été appelée.

+ +

Syntaxe

+ +
var children = node.children;
+ +

Valeur

+ +

Une {{ domxref("HTMLCollection") }}, qui est une collection directe et ordonnée des éléments DOM qui sont enfants du node (noeud). Vous pouvez accéder aux noeuds enfants individuellement en utilisant la méthode  {{domxref("HTMLCollection.item", "item()")}} (élément) sur la collection ou en utilisant la notation de type tableau (array) de JavaScript.

+ +

S'il n'y a pas d'éléments enfants, alors children est une liste vide et a une length (longueur) de 0.

+ +

Exemple

+ +
var machin = document.getElementById('machin');
+for (var i = 0; i < machin.children.length; i++) {
+    console.log(machin.children[i].tagName);
+}
+ +

Polyfill

+ +
// Réécrit le prototype 'children' natif.
+// Ajoute le support de Document & DocumentFragment pour IE9 & Safari.
+// Renvoie un tableau (array) au lieu d'une HTMLCollection.
+;(function(constructeur) {
+    if (constructeur &&
+        constructeur.prototype &&
+        constructeur.prototype.children == null) {
+        Object.defineProperty(constructeur.prototype, 'children', {
+            get: function() {
+                var i = 0, noeud, noeuds = this.childNodes, children = [];
+                while (noeud = noeuds[i++]) {
+                    if (noeud.nodeType === 1) {
+                        children.push(noeud);
+                    }
+                }
+                return children;
+            }
+        });
+    }
+})(window.Node || window.Element);
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.ParentNode.children")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/parentnode/firstelementchild/index.html b/files/fr/web/api/parentnode/firstelementchild/index.html new file mode 100644 index 0000000000..60983da28f --- /dev/null +++ b/files/fr/web/api/parentnode/firstelementchild/index.html @@ -0,0 +1,45 @@ +--- +title: Element.firstElementChild +slug: Web/API/ParentNode/firstElementChild +tags: + - Parcours arborescence +translation_of: Web/API/ParentNode/firstElementChild +--- +

{{ gecko_minversion_header("1.9.1") }}

+ +

{{ ApiRef() }}

+ +

Résumé

+ +

firstElementChild renvoie le premier élément enfant d'un élément ou null s'il n'y a pas de descendants.

+ +

Syntaxe and valeurs

+ +
var NoeudEnfant = ReferenceElementNoeud.firstElementChild;
+ +

NoeudEnfant est une référence vers le premier élément enfant de l'élément noeud , ou null s'il n'y en a pas.

+ +

Cet attribut est en lecture seule.

+ +

Exemple

+ +
<p id="para-01">
+  <span>Premier span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstElementChild.nodeName)
+</script>
+ +

Dans cet exemple la fonction alert affiche "SPAN", qui est le nom du premier nœud enfant de l'élément paragraphe.

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/parentnode/index.html b/files/fr/web/api/parentnode/index.html new file mode 100644 index 0000000000..9b33ade976 --- /dev/null +++ b/files/fr/web/api/parentnode/index.html @@ -0,0 +1,75 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API +translation_of: Web/API/ParentNode +--- +

{{ APIRef("DOM") }}

+ +

Le ParentNode contient des méthodes et des propriétés communes à tous les types d'objets {{domxref("Node")}}  qui peuvent avoir des enfants. Il est implémenté par les objets {{domxref("Element")}}, {{domxref("Document")}}, et {{domxref("DocumentFragment")}}.

+ +

Propriétés

+ +
+
{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}
+
Retourne la {{domxref("HTMLCollection")}} contenant tous les objets de type {{domxref("Element")}} qui sont des enfants de ce ParentNode.
+
{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}
+
Retourne l' {{domxref("Element")}} qui est le premier enfant de ce ParentNode, ou null s'il n'y en a pas.
+
{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}
+
Retourne l'élément {{domxref("Element")}} qui est le dernier enfant de ce ParentNode, ou null s'il n'y en a pas.
+
{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}
+
Retourne un unsigned long donnant la quantité d'enfants du parent.
+
+ +

Méthodes

+ +
+
{{domxref("ParentNode.append()")}} {{experimental_inline}}
+
Insère un ensemble d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} après le dernier enfant du ParentNode. Les objets {{domxref("DOMString")}} sont insérés comme équivalents aux noeuds {{domxref("Text")}} .
+
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
+
Insère un ensemble d'objets {{domxref("Node")}} ou {{domxref("DOMString")}} avant le premier enfant du ParentNode. Les objets {{domxref("DOMString")}} sont insérés comme équivalents aux noeuds {{domxref("Text")}}.
+
{{domxref("ParentNode.querySelector()")}}
+
Retourne le premier {{domxref("Element")}} avec l'élément actuel en tant que racine qui correspond au groupe de sélecteurs spécifié.
+
{{domxref("ParentNode.querySelectorAll()")}}
+
Retourne une {{domxref("NodeList")}} représentant une liste d'éléments avec l'élément courant comme racine qui correspond au groupe de sélecteurs spécifié.
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Divise l'interface ElementTraversal dans {{domxref("ChildNode")}} et {{domxref("ParentNode")}}. Les propriétés {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, et {{domxref("ParentNode.childElementCount")}} sont maintenant définies sur ce dernier. Ajout des propriétés {{domxref("ParentNode.children")}}, et des méthodes {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, et {{domxref("ParentNode.prepend()")}}.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Ajout de la définition initiale de ses propriétés dans l'interface pureElementTraversal, et son utilisation sur {{domxref("Element")}}.
+ +

 

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.ParentNode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/parentnode/lastelementchild/index.html b/files/fr/web/api/parentnode/lastelementchild/index.html new file mode 100644 index 0000000000..8a978b0997 --- /dev/null +++ b/files/fr/web/api/parentnode/lastelementchild/index.html @@ -0,0 +1,161 @@ +--- +title: ParentNode.lastElementChild +slug: Web/API/ParentNode/lastElementChild +tags: + - API + - DOM + - Noeuds + - Propriétés + - parent +translation_of: Web/API/ParentNode/lastElementChild +--- +

{{ APIRef("DOM") }}

+ +

La propriété en lecture seule ParentNode.lastElementChild  renvoie  le dernier enfant de l'objet {{domxref("Element")}} ou null s'il n'y a pas d'élément enfant.

+ +
+

Cette propriiété a été définie initialement dans la pure interface {{domxref("ElementTraversal")}}. Comme cette interface contenait deux différents jeux de propriétés, l'un visant les  {{domxref("Node")}} (noeuds) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, childElementCount a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité.

+
+ +

Syntaxe

+ +
var element = node.lastElementChild;
+ +

Exemple

+ +
<ul id="foo">
+  <li>First  (1)</li>
+  <li>Second (2)</li>
+  <li>Third  (3)</li>
+</ul>
+
+<script>
+var foo = document.getElementById('foo');
+// produit : Third  (3)
+console.log(foo.lastElementChild.textContent);
+</script>
+
+ +

Polyfill for IE8, IE9 and Safari

+ +
// Remplace le prototype "lastElementChild" natif.
+// Ajout de Document & DocumentFragment pris en charge pour IE9 & Safari.
+// Renvoie un tableau (array) à la place de HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Spécification

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}{{Spec2('DOM WHATWG')}}Divise l'interface ElementTraversal en {{domxref("ChildNode")}} et ParentNode. La propriété est maintenant définie sur cette dernière.
+ Les {{domxref("Document")}} et {{domxref("DocumentFragment")}} implémentent la nouvelle interface.
{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}{{Spec2('Element Traversal')}}Ajout de sa définition initiale à la pure interface ElementTraversal et de son utilisation sur {{domxref("Element")}}.
+ +

Compatibilité des navigateurs

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

 

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/parentnode/prepend/index.html b/files/fr/web/api/parentnode/prepend/index.html new file mode 100644 index 0000000000..a11511c3c8 --- /dev/null +++ b/files/fr/web/api/parentnode/prepend/index.html @@ -0,0 +1,137 @@ +--- +title: ParentNode.prepend() +slug: Web/API/ParentNode/prepend +tags: + - API + - DOM + - Méthodes + - Noeuds + - parent +translation_of: Web/API/ParentNode/prepend +--- +
{{APIRef("DOM")}}
+ +

La méthode ParentNode.prepend insère un jeu d'objets {{domxref("Node")}} (noeud) ou {{domxref("DOMString")}} (chaîne de caractères) avant le premier enfant de ParentNode. Les objets {{domxref("DOMString")}} sont insérés comme équivalant des noeuds {{domxref("Text")}}.

+ +

Syntaxe

+ +
ParentNode.prepend(nodesToPrepend);
+
+ +

Paramètres

+ +
+
nodesToPrepend
+
Un noeud ou plus à insérer avant le premier noeud enfant dans le ParentNode courant. Chaque noeud peut être spécifié comme un objet {{domxref("Node")}} ou comme une chaîne de caractères ; les chaînes sont insérées comme de nouveaux noeuds {{domxref("Text")}}.
+
+ +

Valeur retournée

+ +

undefined (indéfini).

+ +

Exceptions

+ + + +

Exemples

+ +

Ajout d'un élément

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+var span = document.createElement("span");
+parent.append(p);
+parent.prepend(span);
+
+console.log(parent.childNodes); // NodeList [ <span>, <p> ]
+
+ +

Ajout d'un texte

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"
+ +

Ajout d'un élément et d'un texte

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.prepend() est non accessible

+ +

La méthode prepend() n'est pas comprise dans l'instruction with. Voir {{jsxref("Symbol.unscopables")}} pour plus d'informations.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined (prepend n'est pas défini)
+ +

Polyfill

+ +

vous pouvez utiliser le polyfill pour la méthode prepend() si elle n'est pas disponible :

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('prepend')) {
+      return;
+    }
+    Object.defineProperty(item, 'prepend', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function prepend() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.insertBefore(docFrag, this.firstChild);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.ParentNode.prepend")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/parentnode/queryselector/index.html b/files/fr/web/api/parentnode/queryselector/index.html new file mode 100644 index 0000000000..62844d47b1 --- /dev/null +++ b/files/fr/web/api/parentnode/queryselector/index.html @@ -0,0 +1,105 @@ +--- +title: ParentNode.querySelector() +slug: Web/API/ParentNode/querySelector +tags: + - API + - DOM + - Draft + - Method + - NeedsExample + - ParentNode + - Reference + - Selectors + - querySelector +translation_of: Web/API/ParentNode/querySelector +--- +

{{APIRef("DOM")}}{{Draft}}

+ +

Le mixin {{DOMxRef("ParentNode")}} définit la méthode querySelector()  comme renvoyant un {{DOMxRef("Element")}} représentant le premier élément correspondant au groupe de sélecteurs spécifié qui sont les descendants de l'objet sur lequel la méthode a été appelée.

+ +

Si vous avez besoin de tous les éléments correspondant à la liste de sélecteurs, utilisez plutôt {{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} .

+ +
+

Remarque: Cette méthode est implémentée comme {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} et {{DOMxRef("Element.querySelector()")}}.

+
+ +

Syntaxe

+ +
élément = parentNode.querySelector(sélécteurs);
+
+ +

Paramètres

+ +
+
sélécteurs
+
Un {{DOMxRef("DOMString")}} contenant un ou plusieurs sélecteurs à comparer. Cette chaîne doit être une compound selector list valide prise en charge par le navigateur; sinon, une exception SyntaxError est levée. Voir Localisation des éléments DOM à l'aide de sélecteurs pour plus d'informations sur l'utilisation des sélecteurs pour identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés en les séparant à l'aide de virgules.
+
+ +
+

Remarque: Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'un caractère barre oblique inverse. Étant donné que JavaScript utilise également l'échappement arrière, une attention particulière doit être apportée lors de l'écriture de littéraux de chaîne à l'aide de ces caractères. Voir {{anch("Escaping special characters")}} pour plus d'informations.

+
+ +

Retourner une valeur

+ +

Le premier {{DOMxRef("Element")}} qui correspond à au moins l'un des sélecteurs spécifiés ou null si aucun élément de ce type n'est trouvé.

+ +
+

Remarque: Si le spécifié sélécteurs inclut un pseudo-élément CSS,  la valeur renvoyée est toujours null.

+
+ +

Des exceptions

+ +
+
SyntaxError
+
La syntaxe de la chaîne sélécteurs spécifiée n'est pas valide.
+
+ +

Caractéristiques

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("DOM WHATWG")}}Niveau de vie
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("Selectors API Level 2")}}Pas de changement
{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}{{Spec2("DOM4")}}Définition initiale
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Définition originale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.ParentNode.querySelector")}}

+ +

Voir également

+ + diff --git a/files/fr/web/api/parentnode/queryselectorall/index.html b/files/fr/web/api/parentnode/queryselectorall/index.html new file mode 100644 index 0000000000..7c38961c38 --- /dev/null +++ b/files/fr/web/api/parentnode/queryselectorall/index.html @@ -0,0 +1,83 @@ +--- +title: ParentNode.querySelectorAll() +slug: Web/API/ParentNode/querySelectorAll +tags: + - API + - DOM + - Méthodes + - Noeuds + - Sélecteurs + - parent +translation_of: Web/API/ParentNode/querySelectorAll +--- +
{{ApiRef("DOM")}}
+ +

Renvoie une {{domxref("NodeList")}} représentant une liste d'éléments avec l'élément courant comme racine et qui correspondent au groupe de sélecteurs spécifiés.

+ +

Syntaxe

+ +
elementList = document.querySelectorAll(selectors);
+
+ +

où

+ + + +

La NodeList retournée contiendra tous les éléments dans le document qui correspondent à l'un des sélecteurs spécifiés. Si la chaîne selectors contient un pseudo-element CSS, la elementList retournée sera vide.

+ +

Exemples

+ +

Cet exemple renvoie une liste de tous les éléments div d'un document avec une classe "note" ou "alert" :

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Notes

+ +

Renvoie une NodeList non directe de tous les noeuds éléments correspondant.

+ +

Lance une exception SYNTAX_ERR si le groupe de sélecteurs spécifié est invalide.

+ +

querySelectorAll() fut introduite dans l'API WebApps.

+ +

L'argument chaîne passé à querySelectorAll() doit suivre la syntaxe CSS. Voir {{domxref("document.querySelector")}} pour des exemples concrets.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Pas de changement.
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.ParentNode.querySelectorAll")}}

+ + +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf