0
183
ViewsHow to use .contains on childList mutation?
I am using MutationObserver and want to check a class selector on target.className but I get an error
Cannot read properties of undefined (reading 'contains')
so I looked at classList's prototype and it has .contains method and I did the following target.classList.prototype.contains("OverlayWrapper") and I still get the same error.
I don't understand why I am getting this error as I am trying to check for a partial className .
Edit: I have added a snapshot of the console
Edit: I have made an example for the code, it is the bare minimum where I am looking for a class that contains popUp__wrapper being added to the DOM. (an error will be in the console when we press the open button) jsfiddle
1 answers
Answer question0
Issues
mutation.addedNodesis annodeList(collection of nodes). So obviouslyclassListnot exists in it.Your class
popUp__wrapperis suffixed with a anscxdxcfd. No class with exact namepopUp__wrapper.
Solution
let wrapperEl = Array.from(mutation.addedNodes) // convert NodeList to array
.filter(n => n.nodeType != Node.TEXT_NODE) // remove text nodes
.find(n => n.matches('[class*=popUp__wrapper]')) // search for class
If you need to check popUp__wrapper available inside the node, use querySelector instead of matches
Demo
https://jsfiddle.net/aswinkumar863/qjeafxd8/20/
References
https://developer.mozilla.org/en-US/docs/Web/API/Element/matches