# Aide-mémoire : manipuler le DOM en Javascript

Philippe Gambette

## ► To cite this version:

Philippe Gambette. Aide-mémoire : manipuler le DOM en Javascript. Master. Développement web en Javascript (master Cultures et métiers du web), Université Gustave Eiffel, Champs-sur-Marne, France. 2025. hal-05468730

HAL Id: hal-05468730

https://hal.science/hal-05468730v1

Submitted on 21 Jan 2026

HAL is a multi-disciplinary open access
archive for the deposit and dissemination of sci-
entific research documents, whether they are pub-
lished or not. The documents may come from
teaching and research institutions in France or
abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est
destinée au dépôt et à la diffusion de documents
scientifiques de niveau recherche, publiés ou non,
émanant des établissements d'enseignement et de
recherche français ou étrangers, des laboratoires
publics ou privés.

<figure><img src="image_1.png" /></figure>
# Aide-mémoire : manipuler le DOM en Javascript

```javascript
document.addEventListener("DOMContentLoaded", function() {
  // instructions Javascript exécutées après chargement du DOM
});
```

## sélection

document

.querySelector('[ sélecteur CSS ]')

.querySelectorAll('[ sélecteur CSS ]')

.forEach(function element{
  element
})

## raffinement de la sélection

### arbre du DOM

.children[0]

.childNodes[0]

.firstElementChild

.firstChild

.lastElementChild

.lastChild

.nextElementSibling

.nextSibling

.parentElement

.parentNode

### Fenêtre

window

.scrollX

récup.

.scrollY

d'infos

.getCompuedStyle(...)

.scrollTo(..., ...) modif.

## récupération d'informations

.innerHTML

.outerHTML

.innerText

.attributes()

.getAttribute('...')

.stylefontSize

.classListeqs('...')

.checked

.disabled

.value

.clientHeight

.offsetLeft

.offsetTop

.getBoundingClientRect().top

## modification

### contenu des balises

### style

.innerHTML='...'

.style.color='red'

.classList.remove('...')

.outerHTML='...'

.style.cssText='top:1px:left:2px'

.classList.add('...')

### attributs des balises

.attribute('...','...')

### animation

.animate([{"width":"200px"}],

{"duration":1000, "iterations":2, "delay":500}

## événements

.addEventListener('[ type ]', function(event){...})

.removeEventListener('[ type ]', function(event){...})

## types d'événements

click, mousup, mous, mousmove, dblclick, mousout, mousover, mouseenter, mouseleave, contextmenu, wheel, keydown, keyup, focus, blur, focusin, focusout, load, abort, error, select, beforeinput, input, change drag, dragstart, dragenter, dragover, dragleave, dragend

## propriétés d'événements génériques, de la souris, du clavier

target, timestamp, pageX, pageY, offsetX, offsetY, clientX, clientY, altKey (souris, clavier), ctrlKey (souris, clavier), key