[{"data":1,"prerenderedAt":1144},["ShallowReactive",2],{"page-\u002Fjs\u002Fdom-et-evenements":3,"pieces-js":1101,"autour-\u002Fjs\u002Fdom-et-evenements":1126,"prerequis-\u002Fjs\u002Fdom-et-evenements":1131,"plan-js":1133},{"id":4,"title":5,"body":6,"description":1074,"extension":1075,"ligne":215,"meta":1076,"motsCles":1077,"navigation":289,"niveau":1079,"path":1080,"prerequis":1081,"ressources":1083,"seo":1095,"sources":1096,"stem":1099,"__hash__":1100},"docs\u002Fjs\u002F05.dom-et-evenements.md","Le DOM et les événements",{"type":7,"value":8,"toc":1062},"minimark",[9,14,27,31,45,53,192,196,210,312,326,330,337,352,365,369,372,422,432,476,480,483,530,539,543,554,648,651,711,715,722,765,775,779,786,865,986,996,1011,1015,1058],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24],"ul",{},[18,19,20],"li",{},"Sélectionner un élément de la page et modifier son contenu et ses classes.",[18,22,23],{},"Créer et ajouter de nouveaux éléments.",[18,25,26],{},"Réagir à un clic ou à l'envoi d'un formulaire.",[10,28,30],{"id":29},"le-dom","Le DOM",[32,33,34,35,39,40,44],"p",{},"Quand le navigateur lit ton HTML, il construit un arbre d'objets : le ",[36,37,38],"strong",{},"DOM"," (",[41,42,43],"em",{},"Document Object Model","). Chaque balise devient un objet que JavaScript peut lire et modifier.",[32,46,47,48,52],{},"Le point d'entrée est l'objet ",[49,50,51],"code",{},"document",". Prenons cette page :",[54,55,61],"pre",{"className":56,"code":57,"filename":58,"language":59,"meta":60,"style":60},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Ch1 id=\"titre\">Mes recettes\u003C\u002Fh1>\n\u003Cul id=\"liste\">\n  \u003Cli class=\"recette\">Crêpes\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cbutton id=\"ajouter\">Ajouter\u003C\u002Fbutton>\n\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>\n","index.html","html","",[49,62,63,95,111,134,144,166],{"__ignoreMap":60},[64,65,68,72,76,80,83,87,90,92],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"scfrF","\u003C",[64,73,75],{"class":74},"s5JFL","h1",[64,77,79],{"class":78},"s5iOY"," id",[64,81,82],{"class":70},"=",[64,84,86],{"class":85},"shWOn","\"titre\"",[64,88,89],{"class":70},">Mes recettes\u003C\u002F",[64,91,75],{"class":74},[64,93,94],{"class":70},">\n",[64,96,98,100,102,104,106,109],{"class":66,"line":97},2,[64,99,71],{"class":70},[64,101,15],{"class":74},[64,103,79],{"class":78},[64,105,82],{"class":70},[64,107,108],{"class":85},"\"liste\"",[64,110,94],{"class":70},[64,112,114,117,119,122,124,127,130,132],{"class":66,"line":113},3,[64,115,116],{"class":70},"  \u003C",[64,118,18],{"class":74},[64,120,121],{"class":78}," class",[64,123,82],{"class":70},[64,125,126],{"class":85},"\"recette\"",[64,128,129],{"class":70},">Crêpes\u003C\u002F",[64,131,18],{"class":74},[64,133,94],{"class":70},[64,135,137,140,142],{"class":66,"line":136},4,[64,138,139],{"class":70},"\u003C\u002F",[64,141,15],{"class":74},[64,143,94],{"class":70},[64,145,147,149,152,154,156,159,162,164],{"class":66,"line":146},5,[64,148,71],{"class":70},[64,150,151],{"class":74},"button",[64,153,79],{"class":78},[64,155,82],{"class":70},[64,157,158],{"class":85},"\"ajouter\"",[64,160,161],{"class":70},">Ajouter\u003C\u002F",[64,163,151],{"class":74},[64,165,94],{"class":70},[64,167,169,171,174,177,179,182,185,188,190],{"class":66,"line":168},6,[64,170,71],{"class":70},[64,172,173],{"class":74},"script",[64,175,176],{"class":78}," src",[64,178,82],{"class":70},[64,180,181],{"class":85},"\"script.js\"",[64,183,184],{"class":78}," defer",[64,186,187],{"class":70},">\u003C\u002F",[64,189,173],{"class":74},[64,191,94],{"class":70},[10,193,195],{"id":194},"sélectionner-des-éléments","Sélectionner des éléments",[32,197,198,201,202,205,206,209],{},[49,199,200],{},"querySelector"," prend un sélecteur CSS et renvoie le premier élément correspondant, ou ",[49,203,204],{},"null",". ",[49,207,208],{},"querySelectorAll"," renvoie tous les éléments.",[54,211,216],{"className":212,"code":213,"filename":214,"language":215,"meta":60,"style":60},"language-js shiki shiki-themes github-light-default github-dark-default github-dark-default","const titre = document.querySelector('#titre')\nconst liste = document.querySelector('#liste')\nconst recettes = document.querySelectorAll('.recette')\n\nconsole.log(recettes.length)  \u002F\u002F 1\n","script.js","js",[49,217,218,245,265,285,291],{"__ignoreMap":60},[64,219,220,224,227,230,233,236,239,242],{"class":66,"line":67},[64,221,223],{"class":222},"sOnC1","const",[64,225,226],{"class":78}," titre",[64,228,229],{"class":222}," =",[64,231,232],{"class":70}," document.",[64,234,200],{"class":235},"syCW7",[64,237,238],{"class":70},"(",[64,240,241],{"class":85},"'#titre'",[64,243,244],{"class":70},")\n",[64,246,247,249,252,254,256,258,260,263],{"class":66,"line":97},[64,248,223],{"class":222},[64,250,251],{"class":78}," liste",[64,253,229],{"class":222},[64,255,232],{"class":70},[64,257,200],{"class":235},[64,259,238],{"class":70},[64,261,262],{"class":85},"'#liste'",[64,264,244],{"class":70},[64,266,267,269,272,274,276,278,280,283],{"class":66,"line":113},[64,268,223],{"class":222},[64,270,271],{"class":78}," recettes",[64,273,229],{"class":222},[64,275,232],{"class":70},[64,277,208],{"class":235},[64,279,238],{"class":70},[64,281,282],{"class":85},"'.recette'",[64,284,244],{"class":70},[64,286,287],{"class":66,"line":136},[64,288,290],{"emptyLinePlaceholder":289},true,"\n",[64,292,293,296,299,302,305,308],{"class":66,"line":146},[64,294,295],{"class":70},"console.",[64,297,298],{"class":235},"log",[64,300,301],{"class":70},"(recettes.",[64,303,304],{"class":78},"length",[64,306,307],{"class":70},")  ",[64,309,311],{"class":310},"sd6ml","\u002F\u002F 1\n",[32,313,314,315,318,319,318,322,325],{},"Les sélecteurs sont ceux du CSS : ",[49,316,317],{},"#id",", ",[49,320,321],{},".classe",[49,323,324],{},"balise",".",[10,327,329],{"id":328},"modifier-le-contenu","Modifier le contenu",[32,331,332,333,336],{},"La propriété ",[49,334,335],{},"textContent"," lit ou remplace le texte d'un élément.",[54,338,340],{"className":212,"code":339,"language":215,"meta":60,"style":60},"titre.textContent = 'Mes recettes préférées'\n",[49,341,342],{"__ignoreMap":60},[64,343,344,347,349],{"class":66,"line":67},[64,345,346],{"class":70},"titre.textContent ",[64,348,82],{"class":222},[64,350,351],{"class":85}," 'Mes recettes préférées'\n",[353,354,355],"warning",{},[32,356,357,358,361,362,364],{},"N'insère jamais du texte venant d'un utilisateur avec ",[49,359,360],{},"innerHTML"," : un visiteur pourrait y glisser du code qui s'exécute dans ta page. Utilise ",[49,363,335],{},", qui traite tout comme du texte.",[10,366,368],{"id":367},"modifier-lapparence-et-les-attributs","Modifier l'apparence et les attributs",[32,370,371],{},"Pour changer le style, ajoute ou retire une classe CSS plutôt que d'écrire du style en JavaScript.",[54,373,375],{"className":212,"code":374,"language":215,"meta":60,"style":60},"titre.classList.add('important')\ntitre.classList.remove('important')\ntitre.classList.toggle('important')   \u002F\u002F ajoute si absente, retire sinon\n",[49,376,377,392,405],{"__ignoreMap":60},[64,378,379,382,385,387,390],{"class":66,"line":67},[64,380,381],{"class":70},"titre.classList.",[64,383,384],{"class":235},"add",[64,386,238],{"class":70},[64,388,389],{"class":85},"'important'",[64,391,244],{"class":70},[64,393,394,396,399,401,403],{"class":66,"line":97},[64,395,381],{"class":70},[64,397,398],{"class":235},"remove",[64,400,238],{"class":70},[64,402,389],{"class":85},[64,404,244],{"class":70},[64,406,407,409,412,414,416,419],{"class":66,"line":113},[64,408,381],{"class":70},[64,410,411],{"class":235},"toggle",[64,413,238],{"class":70},[64,415,389],{"class":85},[64,417,418],{"class":70},")   ",[64,420,421],{"class":310},"\u002F\u002F ajoute si absente, retire sinon\n",[32,423,424,425,428,429,325],{},"Les attributs se manipulent avec ",[49,426,427],{},"setAttribute"," et ",[49,430,431],{},"getAttribute",[54,433,435],{"className":212,"code":434,"language":215,"meta":60,"style":60},"const lien = document.querySelector('a')\nlien.setAttribute('href', '\u002Frecettes')\n",[49,436,437,457],{"__ignoreMap":60},[64,438,439,441,444,446,448,450,452,455],{"class":66,"line":67},[64,440,223],{"class":222},[64,442,443],{"class":78}," lien",[64,445,229],{"class":222},[64,447,232],{"class":70},[64,449,200],{"class":235},[64,451,238],{"class":70},[64,453,454],{"class":85},"'a'",[64,456,244],{"class":70},[64,458,459,462,464,466,469,471,474],{"class":66,"line":97},[64,460,461],{"class":70},"lien.",[64,463,427],{"class":235},[64,465,238],{"class":70},[64,467,468],{"class":85},"'href'",[64,470,318],{"class":70},[64,472,473],{"class":85},"'\u002Frecettes'",[64,475,244],{"class":70},[10,477,479],{"id":478},"créer-des-éléments","Créer des éléments",[32,481,482],{},"Trois étapes : créer, remplir, ajouter.",[54,484,486],{"className":212,"code":485,"language":215,"meta":60,"style":60},"const li = document.createElement('li')\nli.textContent = 'Ratatouille'\nliste.append(li)\n",[49,487,488,509,519],{"__ignoreMap":60},[64,489,490,492,495,497,499,502,504,507],{"class":66,"line":67},[64,491,223],{"class":222},[64,493,494],{"class":78}," li",[64,496,229],{"class":222},[64,498,232],{"class":70},[64,500,501],{"class":235},"createElement",[64,503,238],{"class":70},[64,505,506],{"class":85},"'li'",[64,508,244],{"class":70},[64,510,511,514,516],{"class":66,"line":97},[64,512,513],{"class":70},"li.textContent ",[64,515,82],{"class":222},[64,517,518],{"class":85}," 'Ratatouille'\n",[64,520,521,524,527],{"class":66,"line":113},[64,522,523],{"class":70},"liste.",[64,525,526],{"class":235},"append",[64,528,529],{"class":70},"(li)\n",[32,531,532,533,535,536,325],{},"L'élément n'apparaît qu'une fois ajouté à la page avec ",[49,534,526],{},". Pour retirer un élément : ",[49,537,538],{},"li.remove()",[10,540,542],{"id":541},"réagir-à-un-événement","Réagir à un événement",[32,544,545,546,549,550,553],{},"Un ",[36,547,548],{},"événement"," est un signal envoyé par le navigateur : un clic, une touche, l'envoi d'un formulaire. Tu l'écoutes avec ",[49,551,552],{},"addEventListener",", qui prend le nom de l'événement et une fonction à exécuter.",[54,555,557],{"className":212,"code":556,"language":215,"meta":60,"style":60},"const bouton = document.querySelector('#ajouter')\n\nbouton.addEventListener('click', () => {\n  const li = document.createElement('li')\n  li.textContent = 'Nouvelle recette'\n  liste.append(li)\n})\n",[49,558,559,579,583,604,623,633,642],{"__ignoreMap":60},[64,560,561,563,566,568,570,572,574,577],{"class":66,"line":67},[64,562,223],{"class":222},[64,564,565],{"class":78}," bouton",[64,567,229],{"class":222},[64,569,232],{"class":70},[64,571,200],{"class":235},[64,573,238],{"class":70},[64,575,576],{"class":85},"'#ajouter'",[64,578,244],{"class":70},[64,580,581],{"class":66,"line":97},[64,582,290],{"emptyLinePlaceholder":289},[64,584,585,588,590,592,595,598,601],{"class":66,"line":113},[64,586,587],{"class":70},"bouton.",[64,589,552],{"class":235},[64,591,238],{"class":70},[64,593,594],{"class":85},"'click'",[64,596,597],{"class":70},", () ",[64,599,600],{"class":222},"=>",[64,602,603],{"class":70}," {\n",[64,605,606,609,611,613,615,617,619,621],{"class":66,"line":136},[64,607,608],{"class":222},"  const",[64,610,494],{"class":78},[64,612,229],{"class":222},[64,614,232],{"class":70},[64,616,501],{"class":235},[64,618,238],{"class":70},[64,620,506],{"class":85},[64,622,244],{"class":70},[64,624,625,628,630],{"class":66,"line":146},[64,626,627],{"class":70},"  li.textContent ",[64,629,82],{"class":222},[64,631,632],{"class":85}," 'Nouvelle recette'\n",[64,634,635,638,640],{"class":66,"line":168},[64,636,637],{"class":70},"  liste.",[64,639,526],{"class":235},[64,641,529],{"class":70},[64,643,645],{"class":66,"line":644},7,[64,646,647],{"class":70},"})\n",[32,649,650],{},"Chaque clic sur le bouton ajoute une ligne à la liste.",[652,653,654,667],"table",{},[655,656,657],"thead",{},[658,659,660,664],"tr",{},[661,662,663],"th",{},"Événement",[661,665,666],{},"Quand il se produit",[668,669,670,681,691,701],"tbody",{},[658,671,672,678],{},[673,674,675],"td",{},[49,676,677],{},"click",[673,679,680],{},"Clic sur l'élément.",[658,682,683,688],{},[673,684,685],{},[49,686,687],{},"input",[673,689,690],{},"La valeur d'un champ change pendant la saisie.",[658,692,693,698],{},[673,694,695],{},[49,696,697],{},"submit",[673,699,700],{},"Envoi d'un formulaire.",[658,702,703,708],{},[673,704,705],{},[49,706,707],{},"keydown",[673,709,710],{},"Une touche est enfoncée.",[10,712,714],{"id":713},"lobjet-événement","L'objet événement",[32,716,717,718,721],{},"La fonction reçoit en paramètre un objet qui décrit l'événement. ",[49,719,720],{},"event.target"," est l'élément touché.",[54,723,725],{"className":212,"code":724,"language":215,"meta":60,"style":60},"liste.addEventListener('click', (event) => {\n  console.log(event.target.textContent)\n})\n",[49,726,727,751,761],{"__ignoreMap":60},[64,728,729,731,733,735,737,740,744,747,749],{"class":66,"line":67},[64,730,523],{"class":70},[64,732,552],{"class":235},[64,734,238],{"class":70},[64,736,594],{"class":85},[64,738,739],{"class":70},", (",[64,741,743],{"class":742},"sIXEE","event",[64,745,746],{"class":70},") ",[64,748,600],{"class":222},[64,750,603],{"class":70},[64,752,753,756,758],{"class":66,"line":97},[64,754,755],{"class":70},"  console.",[64,757,298],{"class":235},[64,759,760],{"class":70},"(event.target.textContent)\n",[64,762,763],{"class":66,"line":113},[64,764,647],{"class":70},[32,766,767,768,771,772,325],{},"Ici, un seul écouteur sur la liste réagit au clic sur n'importe quel ",[49,769,770],{},"\u003Cli>",", même ajouté plus tard. On appelle ça la ",[36,773,774],{},"délégation d'événements",[10,776,778],{"id":777},"les-formulaires","Les formulaires",[32,780,781,782,785],{},"Par défaut, un formulaire envoyé recharge la page. ",[49,783,784],{},"event.preventDefault()"," annule ce comportement pour que tu traites les données toi-même.",[54,787,789],{"className":56,"code":788,"filename":58,"language":59,"meta":60,"style":60},"\u003Cform id=\"formulaire\">\n  \u003Cinput id=\"nom\" type=\"text\" placeholder=\"Nom de la recette\">\n  \u003Cbutton type=\"submit\">Ajouter\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[49,790,791,807,838,857],{"__ignoreMap":60},[64,792,793,795,798,800,802,805],{"class":66,"line":67},[64,794,71],{"class":70},[64,796,797],{"class":74},"form",[64,799,79],{"class":78},[64,801,82],{"class":70},[64,803,804],{"class":85},"\"formulaire\"",[64,806,94],{"class":70},[64,808,809,811,813,815,817,820,823,825,828,831,833,836],{"class":66,"line":97},[64,810,116],{"class":70},[64,812,687],{"class":74},[64,814,79],{"class":78},[64,816,82],{"class":70},[64,818,819],{"class":85},"\"nom\"",[64,821,822],{"class":78}," type",[64,824,82],{"class":70},[64,826,827],{"class":85},"\"text\"",[64,829,830],{"class":78}," placeholder",[64,832,82],{"class":70},[64,834,835],{"class":85},"\"Nom de la recette\"",[64,837,94],{"class":70},[64,839,840,842,844,846,848,851,853,855],{"class":66,"line":113},[64,841,116],{"class":70},[64,843,151],{"class":74},[64,845,822],{"class":78},[64,847,82],{"class":70},[64,849,850],{"class":85},"\"submit\"",[64,852,161],{"class":70},[64,854,151],{"class":74},[64,856,94],{"class":70},[64,858,859,861,863],{"class":66,"line":136},[64,860,139],{"class":70},[64,862,797],{"class":74},[64,864,94],{"class":70},[54,866,868],{"className":212,"code":867,"filename":214,"language":215,"meta":60,"style":60},"const formulaire = document.querySelector('#formulaire')\n\nformulaire.addEventListener('submit', (event) => {\n  event.preventDefault()\n  const nom = document.querySelector('#nom').value.trim()\n  if (nom === '') return\n  console.log(nom)\n})\n",[49,869,870,890,894,916,927,953,972,981],{"__ignoreMap":60},[64,871,872,874,877,879,881,883,885,888],{"class":66,"line":67},[64,873,223],{"class":222},[64,875,876],{"class":78}," formulaire",[64,878,229],{"class":222},[64,880,232],{"class":70},[64,882,200],{"class":235},[64,884,238],{"class":70},[64,886,887],{"class":85},"'#formulaire'",[64,889,244],{"class":70},[64,891,892],{"class":66,"line":97},[64,893,290],{"emptyLinePlaceholder":289},[64,895,896,899,901,903,906,908,910,912,914],{"class":66,"line":113},[64,897,898],{"class":70},"formulaire.",[64,900,552],{"class":235},[64,902,238],{"class":70},[64,904,905],{"class":85},"'submit'",[64,907,739],{"class":70},[64,909,743],{"class":742},[64,911,746],{"class":70},[64,913,600],{"class":222},[64,915,603],{"class":70},[64,917,918,921,924],{"class":66,"line":136},[64,919,920],{"class":70},"  event.",[64,922,923],{"class":235},"preventDefault",[64,925,926],{"class":70},"()\n",[64,928,929,931,934,936,938,940,942,945,948,951],{"class":66,"line":146},[64,930,608],{"class":222},[64,932,933],{"class":78}," nom",[64,935,229],{"class":222},[64,937,232],{"class":70},[64,939,200],{"class":235},[64,941,238],{"class":70},[64,943,944],{"class":85},"'#nom'",[64,946,947],{"class":70},").value.",[64,949,950],{"class":235},"trim",[64,952,926],{"class":70},[64,954,955,958,961,964,967,969],{"class":66,"line":168},[64,956,957],{"class":222},"  if",[64,959,960],{"class":70}," (nom ",[64,962,963],{"class":222},"===",[64,965,966],{"class":85}," ''",[64,968,746],{"class":70},[64,970,971],{"class":222},"return\n",[64,973,974,976,978],{"class":66,"line":644},[64,975,755],{"class":70},[64,977,298],{"class":235},[64,979,980],{"class":70},"(nom)\n",[64,982,984],{"class":66,"line":983},8,[64,985,647],{"class":70},[32,987,988,991,992,995],{},[49,989,990],{},"value"," donne le texte saisi et ",[49,993,994],{},"trim()"," retire les espaces autour.",[997,998,999],"tip",{},[32,1000,1001,1002,1004,1005,1007,1008,325],{},"Si ",[49,1003,200],{}," renvoie ",[49,1006,204],{},", ton code plante à la première utilisation. Vérifie l'orthographe du sélecteur, et que ton script a bien l'attribut ",[49,1009,1010],{},"defer",[10,1012,1014],{"id":1013},"à-retenir","À retenir",[15,1016,1017,1020,1027,1041,1047,1053],{},[18,1018,1019],{},"Le DOM est l'arbre d'objets que le navigateur construit à partir du HTML.",[18,1021,1022,428,1024,1026],{},[49,1023,200],{},[49,1025,208],{}," sélectionnent avec un sélecteur CSS.",[18,1028,1029,1031,1032,1035,1036,428,1038,1040],{},[49,1030,335],{}," modifie le texte, ",[49,1033,1034],{},"classList"," gère les classes, ",[49,1037,501],{},[49,1039,526],{}," ajoutent des éléments.",[18,1042,1043,1044,1046],{},"N'utilise pas ",[49,1045,360],{}," avec du texte venant d'un utilisateur.",[18,1048,1049,1052],{},[49,1050,1051],{},"addEventListener('click', fonction)"," réagit à un événement.",[18,1054,1055,1057],{},[49,1056,784],{}," empêche l'envoi par défaut d'un formulaire.",[1059,1060,1061],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}",{"title":60,"searchDepth":97,"depth":113,"links":1063},[1064,1065,1066,1067,1068,1069,1070,1071,1072,1073],{"id":12,"depth":97,"text":13},{"id":29,"depth":97,"text":30},{"id":194,"depth":97,"text":195},{"id":328,"depth":97,"text":329},{"id":367,"depth":97,"text":368},{"id":478,"depth":97,"text":479},{"id":541,"depth":97,"text":542},{"id":713,"depth":97,"text":714},{"id":777,"depth":97,"text":778},{"id":1013,"depth":97,"text":1014},"Sélectionner et modifier les éléments d'une page avec le DOM, puis réagir aux clics et aux formulaires avec addEventListener.","md",{},[38,200,335,1034,501,552,548,923,1078],"délégation","intermediaire","\u002Fjs\u002Fdom-et-evenements",[1082],"\u002Fjs\u002Ftableaux-et-objets",[1084,1088,1091],{"nom":1085,"url":1086,"type":1087},"MDN, Manipuler des documents","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FScripting\u002FDOM_scripting","cours",{"nom":1089,"url":1090,"type":1087},"MDN, Introduction aux événements","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FScripting\u002FEvents",{"nom":1092,"url":1093,"type":1094},"MDN, Document Object Model","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FAPI\u002FDocument_Object_Model","doc",{"title":5,"description":1074},[1097,1098],{"nom":1085,"url":1086},{"nom":1089,"url":1090},"js\u002F05.dom-et-evenements","PXIVp4SXIb9xQC9D7VPHlGhjRLWSwO3KcpUzVCFoyWk",[1102,1106,1110,1114,1117,1118,1122],{"path":1103,"title":1104,"stem":1105},"\u002Fjs\u002Fpremiers-pas","Premiers pas en JavaScript","js\u002F01.premiers-pas",{"path":1107,"title":1108,"stem":1109},"\u002Fjs\u002Fconditions-et-boucles","Conditions et boucles","js\u002F02.conditions-et-boucles",{"path":1111,"title":1112,"stem":1113},"\u002Fjs\u002Ffonctions","Les fonctions","js\u002F03.fonctions",{"path":1082,"title":1115,"stem":1116},"Tableaux et objets","js\u002F04.tableaux-et-objets",{"path":1080,"title":5,"stem":1099},{"path":1119,"title":1120,"stem":1121},"\u002Fjs\u002Fasynchrone-et-modules","Asynchrone et modules","js\u002F06.asynchrone-et-modules",{"path":1123,"title":1124,"stem":1125},"\u002Fjs","JavaScript","js\u002Findex",[1127,1129],{"title":1115,"path":1082,"stem":1116,"description":1128,"children":-1},"Regrouper des données dans des tableaux et des objets, les transformer avec map, filter et find, puis les manipuler avec la déstructuration et le spread.",{"title":1120,"path":1119,"stem":1121,"description":1130,"children":-1},"Gérer ce qui prend du temps avec les promesses, async et await, charger des données avec fetch, puis découper son code avec import et export.",[1132],{"path":1082,"title":1115,"ligne":215},[1134,1136,1137,1138,1139,1140,1142],{"path":1103,"title":1104,"niveau":1135,"stem":1105},"debutant",{"path":1107,"title":1108,"niveau":1135,"stem":1109},{"path":1111,"title":1112,"niveau":1135,"stem":1113},{"path":1082,"title":1115,"niveau":1079,"stem":1116},{"path":1080,"title":5,"niveau":1079,"stem":1099},{"path":1119,"title":1120,"niveau":1141,"stem":1121},"avance",{"path":1123,"title":1124,"niveau":1143,"stem":1125},"memo",1794583437151]