Beispiele für Web- und XML-Entwicklung mithilfe des DOM

Dieses Kapitel bietet einige längere Beispiele für die Web- und XML-Entwicklung mithilfe des DOM. Wo immer möglich, verwenden die Beispiele gängige APIs, Tricks und Muster in JavaScript zur Manipulation des Dokumentobjekts.

Beispiel 1: Höhe und Breite

Das folgende Beispiel zeigt die Verwendung der Eigenschaften height und width zusammen mit Bildern unterschiedlicher Dimensionen:

html

  Image 1: no height, width, or style
  





  Image 2: height="50", width="500", but no style
  





  Image 3: no height, width, but style="height: 50px; width: 500px;"
js
const arrImages = [
  document.getElementById("image1"),
  document.getElementById("image2"),
  document.getElementById("image3"),
];

const objOutput = document.getElementById("output");
let strHtml = "
    ";

for (const img of arrImages) {
  strHtml += `
  • image${i + 1}: height=${img.height}, width=${img.width}, style.height=${img.style.height}, style.width=${img.style.width}
    • `;
}

strHtml += "
";

objOutput.innerHTML = strHtml;

Beispiel 2: Bildattribute

html

  border test
css
#img1 {
  border: 5px solid green;
}
js
function setBorderWidth(width) {
  document.getElementById("img1").style.borderWidth = `${width}px`;
}

document.getElementById("btn1").addEventListener("click", () => {
  setBorderWidth(20);
});
document.getElementById("btn2").addEventListener("click", () => {
  setBorderWidth(5);
});

Beispiel 3: Manipulieren von Stilen

In diesem einfachen Beispiel werden einige grundlegende Stil-Eigenschaften eines HTML-Absatz-Elements über das style-Objekt auf dem Element und dessen CSS-Stileigenschaften abgerufen, die über das DOM abgerufen und gesetzt werden können. In diesem Fall manipulieren Sie die individuellen Stile direkt. Im nächsten Beispiel (siehe Beispiel 4) können Sie Stylesheets und deren Regeln verwenden, um Stile für ganze Dokumente zu ändern.

html
Some text
js
function changeText() {
  const p = document.getElementById("pid");

  p.style.color = "blue";
  p.style.fontSize = "18pt";
}

document.querySelector("button").addEventListener("click", () => {
  changeText();
});

Beispiel 4: Verwendung von Stylesheets

Die styleSheets-Eigenschaft auf dem document-Objekt gibt eine Liste der Stylesheets zurück, die auf diesem Dokument geladen wurden. Sie können auf diese Stylesheets und deren Regeln einzeln über die Objekte stylesheet, style und CSSRule zugreifen, wie in diesem Beispiel gezeigt, das alle Stilregel-Selektoren in die Konsole ausgibt.

js
for (const styleSheet of document.styleSheets) {
  for (const rule of styleSheet.cssRules) {
    console.log(`${rule.selectorText}\n`);
  }
}

Für ein Dokument mit einem einzigen Stylesheet, in dem die folgenden drei Regeln definiert sind:

css
body {
  background-color: darkblue;
}
p {
  font-family: Arial;
  font-size: 10pt;
  margin-left: 0.125in;
}
#lumpy {
  display: none;
}

Dieses Skript gibt Folgendes aus:

BODY
P
#LUMPY

Beispiel 5: Ereignisweiterleitung

Dieses Beispiel zeigt, wie Ereignisse in sehr einfacher Weise im DOM ausgelöst und behandelt werden. Wenn der BODY dieses HTML-Dokuments geladen wird, wird ein Ereignislistener mit der obersten Zeile der TABELLE registriert. Der Ereignislistener verarbeitet das Ereignis, indem er die Funktion stopEvent ausführt, die den Wert in der unteren Zelle der Tabelle ändert.

stopEvent ruft jedoch auch eine Methode des Ereignisobjekts, event.stopPropagation, auf, die verhindert, dass das Ereignis weiter im DOM nach oben propagiert wird. Beachten Sie, dass die Tabelle selbst einen onclick-Ereignishandler hat, der eine Nachricht anzeigen sollte, wenn die Tabelle angeklickt wird. Doch die Methode stopEvent hat die Weiterleitung gestoppt, und so endet die Ereignisphase effektiv, nachdem die Daten in der Tabelle aktualisiert wurden, und ein Alarmfeld wird angezeigt, um dies zu bestätigen.

html

  

    one
  

  

    two
css
#t-daddy {
  border: 1px solid red;
}

#c1 {
  background-color: pink;
}
js
function stopEvent(event) {
  const c2 = document.getElementById("c2");
  c2.textContent = "hello";

  // this ought to keep t-daddy from getting the click.
  event.stopPropagation();
  console.log("event propagation halted.");
}

const elem = document.getElementById("tbl1");
elem.addEventListener("click", stopEvent, false);

document.getElementById("t-daddy").addEventListener("click", () => {
  console.log("t-daddy clicked");
});

Beispiel 6: getComputedStyle

Dieses Beispiel zeigt, wie die Methode window.getComputedStyle verwendet werden kann, um die Stile eines Elements abzurufen, die nicht über das style-Attribut oder mit JavaScript gesetzt werden (z.B. elt.style.backgroundColor="rgb(173 216 230)"). Letztere Arten von Stilen können mit der direkteren elt.style-Eigenschaft abgerufen werden, deren Eigenschaften in der DOM CSS Properties List aufgeführt sind.

getComputedStyle() gibt ein CSSStyleDeclaration-Objekt zurück, dessen individuelle Stileigenschaften mit der getPropertyValue()-Methode dieses Objekts referenziert werden können, wie das folgende Beispieldokument zeigt.

html
 




  

    
    height max-width
    bg-color
css
#d1 {
  margin-left: 10px;
  background-color: rgb(173, 216, 230);
  height: 20px;
  max-width: 20px;
}
js
function cStyles() {
  const refDiv = document.getElementById("d1");
  const txtHeight = document.getElementById("t1");
  const hStyle = document.defaultView
    .getComputedStyle(refDiv, null)
    .getPropertyValue("height");

  txtHeight.value = hStyle;

  const txtWidth = document.getElementById("t2");
  const wStyle = document.defaultView
    .getComputedStyle(refDiv, null)
    .getPropertyValue("width");

  txtWidth.value = wStyle;

  const txtBackgroundColor = document.getElementById("t3");
  const bStyle = document.defaultView
    .getComputedStyle(refDiv, null)
    .getPropertyValue("background-color");

  txtBackgroundColor.value = bStyle;
}

document.querySelector("button").addEventListener("click", cStyles);

Beispiel 7: Anzeigen von Ereignisobjekteigenschaften

Dieses Beispiel verwendet DOM-Methoden, um alle Eigenschaften des onload-event-Objekts und ihre Werte in einer Tabelle anzuzeigen. Es zeigt auch eine nützliche Technik, eine for...in-Schleife zu verwenden, um über die Eigenschaften eines Objekts zu iterieren, um deren Werte abzurufen.

Die Eigenschaften von Ereignisobjekten unterscheiden sich stark zwischen Browsern, der WHATWG DOM Standard listet die Standard-Eigenschaften auf, jedoch haben viele Browser diese erheblich erweitert.

Geben Sie den folgenden Code in eine leere Textdatei ein und laden Sie ihn in eine Vielzahl von Browsern, Sie werden erstaunt sein über die unterschiedlichen Anzahl und Namen der Eigenschaften. Sie können auch einige Elemente auf der Seite hinzufügen und diese Funktion von verschiedenen Ereignishandlern aufrufen.

html
Properties of the DOM  Event Object
css
table {
  border-collapse: collapse;
}
thead {
  font-weight: bold;
}
td {
  padding: 2px 10px 2px 10px;
}

.odd {
  background-color: #efdfef;
}
.even {
  background-color: #ffffff;
}
js
function showEventProperties(e) {
  function addCell(row, text) {
    const cell = row.insertCell(-1);
    cell.appendChild(document.createTextNode(text));
  }

  const event = e || window.event;
  document.getElementById("eventType").textContent = event.type;

  const table = document.createElement("table");
  const thead = table.createTHead();
  let row = thead.insertRow(-1);
  const labelList = ["#", "Property", "Value"];
  const len = labelList.length;

  for (let i = 0; i < len; i++) {
    addCell(row, labelList[i]);
  }

  const tbody = document.createElement("tbody");
  table.appendChild(tbody);

  for (const p in event) {
    row = tbody.insertRow(-1);
    row.className = row.rowIndex % 2 ? "odd" : "even";
    addCell(row, row.rowIndex);
    addCell(row, p);
    addCell(row, event[p]);
  }

  document.body.appendChild(table);
}

window.onload = (event) => {
  showEventProperties(event);
};

Beispiel 8: Verwendung des DOM-Tabellen-Interfaces

Das DOM-Interface HTMLTableElement bietet einige praktische Methoden zum Erstellen und Manipulieren von Tabellen. Zwei häufig verwendete Methoden sind HTMLTableElement.insertRow und HTMLTableRowElement.insertCell.

Um eine Zeile und einige Zellen zu einer vorhandenen Tabelle hinzuzufügen:

html

  

    Row 0 Cell 0
    Row 0 Cell 1
js
const table = document.getElementById("table0");
const row = table.insertRow(-1);
let cell;
let text;

for (let i = 0; i < 2; i++) {
  cell = row.insertCell(-1);
  text = `Row ${row.rowIndex} Cell ${i}`;
  cell.appendChild(document.createTextNode(text));
}

Anmerkungen