# advanced_dom_changed The `advanced_dom_changed` event is published when the DOM has been changed in any way, such as an element being added, removed, or modified. > Shopify Plus: > This event is limited on [checkout](https://help.shopify.com/manual/checkout-settings) to stores on the [Shopify Plus](https://www.shopify.com/plus) plan. ### Accessing Advanced DOM Events ```javascript import {register} from '@shopify/web-pixels-extension'; const domFragmentMap = new Map(); register(({analytics}) => { let root; // Get the root node when it becomes available. analytics.subscribe('advanced_dom_available', (event) => { root = event.data.root; }); // Keep the domFragmentMap up to date for reference with other events. analytics.subscribe('advanced_dom_changed', (event) => { // Handle added fragments event.data.addedFragments.forEach((addedFragment) => { const parentFragment = domFragmentMap.get( addedFragment.parentSerializationId, ); if (parentFragment) { // Find the correct insertion index based on prevSiblingSerializationId // Default to end if no prev sibling found let insertIndex = parentFragment.children.length; if (addedFragment.prevSiblingSerializationId !== -1) { const prevSiblingIndex = parentFragment.children.findIndex( (childFragment) => childFragment.node.serializationId === addedFragment.prevSiblingSerializationId, ); // Insert after the previous sibling insertIndex = prevSiblingIndex + 1; } // Insert at the calculated index parentFragment.children.splice(insertIndex, 0, addedFragment); domFragmentMap.set(addedFragment.node.serializationId, addedFragment); } }); // Handle removed nodes event.data.removedNodes.forEach((removedNode) => { const removedFragment = domFragmentMap.get(removedNode.serializationId); const parentFragment = domFragmentMap.get( removedFragment.parentSerializationId, ); if (parentFragment) { parentFragment.children = parentFragment.children.filter( (childFragment) => childFragment.node.serializationId !== removedNode.serializationId, ); domFragmentMap.delete(removedNode.serializationId); } }); // Handle modified nodes event.data.modifiedNodes.forEach((modifiedNode) => { const fragment = domFragmentMap.get(modifiedNode.serializationId); if (fragment) { fragment.node = modifiedNode; } }); }); }); ``` ## Properties ### PixelEventsAdvancedDomChanged The `advanced_dom_changed` event logs an instance where the DOM has been changed in any way, such as an element being added, removed, or modified. ### clientId The client-side ID of the customer, provided by Shopify ### data ### id The ID of the customer event ### name The name of the customer event. ### seq The sequence index number of the event. ### timestamp The timestamp of when the customer event occurred, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format ### type ### PixelEventsAdvancedDomChangedData ### addedFragments Array of `DomFragment` added to the document. Each `DomFragment` represents a sub-tree of the document. Use the `parentSerializationId` and the `prevSiblingSerializationId` to reconstruct the document. ### modifiedNodes Array of `DomNode` that have had their attributes changed. Use the `serializationId` of each to find it and update your own representation of the document. ### removedNodes Array of `DomNode` removed from the document. Use the `serializationId` of each to find it and remove it from your own representation of the document. ### DomFragment Representation of a sub-tree of the host document. ### children Array of `DomFragment` representing children of the parent `DomFragment`. ### node The node object of the `DomFragment`. ### parentSerializationId The serialization ID of the parent node. -1 if there are no parents. ### prevSiblingSerializationId The serialization ID of the previous sibling node. -1 if there are no previous siblings. ### DomNode Representation of a node in the document. ### attributes A dictionary of attributes of an element. Only available on element nodes. ### checked The checked state of an element. Only available on input element nodes. ### clientRect The coordinates of the element in the viewport. Only available on element nodes. ### nodeType The type of node based on the native DOM API's [`nodeType`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType) values. It distinguishes different kind of nodes from each other, such as elements, text and comments. ### scroll The scroll coordinates of the element in the viewport. Only available on element nodes. ### serializationId The serialization id of the node. This is a unique identifier for the node based on its stable reference in the host DOM tree. ### tagName A string representation of the tag of a node. Only available on element nodes. ### textContent The text content of an element. Only available on text nodes. ### ClientRect An object that contains data about an element coordinates in a viewport. ### height ### width ### x ### y ### EventType ### AdvancedDom ### Custom ### Dom ### Standard