What Is DOM Manipulation?
Maybe you’ve heard of it, but maybe you haven’t.
DOM manipulation is something that you should stay away from in ServiceNow, and we’ll explain why.
DOM manipulation is essentially a curse word in the ServiceNow world.
DOM manipulation refers to the process of modifying or updating the Document Object Model (DOM) of a web page using scripting languages like JavaScript. The DOM represents the web page’s structure and content as a hierarchical tree of objects, with each node representing an element, attribute, or text content.
DOM manipulation allows developers to change the appearance, behavior, and content of web pages dynamically in response to user interactions, events, or data updates. For example, a developer can use DOM manipulation to add or remove elements, modify attributes, change styles, or update text content on a web page without requiring a full page reload.
There are several techniques for DOM manipulation, including using methods provided by the browser’s built-in DOM API, jQuery, or other libraries and frameworks. DOM manipulation is a fundamental technique used in modern web development, as it enables dynamic and responsive web applications.
In our experience, ServiceNow admins and developers tend to revert to DOM manipulation out of frustration when they can’t get the built in classes and methods to function as they’d like.
JavaScript engineers that are new to ServiceNow will also try to use DOM manipulation, without realizing that ServiceNow has these built in classes to utilize and modify the DOM.
Why Is It Bad Practice In ServiceNow?
DOM manipulation can be considered a bad practice in ServiceNow for a few reasons:
- Performance: DOM manipulation can be a computationally expensive operation, especially on large web pages with complex structures. In ServiceNow, where performance and speed are critical, excessive DOM manipulation can lead to slower response times and poorer user experience.
- Compatibility: Different browsers may have different implementations of the DOM, which can lead to compatibility issues if DOM manipulation code is not properly tested and validated across all supported browsers.
- Security: DOM manipulation can be used to inject malicious code into web pages, such as cross-site scripting (XSS) attacks. ServiceNow has built-in security controls to prevent such attacks, and manual DOM manipulation can bypass these controls and potentially compromise the security of the platform.
Instead of direct DOM manipulation, ServiceNow provides a variety of APIs and tools that are optimized for the platform’s performance, security, and compatibility requirements.
These include GlideRecord queries for database access, UI Macros and UI Pages for custom UI elements, and UI Actions and Business Rules for automating business logic.
By using these ServiceNow-specific APIs and tools, developers can create robust and secure applications that leverage the platform’s features and performance.
ServiceNow could also change the id of an element with a new upgrade. If you’re using document.getElementById(‘idName’) and the element isn’t there or has been renamed, then your script is not going to work!
This is going to make software upgrades a nightmare for you.
An Example Of DOM Manipulation In ServiceNow
Suppose we have a ServiceNow form that contains a field with the ID “myField”, and we want to use client-side scripting to modify the contents of that field dynamically. We can use the document.getElementById() method to access the DOM element for the field, and then use standard DOM manipulation techniques to modify its contents. For example, we can change the field’s background color to red:
// Get the DOM element for the field
var myField = document.getElementById('myField');
// Modify the field's style to change its background color
myField.style.backgroundColor = 'red';
In this example, we use the document.getElementById() method to retrieve the DOM element for the “myField” field on the form. We then modify the element’s style property to set its backgroundColor to “red”. This changes the background color of the field to red, making it more noticeable and drawing attention to it.
Note that while this is a simple example of DOM manipulation in ServiceNow, it is important to use such techniques judiciously and in compliance with ServiceNow’s best practices and security guidelines. DOM manipulation can have performance and compatibility implications, and may introduce security risks such as cross-site scripting (XSS) vulnerabilities.
DOM Manipulation And UI Pages
UI Pages are probably the only place that you can get away with DOM manipulation in the ServiceNow platform.
This is because when you define an HTML element by an ID, for example – that is never going to change with any software update.
So I think that people will be able to get away with it in a UI page, and that’s about it.
Not familiar with UI pages, let’s briefly talk about them below.
UI Pages in ServiceNow allow developers to create custom web pages using server-side scripting, HTML, and CSS. While ServiceNow provides many built-in UI components and templates, developers may need to use DOM manipulation to achieve more complex or customized layouts and functionality.
DOM Manipulation And Client Scripts
You don’t need to use DOM manipulation in a client script because ServiceNow most likely have another way of performing the action you are trying to accomplish.
Performing DOM manipulation in a client script in ServiceNow is generally not recommended, as it can lead to performance issues, compatibility problems, and potential security vulnerabilities such as cross-site scripting (XSS).
ServiceNow provides many built-in APIs and tools that are optimized for performance, security, and compatibility, and developers should always consider using these ServiceNow-specific APIs and tools before resorting to manual DOM manipulation with client scripts.
What Does “Isolate Script” Do On A Client Script?
The “isolate script” option on a client script determines whether the script is isolated from the rest of the page’s scripts and variables. When the “isolate script” option is selected, the script runs in a separate execution context and is not able to access or modify variables or functions defined by other scripts on the page.
This can be useful in certain scenarios where developers need to ensure that their script does not conflict with other scripts on the page, or where they need to guarantee that their script runs in a specific context or order. However, the isolate script option does not have any direct impact on DOM manipulation, and it does not necessarily make DOM manipulation safer or more efficient.
The ultimate conclusion here is that you don’t need to perform DOM manipulation. ServiceNow has other baked in methods to accomplish what you’re trying to do.
Disagree with us?
We love a little back and forth, it makes both parties stronger.
Let us know if you think DOM manipulation is acceptable in ServiceNow, and let us know when and where.
