\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}
