YouTip

## XML DOM renameNode() Method The `renameNode()` method is a part of the XML DOM Document object. It is used to rename an existing element or attribute node. If possible, this method modifies the name of the given node in place. Otherwise, it creates a new node with the specified name and namespace URI, replaces the existing node with the new node in the DOM tree, and copies all of its children and attributes. This method returns the renamed node (which may be the original node with a modified name, or a newly created node). --- ## Syntax ```javascript document.renameNode(node, namespaceURI, qualifiedName) ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | `node` | Node | The element or attribute node that you want to rename. | | `namespaceURI` | String | The new namespace URI for the node. Use `null` if the node does not have a namespace. | | `qualifiedName` | String | The new qualified name (the new tag name or attribute name) for the node. | ### Return Value | Type | Description | | :--- | :--- | | Node | The renamed node. This is either the original node with its name updated, or a new node that replaced the original one. | --- ## Code Examples ### Example 1: Renaming an Element Node The following example demonstrates how to rename an XML element node from `` to ``. ```javascript // Load the XML document let parser = new DOMParser(); let xmlString = `Hello World`; let xmlDoc = parser.parseFromString(xmlString, "text/xml"); // Get the node to be renamed let element = xmlDoc.getElementsByTagName("oldNode"); // Rename the node to "newNode" (no namespace) let renamedElement = xmlDoc.renameNode(element, null, "newNode"); // Serialize back to string to verify the change let serializer = new XMLSerializer(); console.log(serializer.serializeToString(xmlDoc)); // Output: Hello World ``` ### Example 2: Renaming an Attribute Node The following example demonstrates how to rename an attribute of an element. ```javascript // Load the XML document let parser = new DOMParser(); let xmlString = `Harry Potter`; let xmlDoc = parser.parseFromString(xmlString, "text/xml"); // Get the attribute node let bookElement = xmlDoc.getElementsByTagName("book"); let attributeNode = bookElement.getAttributeNode("category"); // Rename the attribute from "category" to "genre" xmlDoc.renameNode(attributeNode, null, "genre"); // Serialize back to string to verify the change let serializer = new XMLSerializer(); console.log(serializer.serializeToString(xmlDoc)); // Output: Harry Potter ``` --- ## Important Considerations 1. **Browser Support**: The `renameNode()` method is part of the DOM Level 3 Core specification. However, it is **not widely supported** in modern web browsers (such as modern versions of Chrome, Firefox, and Safari) for HTML5 documents. It is primarily used in specific XML parsing environments or older legacy systems. 2. **Alternative Approach**: If `renameNode()` is not supported in your environment, you can achieve the same result manually by: * Creating a new element using `document.createElement()`. * Copying all attributes from the old element to the new one. * Moving all child nodes from the old element to the new one. * Replacing the old element with the new one using `parentNode.replaceChild()`. 3. **Exceptions**: This method will throw a `DOMException` under the following conditions: * **NOT_SUPPORTED_ERR**: If the document does not support the "XML" feature. * **WRONG_DOCUMENT_ERR**: If the specified node was created from a different document than the one calling the method. * **INVALID_CHARACTER_ERR**: If the specified new name contains invalid XML characters.