Chyba NS_ERROR_DOM_WRONG_DOCUMENT_ERR je jednou z běžných chyb spojených s manipulací Document Object Modelu (DOM) v JavaScriptu. Tato chyba se vyskytuje zejména při pokusu přesunout nebo zkopírovat uzel z jednoho dokumentu do jiného, což není v rámci DOM přímo povoleno. V tomto článku si vysvětlíme, co tato chyba znamená a jak ji efektivně opravit.

Co znamená NS_ERROR_DOM_WRONG_DOCUMENT_ERR?

Chyba NS_ERROR_DOM_WRONG_DOCUMENT_ERR je vyvolána v situaci, kdy se snažíte manipulovat s DOM uzlem z jiného dokumentu, než s jakým právě pracujete. K tomu dochází typicky v případě, kdy dojde k pokusu vložit element z jednoho HTML dokumentu do jiného bez správné metody k překonání omezení mezi dokumenty.

Například pokud máte iframe nebo jiný externí dokument a pokusíte se z něj vzít prvek a přímo ho přidat do hlavního dokumentu pomocí appendChild() nebo podobné metody, prohlížeč z bezpečnostních důvodů tuto operaci neprovede a vrátí právě chybu NS_ERROR_DOM_WRONG_DOCUMENT_ERR.

Jak opravit chybu NS_ERROR_DOM_WRONG_DOCUMENT_ERR?

Chybu lze opravit tak, že uzel přizpůsobíte aktuálnímu dokumentu, s nímž pracujete, což lze provést metodou importNode() nebo adoptNode(). Pojďme se podívat, jak každá z těchto metod funguje.

Použití metody document.importNode()

Metoda importNode() se používá k importu uzlu z jiného dokumentu do aktuálního. Syntaxe této metody je následující:

let importedNode = document.importNode(externalNode, true);

První parametr představuje uzel, který chcete importovat, a druhý parametr, pokud je nastaven na true, znamená, že se importuje i celý strom potomků (včetně všech poduzlů). Pokud je nastaven na false, importuje se pouze samotný uzel bez poduzlů.

let iframeDoc = document.getElementById('myIframe').contentDocument;
let externalNode = iframeDoc.getElementById('externalElement');
let importedNode = document.importNode(externalNode, true);
document.body.appendChild(importedNode);

Tímto způsobem úspěšně přenesete uzel z jednoho dokumentu do jiného bez vyvolání chyby.

Použití metody document.adoptNode()

Další možností je použití metody adoptNode(), která změní vlastnictví uzlu tak, aby se stal součástí aktuálního dokumentu. Tato metoda je užitečná, když nepotřebujete vytvářet kopii uzlu, ale chcete pracovat přímo s originálem.

Syntaxe této metody je následující:

let adoptedNode = document.adoptNode(externalNode);

Příklad:

let iframeDoc = document.getElementById('myIframe').contentDocument;
let externalNode = iframeDoc.getElementById('externalElement');
let adoptedNode = document.adoptNode(externalNode);
document.body.appendChild(adoptedNode);

V tomto případě přenesete uzel přímo do hlavního dokumentu, aniž byste museli vytvářet jeho kopii.

Jaký přístup zvolit?

• importNode() je vhodný v případě, že potřebujete vytvořit kopii uzlu a jeho obsahu z jiného dokumentu, aniž byste změnili originál.
• adoptNode() je vhodný tehdy, pokud chcete přesunout uzel přímo do aktuálního dokumentu bez vytváření jeho kopie.

 

Chyba NS_ERROR_DOM_WRONG_DOCUMENT_ERR je běžným problémem při manipulaci s DOM uzly mezi různými dokumenty. Klíčem k její opravě je správné použití metod importNode() nebo adoptNode(), které umožňují přenos nebo adoptování uzlů z jednoho dokumentu do jiného. Při výběru metody záleží na tom, zda chcete vytvořit kopii uzlu (použijte importNode()) nebo přímo přesunout existující uzel (použijte adoptNode()).

Tímto způsobem zajistíte, že se vyhnete chybám a vaše aplikace bude správně pracovat s DOM strukturami i v případě práce s více dokumenty.