I am currently working on a project that involves parsing an XML file into an XMLDocument object using the browser's implementation of an XML parser, like this:
new DOMParser().parseFromString(text,"text/xml");
However, I have encountered a situation where I need to create a copy of the current XMLDocument object in another variable.
My question is: how can I create a deep clone of the parsed XML object?
Thank you for your help!
To create a deep clone of a Node object in JavaScript, you can use the cloneNode(true) method inherited from the Node interface:
var d2 = d.cloneNode(true);
For example:
var d = new DOMParser().parseFromString(
"<root><x><y></y></x></root>",
"text/xml"
);
// Prove it's a deep clone by removing `y` from `x`:
console.log("d before", d.documentElement.firstChild.children.length);
var x = d.documentElement.firstChild;
var d2 = d.cloneNode(true);
x.removeChild(x.firstChild);
console.log("d after", d.documentElement.firstChild.children.length);
console.log("d2 after", d2.documentElement.firstChild.children.length);Eugene Ryabtsev points out that the prolog information from an XML document is not cloned, which is an important consideration.
The prolog information includes:
standalone flagOut of these, only the standalone flag may be relevant. The version is typically 1.0 as per specifications, and the encoding is less pertinent for an in-memory document. However, if you need to preserve the standalone flag, you can manually copy it after using cloneNode:
d2.xmlStandalone = d.xmlStandalone;
This will ensure that the standalone flag is also copied over along with the rest of the Node content.
Don't overcomplicate it, just utilize the power of Serializer along with DOMParser.
duplicateXML=function(xmlData) {
var stringifiedXML = (new XMLSerializer()).serializeToString(xmlData.getRootNode())
return new window.DOMParser().parseFromString(stringifiedXML, "text/xml")
};
I have a quiz task in an epub format where users need to enter their answers in a text box after reading the question. However, I am facing an issue where the text box does not display the keyboard for typing the answer. Is there a solution using javascr ...
I am having some issues with drawing a rectangle on mouse drag over the canvas that is overlayed on an HTML5 video JS player. The rectangle is being drawn, but it does not align correctly with the mouse coordinates. I suspect that the canvas, which is ove ...
I stored the product description as HTML elements in a Database, but when I try to render this data into a div, it displays as a String. I am looking to showcase all the data as HTML elements in my Next JS application. I attempted using JSON.parse, but unf ...
Oops! It looks like you can't pass event handlers to Client Component props. If you want your component to be interactive, consider converting some of it to a Client Component. const reqHelp = () => { Swal.fire({ title: '1', ...
Check out this kendo treeList example. I'm trying to figure out how to sort the data in the treeList based only on values of parent elements. In the current example, when sorting by column 'P names', even the child elements get sorted. How ...
Situation: I'm currently in the process of developing a tool that will enable us to generate flow charts and then export the data into a JSON file for use in other services. Being new to JavaScript, I've come across d3 quite often. Can d3 handle ...
Hello, I have developed a basic renderer for my 3D objects that are generated using PHP. While I am able to successfully render all the objects, I am facing some major issues with textures. Currently, the texture I am using is sized at 512x512 pixels. I ...
While working on a project with ChakraUI and React JS, I encountered an error at the start that read, "TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')". I have not made any changes to the global theme in Chakra, j ...
I am facing an issue with my Angular-based app where I dynamically populate the page with table rows. There is an app-console element below the page that has a fixed position. Whenever I click the button to add a new row, it overlaps with the app-console. ...
When using the ES2016 import syntax to load the select2 library from an npm module via Webpack, everything works smoothly and the select2.js file is loaded from the node_modules directory. The node_modules directory also contains a full version of the lib ...
I am currently working on an enrollment form that requires customer information. If a user fills out half of the form and then attempts to close the tab, I want to trigger a popup giving them the option to save and exit or simply exit. While I have a jQue ...
I am currently working on implementing a shopping cart feature using pure JS that allows users to increase and decrease the quantity of items. When the + or - button is clicked, both items in the shopping cart will be affected simultaneously if there are 2 ...
Beginner here. I am attempting to create a dropdown menu for the div with an id matching my specific name. For instance, let's say my table column names are: A, B, C. I only want to have a dropdown menu for column A. The template of my table looks ...
While running my Next.js application, I encountered the following error in a script: "scripts": { "dev: "ENVIRONMENT=env/.env.development next dev", "check": "npm run format && npm run eslint", "e ...
Currently studying how to send forms using JavaScript by manually creating an XMLHttpRequest. Towards the end of the provided example, there's a note: Note: If you want to send data to a third party website, keep in mind that this use of XMLHttpRequ ...
What seems to be the issue with this part of the script: function refreshLabels() { // loop through all document elements var allnodes = document.body.getElementsByTagName("*"); for (var i=0, max=allnodes.leng ...
I am currently testing out the code sample provided in the following link: https://github.com/balanced/balanced-js After following the README instructions, I was able to get my local server up and running. However, when I visit the website and try to tok ...
After struggling for a day with multiple failed attempts, I have been unsuccessful in converting a React Class Component. The original class component code is as follows: class NeonCursor extends React.Component { constructor(props) { super(props); ...
Imagine you want to programmatically define animated movement for elements on a web page. In JavaScript, this can be achieved using techniques outlined in this helpful guide: How TO - JavaScript HTML Animations. But how would you do this in Node.js? UPDAT ...
Having an issue with my Vue app connecting to the backend using express. When I attempt to include an image in the request, it doesn't reach the backend properly. Strangely though, if I bypass express and connect directly from the Vue app, everything ...