%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}




%Kopfzeile
\ihead{Webentwicklung}
\chead{}
\ohead{http://kohnlehome.de/html/dom.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
DOM: Document Object Model
\end{center}


\section*{HTML}
\begin{verbatim}
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hallo Welt</title>
  </head>
  <body>
    <p>Grüß Gott, <em>schöne</em> Welt!</p>
  </body>
</html>
\end{verbatim}

\section*{Baumstruktur, Elementknoten, Textknoten und Attribute}
\begin{verbatim}
html (Elementknoten)
  |-- head (Elementknoten)
  |     |-- meta (Elementknoten mit Attribut)
  |     |-- title (Elementknoten)
  |           |-- "Hallo Welt" (Textknoten)
  |
  |-- body (Elementknoten)
        |-- p (Elementknoten)
            |-- "Grüß Gott, "
            |-- em  (Elementknoten)
            |    |-- "schöne" (Textknoten)
            |-- " Welt!" (Textknoten)
\end{verbatim}

\section*{Browserobjekte}
\subsection*{window (Browserfenster)}
\begin{itemize}
\item \texttt{alert("...")}: Popupfenster 
\item \texttt{setInterval(function, delay)}: Timer starten
\item \texttt{clearInterval(id)}: Timer stoppen
\end{itemize}

\subsection*{window.console (z.B. Firefox-Web-Konsole)}
\begin{itemize}
\item \texttt{log("...")}: Textausgabe
\end{itemize}

\subsection*{window.document (HTML-Dokument)}
\subsubsection*{Knoten auswählen}
\begin{itemize}
\item \texttt{getElementById("...")}: Element per HTML-id auswählen
\item \texttt{getElementsByTagName("...")}: Elemente per HTML-Tag auswählen
\item \texttt{getElementsByClassName("...")}: Element per HTML-class auswählen
\end{itemize}

\subsubsection*{Knoten erzeugen}
\begin{itemize}
\item \texttt{createElement(tagName)}: Element erzeugen (nicht im DOM-Baum eingehängt)
\item \texttt{createTextNode("...")}: Textknoten erzeugen (nicht im DOM-Baum eingehängt)
\end{itemize}

\section*{Eigenschaften und Methoden von DOM-Elementen}
\subsection*{DOM-Hierarchie}
\begin{itemize}
\item \texttt{parentNode}: Verweis auf übergeordnetes Objekt 
\item \texttt{childNodes}: Array mit Kindknoten
\item \texttt{firstChild}: erstes Kind
\item \texttt{lastChild}: letztes Kind
\item \texttt{nextSibling}: folgendes Geschwister
\item \texttt{previousSibling}: vorheriges Geschwister
\end{itemize}

\subsection*{Knoteneigenschaften}
\begin{itemize}
\item \texttt{nodeName}: Name von Elementknoten (z.B. H1, immer in Großbuchstaben)
\item \texttt{nodeValue}: Inhalt von Textknoten (z.B. "Hallo Welt")
\item \texttt{innerHTML}: HTML-Teilbaum innerhalb eines Elementknotens
\end{itemize}

\subsection*{Knoten einhängen / entfernen}
\begin{itemize}
\item \texttt{appendChild(element)}: Element in DOM-Baum einhängen
\item \texttt{removeChild(element)}: Element vom DOM-Baum entfernen
\end{itemize}

\subsection*{Attribute}
\begin{itemize}
\item \texttt{getAttribute(name)}: Wert eines Attributes lesen
\item \texttt{setAttribute(name, value)}: Wert eines Attributes ändern
\item \texttt{removeAttribute(name)}: Attribut löschen
\end{itemize}





\end{document}
