APIs HTML5 - noelno/dovelei GitHub Wiki
Manipulation DOM
Objet Document représente la page HTML sous forme d'arbre de nœuds.
document.getElementById()
document.getElementByClassName() / document.getElementByTagName() (element)
document.querySelector( selecteurCSS ) // le premier. Fonctionne avec tous les sélécteurs CSS
document.querySelectorAll( selecteurCSS ) // tous, dans un tableau
Note : il est aussi possible de ne rechercher que dans un élément en particulier : element.querySelector() et element.querySelectorAll()
document.body
Note 2 : il est possible de cumuler les sélécteurs dans document.querySelectorAll( selecteurCSS ). Par exemple document.querySelectorAll('h1,h2') sélectionne tous les éléments h1 et h2
element.className : toutes les classes de l'élément séléctionné dans un seul champ
element.classList : toutes les classes de l'élément séléctionné dans un tableau DOMtoken // contains(), add(), remove(), toggle()
element.style
element.style.fontSize = "20px"
element.innerHTML = "Salut"; // modifie le contenu de l'élément
element.innerText ou .textContent = "Salut"; // modifie le contenu texte de l'élément
Tester if (element.innerText)... else ... pour vérifier quelle version est prise en charge
element.children //elements enfants
element.childNodes //nodes enfants
element.childElementCount //compte le nombre d'éléments renvoyés par .children
element.firstChild //premier noeud
element.firstElementChild //premier élément
element.lastChild //dernier noeud
element.lastElementChild //dernier élément
element.previousSibling //noeud frère précédent
element.previousElementSibling //élément frère précédent
element.nextSibling //noeud frère suivant
element.nextElementSibling //élément frère suivant
Cumulables : element.nextElementSibling.nextElementSibling //séléctionne l'élément frère n-2
element.parentElement
element.parentNode
Exemple : pour récupérer tous les éléments à un même niveau element.parentElement.children
element.parentElement.removeChild(element) //supprimer un élément
elementB.appendChild(elementA) //retire l'élément B de son emplacement actuel et le place à la fin de l'élément A
Pour copier un élément pour le placer ailleurs, on doit le cloner (var copieElement = element.cloneNode(intProfondeur) ) et l'injecter ailleurs (element.appendChild)
document.createElement('li') //crée un nouvel élément
element.replaceChild(elementA, elementB) // remplace l'élément enfant B par l'élément A
element.insertBefore(elementA, elementB) // insère l'élément enfant B juste avant l'élément A
element.nextSibling.insertBefore(elementA, elementB) // insère l'élément enfant B juste après l'élément A / insertAfter n'existe pas
API Microformats
Formulaires
‘change’ // écoute les modifications dans le champ quand le champ n’est pas focusé
‘keyup’ et ‘keydown’ // touche relâchée et touche appuyée. Crée un KeyboardEvent. keyup n’est pas annulable par preventDefault
KeyboardEvent.keycode // valeur de la touche frappée, à convertir avec var lettre = String.fromCharCode(e.keycode)
Element.value //récupère le contenu du champ
Soumission d’un formulaire : créer un eventListener ‘submit’ sur l’élément form plutôt qu’un ‘click’ sur le bouton de soumission
Element.checked // vaut true ou false si l’élément est coché ou non - pour les éléments checkboxes
Pour les éléments select
Element.options //retourne dans un tableau les éléments option
Element.selectedIndex //retourne la valeur de l’option sélectionnée - ne fonctionne pas en cas de séléction multiple.
Element.selectedOptions //retourne dans un tableau les éléments option sélectionnés - intéressant si select a l’attribut multiple.
Element.value permet aussi de récupérer la valeur d’un élément option sous forme de string. Exemple : var select = document.querySelector(‘#select’).options[0].value ;
element.focus() // fait un focus sur l’élément, par exemple le champ
element.blur() // retire le focus.
Ces actions se déclenchent automatiquement quand l’utilisateur clique dans un élément interactif ou navigue dessus grâce à tab
document.addEventListener(‘DOMContentLoaded’, function(){ // }) // se déclenche quand la page a terminé de charger
element.getAttribute( nomAttribut ) // récupère la valeur de l'attribut de l'élément
Note : lorsque plusieurs instructions qui modifient le DOM se suivent, le navigateur les exécute en même temps plutôt que séquentiellement. Pour contourner ce comportement, il est possible de le forcer à prendre en compte les modifications, par exemple en lui demandant la taille d'un élément (element.offsetWidth).