Podcast
Questions and Answers
Quelle est la fonction principale du Document Object Model (DOM) ?
Quelle est la fonction principale du Document Object Model (DOM) ?
- Fournir une interface pour interagir avec les documents HTML via JavaScript. (correct)
- Gérer les requêtes HTTP entre le navigateur et le serveur.
- Définir le style visuel des documents HTML.
- Compresser les fichiers HTML pour accélérer le chargement des pages.
Quelle est la nature de la représentation du DOM d'une page Web ?
Quelle est la nature de la représentation du DOM d'une page Web ?
- Un ensemble désordonné de nœuds.
- Une liste linéaire d'éléments.
- Une matrice bidimensionnelle représentant la disposition des éléments.
- Un arbre hiérarchique d'éléments. (correct)
Dans le contexte du DOM, comment appelle-t-on un élément HTML contenu directement à l'intérieur d'un autre élément?
Dans le contexte du DOM, comment appelle-t-on un élément HTML contenu directement à l'intérieur d'un autre élément?
- Enfant (correct)
- Frère
- Ancêtre
- Parent
Comment l'objet window est-il généralement utilisé en JavaScript?
Comment l'objet window est-il généralement utilisé en JavaScript?
Quelle est la fonction de document.getElementById() ?
Quelle est la fonction de document.getElementById() ?
Si vous souhaitez récupérer tous les éléments <p> d'une page web, quelle méthode du DOM utiliseriez-vous ?
Si vous souhaitez récupérer tous les éléments <p> d'une page web, quelle méthode du DOM utiliseriez-vous ?
Quelle est la différence principale entre querySelector() et querySelectorAll()?
Quelle est la différence principale entre querySelector() et querySelectorAll()?
Quelle est la fonction de la méthode getAttribute()?
Quelle est la fonction de la méthode getAttribute()?
Quelle est la méthode appropriée pour modifier la valeur de l'attribut src d'une image en utilisant le DOM?
Quelle est la méthode appropriée pour modifier la valeur de l'attribut src d'une image en utilisant le DOM?
Quelle est la différence entre utiliser innerHTML et textContent?
Quelle est la différence entre utiliser innerHTML et textContent?
Si vous voulez obtenir le nœud parent d'un élément, quelle propriété du DOM utiliseriez-vous ?
Si vous voulez obtenir le nœud parent d'un élément, quelle propriété du DOM utiliseriez-vous ?
Que renvoie la propriété nodeType ?
Que renvoie la propriété nodeType ?
Comment accéder au premier enfant d'un nœud en utilisant le DOM?
Comment accéder au premier enfant d'un nœud en utilisant le DOM?
Quelle est la propriété qui permet de récupérer ou de modifier le contenu textuel d'un nœud ?
Quelle est la propriété qui permet de récupérer ou de modifier le contenu textuel d'un nœud ?
Comment créer un nouvel élément HTML avec JavaScript ?
Comment créer un nouvel élément HTML avec JavaScript ?
Quelle méthode est utilisée pour ajouter un nouveau nœud comme enfant à un nœud existant ?
Quelle méthode est utilisée pour ajouter un nouveau nœud comme enfant à un nœud existant ?
Quelle méthode permet de dupliquer un nœud ?
Quelle méthode permet de dupliquer un nœud ?
Comment remplacer un nœud enfant par un nouveau nœud en utilisant le DOM?
Comment remplacer un nœud enfant par un nouveau nœud en utilisant le DOM?
Quelle méthode est utilisée pour supprimer un nœud enfant de son parent?
Quelle méthode est utilisée pour supprimer un nœud enfant de son parent?
Que renvoie la méthode hasChildNodes() ?
Que renvoie la méthode hasChildNodes() ?
Flashcards
DOM (Document Object Model)
DOM (Document Object Model)
Interface de programmation pour les documents HTML, permettant d'accéder et de modifier des éléments HTML via JavaScript.
Structure du DOM
Structure du DOM
Représente la page Web comme une hiérarchie d'éléments, structurée en arbre.
Objet 'window'
Objet 'window'
Objet global représentant la fenêtre du navigateur et à partir duquel le JavaScript est exécuté.
Objet 'document'
Objet 'document'
Signup and view all the flashcards
Méthode 'getElementById()'
Méthode 'getElementById()'
Signup and view all the flashcards
Méthode 'getElementsByTagName()'
Méthode 'getElementsByTagName()'
Signup and view all the flashcards
Méthode 'querySelectorAll()'
Méthode 'querySelectorAll()'
Signup and view all the flashcards
Méthode 'querySelector()'
Méthode 'querySelector()'
Signup and view all the flashcards
Méthode 'getAttribute()'
Méthode 'getAttribute()'
Signup and view all the flashcards
Méthode 'setAttribute()'
Méthode 'setAttribute()'
Signup and view all the flashcards
Propriété 'className'
Propriété 'className'
Signup and view all the flashcards
Propriété 'innerHTML'
Propriété 'innerHTML'
Signup and view all the flashcards
Propriété 'textContent'
Propriété 'textContent'
Signup and view all the flashcards
Propriété 'parentNode'
Propriété 'parentNode'
Signup and view all the flashcards
Propriétés 'nodeType' et 'nodeName'
Propriétés 'nodeType' et 'nodeName'
Signup and view all the flashcards
Méthodes 'firstChild' et 'lastChild'
Méthodes 'firstChild' et 'lastChild'
Signup and view all the flashcards
Propriété 'childNodes'
Propriété 'childNodes'
Signup and view all the flashcards
Propriétés 'nextSibling' et 'previousSibling'
Propriétés 'nextSibling' et 'previousSibling'
Signup and view all the flashcards
Méthode 'createElement()'
Méthode 'createElement()'
Signup and view all the flashcards
Méthode 'appendChild()'
Méthode 'appendChild()'
Signup and view all the flashcards
Study Notes
JavaScript et le DOM
- Ce chapitre traite de la manipulation du code HTML à travers le concept du DOM.
- L'étude porte sur la navigation entre les nœuds HTML, l'édition de contenu par ajout, modification et suppression de nœuds.
Le Document Object Model (DOM) :
- Le DOM est une interface de programmation pour les documents HTML.
- Une API (Application Programming Interface) est un ensemble d'outils permettant la communication entre programmes, y compris différents langages.
- Le DOM permet, via JavaScript, d'accéder et de modifier le code HTML d'une page Web, y compris l'affichage, le masquage, l'ajout, le déplacement et la suppression d'éléments.
La structure DOM :
- Le DOM représente une page Web comme une arborescence d'éléments.
- Exemple de structure :
<html>contient<head>et<body>comme enfants;<head>contient<meta>et<title>;<title>contient#text, un élément contenant du texte. <html>est le parent de<head>et<body>.- Chaque élément est considéré comme un nœud.
L'objet window :
- L'objet
windowreprésente la fenêtre du navigateur et sert de point de départ à l'exécution du JavaScript. - L'objet
windowest considéré comme implicite et n'a généralement pas besoin d'être spécifié. window.alert('Hello world!')ouvre une boîte de dialogue.- L'objet
windowpossède des propriétés et des méthodes, commewindow.historypour manipuler l'historique de session du navigateur.
L'objet document :
- L'objet
documentest un sous-objet dewindowqui représente la page Web, spécifiquement la balise<html>. - Il permet d'accéder et de modifier les éléments HTML.
Accéder aux éléments HTML :
getElementById(): Méthode deDocumentqui renvoie un objetElementcorrespondant à un ID. Les IDs doivent être uniques.- Syntaxe:
var element = document.getElementById(id); getElementsByTagName(): Renvoie une liste d'éléments sous forme de tableau, correspondant au nom de balise spécifié.- Syntaxe:
var elements = document.getElementsByTagName(name); - Un astérisque (*) récupère tous les éléments HTML dans l'élément ciblé.
querySelectorAll(): Méthode deElementqui retourne une liste d'éléments correspondant aux sélecteurs CSS.- Syntaxe :
var elements = document.querySelectorAll(selecteurs); querySelector(): Retourne le premierElementcorrespondant à un sélecteur CSS spécifié ou null si aucune correspondance n'est trouvée.- Syntaxe :
document.querySelector(selectors)
Editer les éléments HTML - Les attributs :
getAttribute(): Renvoie la valeur d'un attribut spécifié. Retourne null ou une chaîne vide si l'attribut n'existe pas.- Syntaxe:
attribut = element.getAttribute(nom_attribut) setAttribute(): Ajoute ou modifie la valeur d'un attribut.- Syntaxe:
Element.setAttribute(name, value) - Accéder aux attributs via une propriété est possible pour la plupart des éléments courants.
- Syntaxe :
elementHTML.nomAttribut
Editer les éléments HTML - Le contenu :
innerHTML: Récupère ou définit la syntaxe HTML décrivant les descendants d'un élément.- Syntaxe:
var x = element.innerHTML;ouelement.innerHTML = htmlString; textContent: Représente le contenu textuel d'un nœud et de ses descendants.- Syntaxe:
var texte = element.textContent;ouelement.textContent = "ceci est un simple exemple de texte";
Naviguer entre les nœuds :
parentNode: Renvoie le nœud parent d'un nœud spécifié.- Syntaxe:
var x = node.parentNode nodeType et nodeName: Permettent de vérifier le type et le nom d'un nœud.- Syntaxe :
var typeN = element.nodeType;etvar nomN = element.nodeName; - 1: Nœud élément
- 2: Nœud attribut
- 3: Nœud texte
- 8: Nœud pour commentaire
Parcourir les nœuds :
firstChild et lastChild: Accèdent respectivement au premier et au dernier enfant d'un nœud.- Syntaxe :
var x = node.firstChild;etvar y = node.lastChild; nodeValue: Renvoie null pour le nœud lui-même, le contenu du nœud pour les nœuds texte, et la valeur de l'attribut pour les nœuds d'attributs.- Syntaxe:
valeur = node.nodeValue; childNodes: Renvoie une liste de nœuds enfants d'un élément. Le premier nœud enfant est affecté à l'index 0.- Syntaxe :
var enfants = element.childNodes; nextSibling et previousSibling: Renvoient respectivement le nœud suivant et précédent immédiatement dans la liste des enfants du nœud parent.- Syntaxe :
nextNode = node.nextSiblingetpreviousNode = node.previousSibling;
Changer la structure DOM :
createElement(): Crée un élément HTML du type spécifié.- Syntaxe:
var element = document.createElement(tagName); appendChild(): Ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié.- Syntaxe:
var elementAjoute = element.appendChild(enfant); createTextNode(): Crée un nouveau nœud de texte.- Syntaxe:
var text = document.createTextNode(données); cloneNode(): Renvoie une copie du nœud.- Syntaxe:
var dupNode = node.cloneNode([deep]); - L'argument optionnel
deep(vrai/faux) spécifie si les enfants du nœud doivent aussi être clonés replaceChild(): Remplace un nœud enfant par un autre.- Syntaxe:
replacedNode = parentNode.replaceChild(newChild, oldChild); removeChild(): Retire un nœud enfant de l'arbre DOM et le retourne.- Syntaxe:
var oldChild = node.removeChild(child); hasChildNodes(): Renvoie une valeur booléenne indiquant si le nœud possède des nœuds enfants.- Syntaxe :
resultat = element.hasChildNodes(); insertBefore(): Insère un nœud juste avant le nœud de référence en tant qu'enfant du nœud parent spécifié.- Syntaxe :
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
