This type of attack occurs because the client-side javascript has access to the Document Object Model (DOM) rendered as a part of the response.Client Side Javascript may pe performing some calulation,manipuation,etc on a part of the DOM and rendring it on the webpage to make it look dynamic.
Example : Consider the url: www.example.com/?q=hey+there
Suppose the website designer has written a javascript code that takes the value of "q" and then displays it.
This script parses the URL and extracts the value of q and writes it to the HTML Source code.This is similar to Reflected XSS, but involves the use of client-side javascript that changes the contents of the Webpage.
Now if a malicious actor, adds a malicious payload, this causes the payload to be dynamically written to the webpage and thus making it vulnerable.
DOM based XSS can be prevented by: