Selection.selectAllChildren() — Methode · JavaScript-Referenz

Signatur

Selection.prototype.selectAllChildren(parentNode)

Beschreibung

selectAllChildren() hebt die bisherige Auswahl auf und wählt den gesamten Inhalt eines Knotens aus, also alle seine Kindknoten. Der Knoten selbst gehört nicht zur Auswahl. Der neue Bereich beginnt bei (parentNode, 0) und endet bei (parentNode, parentNode.childNodes.length).

Die Methode eignet sich gut für „Alles markieren“-Funktionen in einzelnen Bereichen, etwa für Codeblöcke, Gutscheincodes, Tabellenzellen oder Editoren mit contenteditable. Hier nimmt sie dem Nutzer das Markieren von Hand ab, bevor er kopiert.

Nach dem Aufruf hat die Auswahl genau einen Range. anchorNode und focusNode zeigen dann beide auf parentNode. Wenn der Knoten keine Kinder hat, ist die Auswahl eingeklappt (isCollapsed === true).

Parameter

Name	Typ	Default	Beschreibung
$parentNode Pflicht	Node		Knoten, dessen Kindknoten alle ausgewählt werden sollen. Der Knoten selbst wird nicht ausgewählt. Ist er ein `DocumentType`-Knoten, wird eine `InvalidNodeTypeError`-`DOMException` ausgelöst.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Codeblock per Klick komplett markieren

const codeBlock = document.querySelector('pre code');

codeBlock.addEventListener('click', () => {
  const selection = window.getSelection();
  selection.selectAllChildren(codeBlock);
  console.log(selection.toString().length > 0);
});

true

Gutscheincode markieren und kopieren

const copyCode = async (elementId) => {
  const el = document.getElementById(elementId);
  const selection = document.getSelection();
  selection.selectAllChildren(el);

  const text = selection.toString();
  await navigator.clipboard.writeText(text);
  console.log(`Kopiert: ${text}`);
};

// <span id="voucher">SOMMER-2024</span>
document.querySelector('#copy-btn')
  .addEventListener('click', () => copyCode('voucher'));

Kopiert: SOMMER-2024

Auswahl untersuchen: Container und Offsets

// <p id="absatz">Hallo <b>Welt</b>!</p>
const p = document.getElementById('absatz');
const sel = window.getSelection();
sel.selectAllChildren(p);

console.log(sel.anchorNode === p, sel.anchorOffset);
console.log(sel.focusNode === p, sel.focusOffset);
console.log(sel.rangeCount, JSON.stringify(sel.toString()));

true 0 true 3 1 "Hallo Welt!"

// Wichtig · Fallstricke

Vorhandene Auswahl geht verloren: Alle bisherigen Bereiche werden entfernt, auch in Firefox, das mehrere Ranges erlaubt. Wenn Sie etwas zur Auswahl hinzufügen wollen, nutzen Sie addRange().
Nur der Inhalt, nicht das Element: Das Element selbst wird nicht ausgewählt. Brauchen Sie auch das Element, verwenden Sie Range.selectNode() zusammen mit addRange().
Formularfelder: Bei <input> und <textarea> wirkt die Methode nicht auf den eingegebenen Text. Nehmen Sie dafür element.select() oder setSelectionRange().
Fokus: Mit contenteditable sollte das Element zuerst per focus() fokussiert werden, damit die Auswahl sichtbar ist und Tastatureingaben dort ankommen.
user-select: none: Die Auswahl wird zwar programmatisch gesetzt, kann aber je nach Browser unsichtbar bleiben oder beim Kopieren leer sein.
Die Methode wird in allen modernen Browsern unterstützt. Ältere Versionen von Safari und Chrome haben bei Knoten ohne Kinder teilweise abweichende Offsets geliefert.

Siehe auch

Window.getSelection() Selection.addRange() Selection.removeAllRanges() Selection.setBaseAndExtent() Range.selectNodeContents() Selection Sanitizer.replaceElementWithChildren()