%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}
Grüß Gott, schöne Welt!
\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}