Récupérer le nom de l'élément et le nom de la classe

Version imprimable

bonjour,

Voici une page web lue par Chrome:
https://www.youtube.com/watch?v=0JNabWkrmvc

dans laquelle je clique sur le carré blanc creux pour mettre en plein écran.
Dans l'inspecteur,l'élément cliqué correspondant est représenté par cet extrait de code:
Code:

1 2 3 4 5 6 <button class="ytp-size-button ytp-button" aria-keyshortcuts="t" data-title-no-tooltip="Mode cinéma" aria-label="Mode cinéma Raccourci clavier t" title="Mode cinéma (t)"> <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"> <use class="ytp-svg-shadow" xlink:href="#ytp-id-22"></use> <path d="m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z" fill="#fff" fill-rule="evenodd" id="ytp-id-22"></path> </svg> </button>
Dans cet extrait de code,qu'est exactement:
a)le nom de classe ?
b)le nom de l'élément ?

merci de votre aide

27/04/2023, 17h18
NoSmoking
Bonjour,
j'ai du mal à comprendre la motivation de la demande :calim2:

<button class="ytp-size-button ytp-button">
avec :
- le nom des classes
- le nom de l'élément

Quand j'affiche le coide source de cette page web,je ne trouve pas cet extrait de code:

Code:

1
2
3
4
5
6
<button class="ytp-size-button ytp-button" aria-keyshortcuts="t" data-title-no-tooltip="Mode cinéma" aria-label="Mode cinéma Raccourci clavier t" title="Mode cinéma (t)">
  <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
    <use class="ytp-svg-shadow" xlink:href="#ytp-id-22"></use>
    <path d="m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z" fill="#fff" fill-rule="evenodd" id="ytp-id-22"></path>
  </svg>
</button>

Je suppose qu'il doit se trouver quelque part dans les ressources de cette page mais laquelle ressource?
cf inspecteur->Sources

27/04/2023, 22h17
zeltron54
Bonsoir,

Même réponse que dans ton autre demande: https://www.developpez.net/forums/d2...video-youtube/
pour le mode plein écran envoi de la touche "F" key code 2 avec shift
Pour le mode cinéma envoi la touche "T" key code 17 avec la touche shift
soit:
Code:

1 2 3 4 5 tell application "System Events" tell application process "Google chrome" key code 17 using {shift down} end tell end tell
28/04/2023, 00h06
tabkelm

ce n'est pas une bonne réponse !
J'ai demandé où se trouve cet extrait de code?
28/04/2023, 12h19
Pytet

Pas sûr d'avoir bien compris la demande.

Si tu inclus la vidéo Youtube dans une balise iframe de ta page web :
- En consultant le code source de ta page web dans le navigateur (Ctrl + U) : tu peux voir uniquement la balise iframe dans le code html, ce qui est normal.
- En consultant le code source avec l'inspecteur dans le navigateur : tu peux voir le code html qui est chargé par youtube dans la balise iframe. Néanmoins, tu ne peux que consulter et pas modifier ce code car il est défini par le site youtube.
28/04/2023, 13h42
tabkelm

navigateur utilisé Chrome

effectivement,j'ai enfin trouvé dans :
inpecteur->Eléments
cet extrait de code
mais pas dans le code source de la page web

a)Laquelle sélection à recopier dans un fichier texte vide auquel on modifie l'extension en html reproduit cette même page web?:
-si je sélectionne tout le code source de la page web
-si je sélectionnais tout le contenu de inpecteur->Eléments

b)Je cherche un petit tuto expliquant mieux la différence entre le code source de la page web et le contenu de inpecteur->Eléments

c)ainsi qu'un petit tuto expliquant la différence entre le contenu de inpecteur->Eléments et le contenu de inpecteur->Sources
28/04/2023, 16h48
Doksuri

les elements generes en javascript n'apparaitron pas dans le code source de la page.

le code source de la page est tout le HTML + CSS + JS que le serveur a envoye au client (navigateur)
l'inspecteur d'element affiche "l'arbre" "live" de la page (apres interpretation du JS & CSS)

le code source est "statique"
l'inspecteur est "dynamique"
28/04/2023, 18h33
tabkelm

...et l'inspecteur sources?
pardon ! j'ai trouvé ceci sur internet:

Citation:

"La principale différence est que "Afficher la source" affiche le code HTML qui a été transmis du serveur Web à votre navigateur. Inspecter les éléments est un outil de développement permettant d'examiner l'état de l'arborescence DOM après que le navigateur a appliqué sa correction d'erreur et après que Javascript ait manipulé le DOM"