79 lines
2.0 KiB
TeX
79 lines
2.0 KiB
TeX
|
\documentclass[a4paper,10pt]{article}
|
||
|
|
\usepackage{myXsim}
|
||
|
|
\usepackage{minted}
|
||
|
|
|
||
|
|
\author{Benjamin Bertrand}
|
||
|
|
\title{Interaction Homme machine sur le WEB- Cours}
|
||
|
|
\date{Mars 2023}
|
||
|
|
|
||
|
|
\pagestyle{empty}
|
||
|
|
|
||
|
|
\begin{document}
|
||
|
|
|
||
|
|
\maketitle
|
||
|
|
|
||
|
|
\setcounter{section}{1}
|
||
|
|
\section{Le DOM}
|
||
|
|
|
||
|
|
\begin{definition}[Le DOM]
|
||
|
|
Le DOM (Document Objet Model) est une façon de représenter et d'interagir avec des documents HTML.
|
||
|
|
|
||
|
|
Le DOM est une représentation du document sous forme d'arbre où chaque nœud représente un partie du document.
|
||
|
|
|
||
|
|
Le navigateur télécharge la page HTML, le transforme en DOM, complète l'arbre avec les valeurs CSS. Puis le javascript manipule l'arbre pour faire les transformations.
|
||
|
|
|
||
|
|
\end{definition}
|
||
|
|
|
||
|
|
\paragraph{Exemple} ~
|
||
|
|
|
||
|
|
\begin{minipage}{0.4\linewidth}
|
||
|
|
\begin{minted}[bgcolor=base3]{html}
|
||
|
|
<html>
|
||
|
|
<body>
|
||
|
|
<h1> Titre </h1>
|
||
|
|
<p> Coucou </p>
|
||
|
|
<ul>
|
||
|
|
<li id="premier">un élément</li>
|
||
|
|
<li>un autre</li>
|
||
|
|
<li id="prefere">encore</li>
|
||
|
|
</ul>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
\end{minted}
|
||
|
|
\end{minipage}
|
||
|
|
|
||
|
|
\afaire{transformer ce document html en DOM}
|
||
|
|
|
||
|
|
\begin{propriete}[Javascript et manipulation du DOM]
|
||
|
|
Quelques commandes javascript pour manipuler et interagir avec le DOM.
|
||
|
|
|
||
|
|
Le mot \mintinline{js}{element} correspond dans la suite à un noeud du DOM.
|
||
|
|
|
||
|
|
\begin{itemize}
|
||
|
|
\item \mintinline{js}{document.getElementById(id)}: \dotfill
|
||
|
|
\item \mintinline{js}{document.createElement(type)}: \dotfill
|
||
|
|
\item \mintinline{js}{element.style}: \dotfill
|
||
|
|
\item \mintinline{js}{element.innerHTML}: \dotfill
|
||
|
|
\item \mintinline{js}{element.children}: \dotfill
|
||
|
|
\item \mintinline{js}{element.appendChild(...)}: \dotfill
|
||
|
|
\end{itemize}
|
||
|
|
\end{propriete}
|
||
|
|
|
||
|
|
\paragraph{Exemple}
|
||
|
|
\begin{itemize}
|
||
|
|
\item Récupérer le contenu de la balise avec l'id "premier"
|
||
|
|
\vspace{1cm}
|
||
|
|
|
||
|
|
\item Changer la couleur du titre
|
||
|
|
|
||
|
|
\vspace{1cm}
|
||
|
|
|
||
|
|
\item Avoir la liste des balises li
|
||
|
|
|
||
|
|
\vspace{1cm}
|
||
|
|
\item Ajouter un élément dans ul
|
||
|
|
\vspace{1cm}
|
||
|
|
\end{itemize}
|
||
|
|
|
||
|
|
\end{document}
|