Was ist DOM? Selenium WebDriver: Struktur, vollständige Form

By: Krishna Runta Krishna Runta
Hours Aktualisiert

Was ist DOM? Selenium WebDriver?

DOM in Selenium WebDriver ist eine wesentliche Komponente der Webentwicklung mit HTML5 und JavaSkript. Die vollständige Form von DOM ist Document Object Model. DOM ist kein Informatikkonzept. Es handelt sich um einen einfachen Satz von Schnittstellen, die unter Webentwicklern standardisiert sind, um auf Dokumente in HTML oder XML zuzugreifen und diese zu bearbeiten, indem JavaSkript.

Diese Standards helfen Entwicklern, eine Webseite zu erstellen, ohne sich um Implementierungsdetails kümmern zu müssen. Einige der Organisationen, die an der Standardisierung dieser Schnittstellen beteiligt sind, sind beispielsweise Mozilla, Apple, Microsoft, Google, Adobe usw. Es ist jedoch das W3C, das einen Standard formalisiert und veröffentlicht – siehe hier (https://dom.spec.whatwg.org/).

Dieses Tutorial behandelt die grundlegenden Konzepte der HTML-Dokumentstruktur und deren Manipulation mit JavaSkript. In diesem Tutorial werden wir die folgenden Themen behandeln:

Die DOM-Struktur verstehen

Sie müssen die DOM-Struktur verstehen, wenn Sie eine Website erstellen, die Skripting verwendet JavaSkript. Das Verständnis von DOM ist noch wichtiger, wenn Sie eine oder alle der folgenden komplizierten Aufgaben auf Ihrer Website ausführen –

  1. Entwickeln Sie Inhalte, die sich kontinuierlich aktualisieren, ohne die gesamte Seite zu aktualisieren – wie zum Beispiel den aktuellen Preis aller Aktien im Portfolio Ihres Benutzers
  2. Entwicklung erweiterter Benutzerinteraktionen wie das dynamische Hinzufügen oder Ändern von Inhalten – beispielsweise die Möglichkeit, Ihrem Portfolio weitere Aktien hinzuzufügen
  3. Entwicklung von Inhalten, die vom Benutzer angepasst werden können – beispielsweise die Möglichkeit, das Layout so zu ändern, dass das Portfolio von Investmentfonds vor dem Aktienportfolio angezeigt wird
  4. Entwickeln Sie responsive Inhalte auf Ihrer Website, sodass sich Ihre Website automatisch an verschiedene Medienbildschirme anpasst, z. B. iPhone, Desktop, Tablet usw.

Eine einfache HTML-Seite

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

Wie sieht es für den DOM-PARSER eines Browsers aus?

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

Wie greifen Sie auf das Körperelement zu?

<script>
    var body = window.document.body;
</script>

Wie sagt man „Hallo Welt“?

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

Schließlich sieht die gesamte HTML-Datei so aus

Öffne Windows Notepad und fügen Sie den folgenden Inhalt ein. Speichern Sie die Datei dann als „MyFileNewFile.html“ (stellen Sie sicher, dass Ihr Dateiname mit .html endet).

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

Zum Schluss öffnen Sie die Datei einfach mit einem Ihrer bevorzugten Browser und Sie sehen „Hello World!“

Komponenten von DOM in Selenium

Nachfolgend sind die Hauptkomponenten von DOM aufgeführt Selenium WebDriver:

  • Window
  • Dokument
  • Element

Window

Window ist das Objekt, das das Dokumentobjekt in einem DOM enthält. Es liegt über allem.

Um von einem bestimmten Dokument aus zu einem Fensterobjekt zu gelangen

<script>
      var window = document.defaultView;
</script>

In einer Umgebung mit Registerkarten verfügt jede Registerkarte über ein eigenes Fensterobjekt. Wenn man jedoch Ereignisse wie window.resizeTo und window.resizeBy abfangen und implementieren möchte, gelten diese für das gesamte Fenster und nicht nur für die Registerkarte.

Eigenschaften des Fensterobjekts im DOM

window.localStorage – gewährt Zugriff auf den lokalen Speicher des Browsers. Der lokale Speicher kann zum Speichern und Abrufen von Daten aus einer Sitzung verwendet werden.

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

Fensteröffner - Ruft den Verweis auf das Fensterobjekt ab, das dieses Fenster geöffnet hat (entweder durch Klicken auf einen Link oder mithilfe der Methode window.open).

Nützliche Methoden des Fensterobjekts

window.alert() – Zeigt einen Warndialog mit einer Meldung an.

<script>
		window.alert('say hello');
</script>

Es gibt viele nützliche Ereignisse, die das Fensterobjekt offenlegt. Wir werden sie im Abschnitt „Veranstaltungen“ unter „Vorabthemen“ besprechen

Dokument

Das Dokument markiert den Anfang eines DOM-Baums. Dokument ist der erste Knoten in einem DOM. Es verfügt über mehrere Methoden und Eigenschaften, deren Geltungsbereich für das gesamte Dokument gilt, wie URL, getElementById, querySelector usw.

Eigenschaften des Dokumentobjekts im DOM

Document.documentURI und Dokument.URL – Beide geben den aktuellen Speicherort des Dokuments zurück. Wenn das Dokument jedoch nicht vom Typ HTML ist, funktioniert Document.URL nicht.

Document.activeElement – Diese Methode gibt das Element im DOM zurück, das im Fokus ist. Das bedeutet, wenn ein Benutzer etwas in ein Textfeld eintippt, gibt Document.activeElement einen Verweis auf dieses Textfeld zurück.

Dokumenttitel – Dies wird verwendet, um einen Titel eines bestimmten Dokuments zu lesen oder festzulegen.

Nützliche Methoden des Dokumentobjekts

Document.getElementById(String-ID) – dies ist bei weitem die relevanteste und nützlichste Methode bei der DOM-Manipulation. Sie wird verwendet, um ein Element im DOM-Baum anhand seiner eindeutigen Kennung zu suchen. Die Suche ist groß- und kleinschreibungsabhängig, d. h. im folgenden Beispiel wird „ “-Element kann nicht mit Wörtern wie IntroDiv oder introdiv oder iNtrodiv usw. nachgeschlagen werden.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll(String-Selektor) – Dies ist eine weitere weit verbreitete Methode, um ein weiteres Element basierend auf den Regeln des CSS-Selektors auszuwählen (wenn Sie mit der $-Notation von jQuery vertraut sind, wird diese Methode selbst verwendet). Wir werden uns nicht viel mit CSS-Selektoren befassen. Der CSS-Selektor ist eine Reihe von Regeln, mit denen Sie eine Liste ähnlicher Elemente erhalten können (basierend auf der Selektorregel). Wir haben diese Methode bereits im Abschnitt „Hallo Welt“ verwendet.

Element

Elementobjekt im DOM

Elementobjekt im DOM

Ein Element ist ein beliebiges Objekt, das durch einen Knoten in einem DOM-Baum eines Dokuments dargestellt wird. Wie immer ist das Elementobjekt selbst nur ein Vertrag von Eigenschaften, Methoden und Ereignissen zwischen einem Browser und einem HTML-Dokument. Es gibt spezielle Arten von Elementen wie HTMLElement, SVGElement, XULElement usw. Wir werden uns in diesem Tutorial nur auf HTMLElement konzentrieren.

Eigenschaften des Elementobjekts im DOM

Element.id – Mit dieser Eigenschaft kann „ID“ (ein eindeutiger Bezeichner) für ein HTML-Element gesetzt oder gelesen werden. Die ID muss unter den Elementen in einem DOM-Baum eindeutig sein. Wie bereits erwähnt, wird die ID auch von der Methode Document.getElementById verwendet, um ein bestimmtes Elementobjekt innerhalb eines DOM-Baums auszuwählen.

HTMLElement.contentEditable – Die contentEditable-Eigenschaft eines Elements bestimmt, ob der Inhalt dieses Elements editierbar/veränderbar ist. Diese Eigenschaft kann wie im folgenden Skript gezeigt festgelegt werden. Diese Eigenschaft kann auch verwendet werden, um zu bestimmen, ob ein bestimmtes Element editierbar ist oder nicht. Probieren Sie das folgende Skript in einem beliebigen HTML-Textkörper aus und Sie werden feststellen, dass Sie jeden Inhalt des Textkörpers bearbeiten können.

<script>
		document.body.contentEditable = true;
</script>

Element.innerHTML – innerHTML ist eine weitere wichtige Eigenschaft, die wir verwenden, um auf HTML-Inhalte innerhalb eines Elements zuzugreifen. Sie wird auch verwendet, um neue HTML-Inhalte des Elements festzulegen. Sie wird häufig verwendet, um den Inhalt von Datenfeldern festzulegen/zu ändern. Angenommen, Sie möchten beispielsweise, dass Ihre Webseite die Temperatur von Mumbai stündlich aktualisiert, können Sie das Skript im folgenden Beispiel stündlich ausführen.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

Nützliche Methoden des Elementobjekts

HTMLElement.blur() & HTMLElement.focus() – Unschärfe- und Fokusmethoden werden verwendet, um den Fokus von einem HTML-Element zu entfernen bzw. ihm den Fokus zu geben. Diese Methoden werden am häufigsten verwendet, um den Fokus eines Cursors zwischen Textfeldern auf einer Dateneingabe-Webseite zu verschieben.

Element.querySelectorAll – Diese Methode ähnelt der bereits besprochenen querySelector-Methode für das Dokumentobjekt. Diese Methode beschränkt jedoch die Suche auf die Nachkommen des Elements selbst.

Debuggen im DOM

Entwicklertools von Google ChromeMozilla Firefox, Internet Explorer (10 oder höher) oder Safari ermöglichen ein einfaches Debuggen direkt im Browser. Manchmal interpretieren verschiedene Browser dasselbe HTML-Markup unterschiedlich. Dann hilft Ihnen das Debuggen dabei, das DOM so zu überprüfen, wie es von der DOM-Engine dieses bestimmten Browsers interpretiert wurde.

Nehmen wir nun an, Sie möchten den Temperaturwert von 26 ändernoC bis 32oC in Ihrem letzten Beispiel. Dazu werden wir einige einfache Schritte unternehmen. Die hier gezeigten Screenshots stammen von Mozilla Firefox– Die Schritte sind jedoch in allen anderen Browsern gleich.

  1. Öffnen Sie MyFileNewFile.html (oder den Namen, den Sie Ihrer HTML-Datei in den obigen Tutorials gegeben haben) mit Ihrem Browser
  2. Klicken Sie mit der Maus mit der rechten Maustaste auf den Temperaturwert 26oC und klicken Sie auf „Element prüfen“

    Debuggen im DOM

  3. Beachten Sie, dass das Element, bei dem Sie „Element prüfen“ ausgewählt haben, in Ihrem Browser hervorgehoben angezeigt wird (das Debugger-Fenster erscheint normalerweise am unteren Bildschirmrand).

    Debuggen in der DOM Engine

  4. Öffnen Sie das Element, indem Sie auf das geneigte Dreieck daneben klicken

    Debugging-Prozess im DOM

  5. Wählen Sie aus, was Sie bearbeiten möchten, und doppelklicken Sie darauf. Sie erhalten die Option, den Text zu ändern. Gehen Sie wie im animierten Bild unten beschrieben vor.

    Debuggen im DOM

  6. Beachten Sie die inhaltliche Änderung Ihrer HTML-Seite. Sie können das Debugging-Fenster jetzt schließen.

    Beachten Sie, dass Ihre Änderungen nur für diese Sitzung gespeichert werden. Sobald Sie die Seite neu laden oder aktualisieren (F5 drücken), werden die Änderungen rückgängig gemacht. Dies weist darauf hin, dass Sie nicht die eigentliche HTML-Quelle, sondern nur die lokale Interpretation Ihres Browsers geändert haben.

    Versuchen Sie als unterhaltsame Übung Folgendes. Öffnen www.facebook.com in Ihrem Browser und verwenden Sie das Debugger-Tool, um das folgende Ergebnis zu erhalten – beachten Sie die Meldung „Ich habe Facebook gehackt“.

Debugging-Prozess im DOM

DOM-Ereignisse

Was sind Ereignisse in DOM?

Ereignisse sind ein Programmiermodell, bei dem vom Benutzer (oder vom Lebenszyklus der Browserseite ausgelöste) Vorfälle als Nachrichten gesendet werden. Wenn beispielsweise eine Seite vollständig geladen ist, löst sie das window.load-Ereignis aus, und ebenso, wenn der Benutzer auf eine entsprechende Schaltfläche klickt Das Klickereignis des Elements wird ausgelöst.

Diese Nachrichten können von jedem abgefangen werden JavaSkript Code und dann kann eine vom Entwickler definierte Aktion ausgeführt werden. Nehmen wir zum Beispiel an, Sie möchten, dass die Zahlen auf Ihrer Webseite nur aktualisiert werden, wenn der Benutzer auf eine Schaltfläche klickt. Sie können dies mit einer der folgenden Methoden erreichen:

  1. Weisen Sie dem onclick-Ereignis des HTML-Elements eine Aktion zu
  2. Weisen Sie dem Klickereignis mithilfe der Methode addEventListener eine Aktion zu

Methode 1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

Methode 2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

Fehlerbehebung im DOM

F. Woher weiß ich, ob ein Element existiert oder nicht?

A. Versuchen Sie, das Element mit einem der Selektoren nachzuschlagen und prüfen Sie, ob das zurückgegebene Element eine Null ist. Siehe Beispiel unten –

ÄHNLICHE ARTIKEL

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

F. Ich erhalte TypeError: document.getElementByID ist keine Funktion ...

A. Stellen Sie sicher, dass der Methodenname genau mit der API-Methode übereinstimmt. Wie in der Frage oben – es ist getElementById und nicht getElementByID.

F. Was ist der Unterschied zwischen Children und ChildNodes?

A. Die Methode children liefert uns die Sammlung aller Elemente innerhalb des aufrufenden Elements. Die zurückgegebene Sammlung ist vom Typ HTMLCollection. Die Methode childNodes liefert uns jedoch die Sammlung aller Knoten innerhalb des aufrufenden Elements. Fügen Sie unserem Beispiel die folgenden Skripts hinzu und sehen Sie den Unterschied –

Die Methode childNodes gibt 14 Elemente zurück

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

Während die Methode „Children“ nur 7 Elemente zurückgibt

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

F. Ich erhalte die Meldung Uncaught TypeError: Cannot read property 'innerHTML' of undefined…

A. Stellen Sie sicher, dass die Instanz von HTMLElement, für die Sie die Eigenschaft innerHTML aufrufen, nach der ersten Deklaration festgelegt wurde. Dieser Fehler tritt im Allgemeinen in folgendem Szenario auf. Sehen Sie im nächsten Codeblock, wie der Fehler vermieden werden kann …

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

Zusammenfassung

  • In diesem Tutorial haben wir gelernt, was ein DOM ist und wie wichtig es ist, dieses Konzept zu verstehen, um dynamische Webseiten zu erstellen.
  • Wir haben auch Arten von DOM-Elementen wie Fenster, Dokument und Element angesprochen.
  • Wir haben einige nützliche DOM-Methoden und Eigenschaften kennengelernt, die in jeder Art verfügbar sind.
  • Wir haben gesehen, dass die meisten Browser Entwicklertools zum Spielen mit jeder im Internet verfügbaren Webseite anbieten – und so lernen, wie man Probleme mit unserer eigenen Website debuggt und löst.
  • Wir haben auch kurz die DOM-Ereignismechanismen angesprochen.
  • Abschließend haben wir einige Punkte zur Fehlerbehebung in DOM behandelt.
  • Das Internet ist voller Ressourcen zu DOM. Eines der besten und aktuellsten Referenzmaterialien ist im Entwicklernetzwerk von Mozilla verfügbar. Sehen - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model