recursal/MDN huggingface dataset:
element.getAttributeNode
========================

Résumé
------

Renvoie le nœud d'attribut spécifié pour l'élément courant, en tant que noeud `Attr`.

Syntaxe
-------


```js
var attrNode = element.getAttributeNode(attrName);
```


* `attrNode` est un nœud `Attr` pour l'attribut demandé.
* `attrName` est une chaîne de caractères qui contient le nom de l'attribut.
Exemple
-------


```js
// html: <div id="top" />
var t = document.getElementById("top");
var idAttr = t.getAttributeNode("id");
alert(idAttr.value == "top");
```

Notes
-----

Lorsqu'elle est appelée sur un élément HTML dans un DOM marqué comme un document HTML, `getAttributeNode` passe en minuscules son argument avant de continuer.

Les nœuds `Attr` héritent de `Node`, mais ne sont pas considérés comme faisant partie de l'arbre du document. Les attributs habituels des nœuds comme parentNode, previousSibling, et nextSibling sont `null` pour un nœud `Attr`. Vous pouvez cependant accéder à l'élément auquel cet attribut appartient grâce à la propriété `ownerElement`.

getAttribute est habituellement utilisé à la place de `getAttributeNode` pour obtenir la valeur d'un attribut d'un élément.

Méthodes DOM traitant des attributs sur les éléments :

| DOM Level 1 (le plus courant) | DOM Level 2 | DOM Level 1 traitant directement les nœuds `Attr` | DOM Level 2 traitant directement les nœuds `Attr` |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

Spécification
-------------

* DOM Level 2 Core : getAttributeNode — traduction en français (non normative)
* HTML 5: APIs in HTML documents
Element.append()
================

La méthode **`Element.append()`** ajoute un ensemble d'objets `Node` ou de chaînes de caractères après le dernier enfant d'`Element`. Les chaînes de caractères sont insérées comme des nœuds `Text`.

Voici les différences entre `Element.append()` et `Node.appendChild()` :

* `Element.append()` permet d'ajouter des chaînes de caractères tandis que `Node.appendChild()` accepte uniquement les objets `Node`.
* `Element.append()` n'a pas de valeur de retour alors que `Node.appendChild()` renvoie l'objet `Node` ajouté.
* `Element.append()` permet d'ajouter plusieurs nœuds et chaînes de caractères tandis que `Node.appendChild()` ne permet d'ajouter qu'un seul nœud.
Syntaxe
-------


```js
append(param1);
append(param1, param2);
append(param1, param2, /\* ... ,\*/ paramN);
```

### Paramètres

`param1`, …, `paramN`

Un ensemble d'objets `Node` ou de chaînes de caractères à insérer.

### Exceptions

`DOMException` `HierarchyRequestError`

Levée lorsque le nœud ne peut être inséré à l'emplacement indiqué dans la hiérarchie.

Exemples
--------

### Ajouter un élément


```js
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);

console.log(div.childNodes); // NodeList [ <p> ]
```

### Ajouter du texte


```js
let div = document.createElement("div");
div.append("Du texte");

console.log(div.textContent); // "Du texte"
```

### Ajouter un élément et du texte


```js
let div = document.createElement("div");
let p = document.createElement("p");
div.append("Du texte", p);

console.log(div.childNodes); // NodeList [ #text "Du texte", <p> ]
```

### `append()` est hors de la portée créée par `with`

La méthode `append()` n'est pas disponible dans la portée créée par une instruction `with`. Voir `Symbol.unscopables` pour plus d'informations.


```js
let div = document.createElement("div");

with (div) {
  append("toto");
}
// ReferenceError: append is not defined
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-append① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Element.prepend()`
* `Node.appendChild()`
* `Element.after()`
* `Element.insertAdjacentElement()`
* `NodeList`
HTMLElement: beforeinput event
==============================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

L'évènement DOM **`beforeinput`** est émis quand la valeur d'un élément `<input>`, `<select>`, ou `<textarea>` est sur le point d'être modifié. L'évènement s'applique également aux éléments ayant l'attribut `contenteditable` actif, et à tout élément quand le `designMode` est activé.

Dans le cas de `contenteditable` et `designMode`, la cible de l'évènement est *l'hôte d'édition.* Si ces propriétés s'appliquent à plusieurs éléments, l'hôte d'édition est le plus proche ancêtre dont le parent n'est pas éditable.

|  |  |
| --- | --- |
| Bouillonne | Oui |
| Annulable | Oui |
| Interface | `InputEvent` |
| Propriété gestionnaire d'évènement | Aucune |
| Sync / Async | Sync |
| Composé | Oui |
| Action par défaut | Mettre à jour l'élément DOM |

Exemples
--------

Cet exemple affiche la valeur de l'élément `<input>` juste avant qu'elle soit modifiée.

### HTML


```html
<input placeholder="Saisissez du texte" name="name" />
<p id="values"></p>
```

### JavaScript


```js
const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("beforeinput", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| UI Events # event-type-beforeinput |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Évènement associé : `input`
element.getElementsByTagName
============================

La méthode **`Element.getElementsByTagName()`** retourne une liste des éléments portant le nom de balise donné. La recherche porte sur le sous-arbre de l'élément spécifié, à l'exception de cet élément lui-même. La liste retournée est *live*, c'est à dire qu'elle se met à jour automatiquement à chaque changement de l'arbre DOM. Par conséquent, il n'est pas nécessaire d'appeller plusieurs fois `Element.getElementsByTagName()` avec le même élément et les mêmes arguments.

Quand elle est appelée sur un élément HTML dans un document HTML, `getElementsByTagName` place son argument en minuscule avant de continuer. Cela n'est pas souhaitable lorsque vous tentez de faire correspondre des éléments SVG « *camel-case* » dans une sous-arborescence dans un document HTML. `Element.getElementsByTagNameNS` fonctionne dans ce cas.

`Element.getElementsByTagName` est similaire à `Document.getElementsByTagName()`, à part que sa recherche est limitée aux éléments qui sont des descendants de l'élément spécifié.

Syntaxe
-------


```js
elements = element.getElementsByTagName(tagName);
```


* `elements` est une `HTMLCollection` contenant les éléments trouvés, dans l'ordre dans lequel ils apparaissent dans le sous-arbre. Si aucun élément n'a été trouvé, la `HTMLCollection` est vide.
* `element` est l'élément depuis lequel la recherche doit commencer. Notez que seuls les descendants de cet élément feront partie des résultats, mais pas l'élément lui-même.
* `tagName` est le nom qualifié à rechercher. La chaîne spéciale `"*"` représente tous les éléments possibles. Pour la compatibilité avec XHTML, les minuscules doivent être utilisées.
Exemple
-------


```js
// vérifie l'alignement sur un nombre de cellules dans un tableau.
var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
  var status = cells[i].getAttribute("data-status");
  if (status == "open") {
    // saisit les données
  }
}
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # dom-element-getelementsbytagname |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.getAttributeNames()
===========================

`Element.getAttributeNames()` renvoie les noms des attributs de l'élément sous la forme d'un `Array` (*tableau*) de chaînes de caractères. Si l'élément n'a pas d'attributs, il retourne un tableau vide.

L'utilisation de `getAttributeNames()` complété par `getAttribute()`, est une alternative efficiente et performante pour l'accès à `Element.attributes`.

Syntaxe
-------


```js
let attributeNames = element.getAttributeNames();
```

Exemple
-------


```js
// Itérer sur les attributs de l'élément
for (let name of element.getAttributeNames()) {
  let value = element.getAttribute(name);
  console.log(name, value);
}
```

Polyfill
--------


```js
if (Element.prototype.getAttributeNames == undefined) {
  Element.prototype.getAttributeNames = function () {
    var attributes = this.attributes;
    var length = attributes.length;
    var result = new Array(length);
    for (var i = 0; i < length; i++) {
      result[i] = attributes[i].name;
    }
    return result;
  };
}
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getattributenames① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Element.insertAdjacentText()
============================

La méthode `insertAdjacentText()` insère un noeud texte donné à une position donnée par rapport à l'élément sur lequel elle est appelé.

Syntaxe
-------


```js
element.insertAdjacentText(position, element);
```

### Paramètres

position

Une `DOMString` (*chaîne de caractères*) représentant la position par rapport à l'`element` ; elle doit être l'une des chaînes suivantes :

* `'beforebegin'` : avant l'`element` lui-même ;
* `'afterbegin'` : à l'intérieur de l'`element`, avant son premier enfant ;
* `'beforeend'` : à l'intérieur de l'`element`, avant son dernier enfant ;
* `'afterend'` : après l'`element` lui-même.

element

Une `DOMString` (*chaîne de caractères*) représentant le texte à insérer dans l'arbre.

### Valeur renvoyée

Vide.

### Exceptions

| Exception | Explication |
| --- | --- |
| `SyntaxError` | La `position` indiquée n'est pas une valeur reconnue. |

### Visualisation des noms de position


```html
<!-- beforebegin -->
<p>
  <!-- afterbegin> -->
  machin
  <!-- beforeend -->
</p>
<!-- afterend -->
```


**Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est dans l'arbre et possède un élément parent.

Exemple
-------


```js
beforeBtn.addEventListener("click", function () {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", function () {
  para.insertAdjacentText("beforeend", textInput.value);
});
```


Jetez un œil à notre démo insertAdjacentText.html sur GitHub (voir le code source aussi). Ici, nous avons un simple paragraphe. Vous pouvez entrer du texte dans l'élément de formulaire, puis presser les boutons *Insert before* (*insère avant*) et *Insert after* (*insère après*) pour l'insérer avant ou après le texte de paragraphe existant en utilisant `insertAdjacentText()`. Notez que le nœud texte existant n'y est pas ajouté — d'autres nœuds de texte sont créés contenant le nouvel ajout.

Émulation
---------

Vous pouvez utiliser une émulation de la méthode `insertAdjacentText()` dans Internet Explorer 5.5 (et peut-être antérieur) et supérieur avec le code suivant :


```js
if (!Element.prototype.insertAdjacentText)
  Element.prototype.insertAdjacentText = function (type, txt) {
    this.insertAdjacentHTML(
      type,
      (txt + "") // convertir en chaîne de caractères
        .replace(/&/g, "&amp;") // intégrer des symboles d'esperluette
        .replace(/</g, "&lt;"), // intégrer les symboles "plus petit que"
    );
  };
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # dom-element-insertadjacenttext |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Element.insertAdjacentElement()`
* `Element.insertAdjacentHTML()`
element.onkeyup
===============

### Résumé

La propriété **onkeyup** renvoi le gestionnaire d'évènements onKeyUp de l'élément courant.

### Syntaxe

code de gestion de l'évènement = element.onkeyup

### Exemple


```html
<input type="text" onKeyUp="cleRelachee(event)" />
<script>
 function cleRelachee(evt) {
 alert(evt.keyCode);
 }
</script>
```

### Notes

L'évènement `keyup` se déclenche lorsque qu'une touche du clavier qui a été pressée est relâchée.

### Voir aussi

onkeypress onkeydown

### Spécification

Ne fait partie d'aucune spécification.
Element.scrollLeft
==================

La propriété **`Element.scrollLeft`** permet de lire ou de modifier le nombre de pixels le long desquels le contenu d'un élément a défilé depuis son bord gauche.

Si la propriété `direction` de l'élément vaut `rtl` (pour une écriture de droite à gauche), `scrollLeft` est à `0` lorsque la barre de défilement est à la position la plus à droite possible (ce qui correspond au début du contenu à faire défiler) et elle devient de plus en plus négative lors du défilement vers la fin du contenu.

Cette propriété peut être définie avec n'importe quelle valeur entière. Toutefois :

* Si l'élément ne peut pas défiler (par exemple parce qu'il n'y a aucun défilement), `scrollLeft` sera fixée à `0`.
* Si la valeur fournie est inférieure à `0` (ou supérieure à `0` pour les éléments écrits de droite à gauche), `scrollLeft` sera fixée à `0`.
* Si la valeur fournie est supérieure au défilement maximal possible pour le contenu, `scrollLeft` sera fixée à la valeur maximale possible.

**Attention :** Pour les systèmes qui utilisent une mise à l'échelle pour l'affichage (*display scaling*), `scrollLeft` pourra fournir une valeur décimale.

Valeur
------

Un nombre

Exemples
--------

### HTML


```html
<div id="container">
  <div id="content">Cliquez sur le bouton pour glisser à droite !</div>
</div>

<button id="slide" type="button">Glisser à droite</button>
```

### CSS


```css
#container {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

#content {
  width: 250px;
  background-color: #ccc;
}
```

### JavaScript


```js
const button = document.getElementById("slide");

button.onclick = function () {
  document.getElementById("container").scrollLeft += 20;
};
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollleft |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Element.scrollTop`
* `Element.scrollTo()`
Element.clientHeight
====================

La propriété en lecture seule **`Element.clientHeight`** vaut zéro pour les éléments sans CSS ou sans boîte de disposition en ligne/incise ; sinon elle vaut la hauteur interne d'un élément, exprimée en pixels. Cette hauteur inclut le remplissage (*padding*) mais exclut les bordures, les marges et les éventuelles barres de défilement horizontales.

`clientHeight` peut être calculée comme : *hauteur CSS* + *remplissage CSS* - *hauteur des barres de défilement horizontales* s'il y en a.

Lorsque `clientHeight` est utilisée sur l'élément racine (l'élément `<html>`), (ou sur `<body>` si le document est en mode de compatibilité (*quirks mode*)), c'est la hauteur de la zone d'affichage (*viewport*) (sans tenir compte des barres de défilement) qui est renvoyée. Il s'agit ici d'un cas aux limites pour `clientHeight`.

**Note :** Cette propriété sera arrondie en un entier. Si vous souhaitez utiliser une valeur décimale, vous pouvez utiliser `element.getBoundingClientRect()`.

Syntaxe
-------


```js
var intElemClientHeight = element.clientHeight;
```


`intElemClientHeight` est un entier correspondant à la valeur de `clientHeight` pour l'élément représenté par `element`, exprimée en pixels. La propriété `clientHeight` est uniquement accessible en lecture-seule.

Exemples
--------

![](/fr/docs/Web/API/Element/clientHeight/dimensions-client.png)

Spécifications
--------------

| Specification |
| --- |
| CSSOM View Module # dom-element-clientheight |

### Notes

`clientHeight` est une propriété introduite par le modèle objet d'Internet Explorer.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `HTMLElement.offsetHeight`
* `Element.scrollHeight`
* Déterminer les dimensions des éléments
copy
====

L'événement **copy** est déclenché lorsque l'utilisateur initie une copie par le biais de l'interface du navigateur (par exemple, Ctrl/Cmd+C ou "copier" du menu contextuel) et en réponse d'un appel de `document.execCommand('copy')` autorisé.

Informations générales
----------------------

Spécification

Clipboard

Interface
`ClipboardEvent` (en-US)
Propagation

Oui

Annulable

Oui

Cible
`Element`: L'élément ayant le focus (pour les éléments `contentEditable` - l'élément contenant le début de la sélection), ou l'élément `<body>`
Action par défaut

Voir ce-dessous

Un gestionnaire de cet événement peut modifier l'objet `ClipboardEvent.clipboardData` (en-US) en appellant `setData(format, data)` (en-US):


```js
document.addEventListener("copy", function (e) {
  e.clipboardData.setData("text/plain", "Hello, world!");
  e.clipboardData.setData("text/html", "<b>Hello, world!</b>");
  e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
});
```


Un gestionnaire de cet événement ne peut pas lire les données du presse-papiers en utilisant `clipboardData.getData()` (en-US).

L'action par défaut de l'événement dépend de la source de celui-ci et du comportement du gestionnaire:

* Un événement de copie synthétique n'a pas d'action par défaut;
* Si l'événement n'a pas été annulé: Copie de la sélection (s'il y a) dans le presse-papiers;
* Si le gestionnaire a annulé l'événement et appelé setData(): Copie le contenu de *clipboardData* de `ClipboardEvent` (en-US);
* Si le gestionnaire a annulé l'événement sans appelé setData(): Aucune action.
Propriétés
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Lecture seule  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Lecture seule  | `DOMString` | The type of event. |
| `bubbles` Lecture seule  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Lecture seule  | `Boolean` | Whether the event is cancellable or not. |

Spécifications
--------------

| Specification |
| --- |
| Clipboard API and events # clipboard-event-copy |
| HTML Standard # handler-oncopy |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Événements relatifs : `cut` (en-US), `paste` (en-US)
* Cet événement sur `Document` cible : `copy` (en-US)
* Cet événement sur `Window` cible : `copy`
element.insertAdjacentHTML
==========================

`insertAdjacentHTML()` analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que **innerHTML**.

Syntaxe
-------


```js
element.insertAdjacentHTML(position, text);
```

### Paramètres

`position`

une `DOMString` représentant la position relative à l'`element`, et doit être une des chaînes de caractères suivantes :

* `'beforebegin'` : Avant l'`element` lui-même.
* `'afterbegin'` : Juste à l'intérieur de l'`element` , avant son premier enfant.
* `'beforeend'` : Juste à l'intérieur de l'`element` , après son dernier enfant.
* `'afterend'` : Après `element` lui-même.

`text`

est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM.

### Visualisation des noms de position


```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```


**Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent.

Exemple
-------


```js
// <div id="one">one</div>
var d1 = document.getElementById("one");
d1.insertAdjacentHTML("afterend", '<div id="two">two</div>');

// Ici la nouvelle structure est :
// <div id="one">one</div><div id="two">two</div>
```

Notes
-----

### Considérations de sécurité

Lorsque vous insérez du code HTML dans une page en utilisant insertAdjacentHTML, veillez à ne pas utiliser d'entrée utilisateur qui n'a pas été échappée.

Il est recommandé de ne pas utiliser `insertAdjacentHTML` lors de l'insertion de texte brut; à la place, utilisez la propriété `node.textContent` ou la méthode `node.insertAdjacentText()`. Cela n'interprète pas le contenu transmis au format HTML, mais l'insère à la place sous forme de texte brut.

Spécifications
--------------

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-insertadjacenthtml |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Element.insertAdjacentElement()`
* `Element.insertAdjacentText()`
* hacks.mozilla.org guest post par Henri Sivonen y compris le benchmark montrant que insertAdjacentHTML peut être beaucoup plus rapide dans certains cas.
Element.namespaceURI
====================

La propriété en lecture seule **`Element.namespaceURI`** renvoie l'URI d'espace de noms de l'élément ou `null` si l'élément n'est pas dans un espace de nom.

**Note :** Avant DOM4, cet API était définie dans l'interface `Node`.

Syntaxe
-------


```js
namespace = element.namespaceURI;
```

Exemple
-------

Dans cet extrait, un élément est examiné pour son `localName` et son `namespaceURI`. Si le `namespaceURI` renvoie l'espace de noms XUL et le `localName` retourne "browser" (*navigateur*), alors le noeud est compris comme étant un `<browser/>` XUL.


```js
if (
  element.localName == "browser" &&
  element.namespaceURI ==
    "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
) {
  // c'est un navigateur XUL
}
```

Notes
-----

Ce n'est pas une valeur calculée qui est le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un nœud est fixé au moment de la création du nœud.

Dans Firefox 3.5 et antérieurs, l'URI d'espace de noms pour les éléments HTML dans un document HTML est `null`. Dans les versions postérieures, en conformité avec HTML5, c'est `http://www.w3.org/1999/xhtml` comme dans XHTML.

Vous pouvez créer un élément avec l'`namespaceURI` spécifié en utilisant la méthode DOM niveau 2 document.createElementNS.

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 élément particulier, ne peut pas être modifié.

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-namespaceuri① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Element.localName`
* `Element.prefix`
* `Attr.namespaceURI`
* `Node.namespaceURI`