About GitLabAcceptable Ads
Search
⌃K
Links
Comment on page

freeze-element

The freeze-element freezes a DOM element, thereby preventing new nodes from being adding inside the element.

Parameters

Name
Description
Example
Mandatory
property
The CSS selector for the parent element that you want to freeze.
​
​
'.left-content .container'
Yes
options
A single parameter for snippet options. A string containing all the options you want to pass, each of them separated by a plus character (+), and empty single quotes if none ('').
​
Available options:
​
  • subtree (if you want to freeze all the element's children as well)
  • abort (throws an error every time a child element gets added)
'' or subtree or abort or subtree+abort etc.
No
exceptions
An array of regular expressions/selectors used to specify the nodes you don't want to prevent being added.
​
Each array item can be:
​
  • A selector (targeting element nodes)
  • Regex (targeting text nodes, identified by slash)
.article #banner .navigation /.*/
No

Filter examples

The following table lists examples that use the abort-on-property-write snippet:
Filter
Result
freeze-element ol#b_results
Any addition of an immediate child to the ol#b_results element will be blocked.
freeze-element ol#b_results subtree
Any addition of a node to the entire subtree of ol#b_results element will be blocked.
freeze-element ol#b_results '' .organic-result
Any addition of an immediate child to the ol#b_results element will be blocked, except for the elements with the organic-result class.
freeze-element ol#b_results '' .organic-result /hello/
Any addition of an immediate child to the ol#b_results element will be blocked, except for the elements with the organic-result class and the text nodes that match the /hello/ regex.
freeze-element ol#b_results '' .organic-result /.*/
Any addition of an immediate child to the ol#b_results element will be blocked, except for the elements with the organic-result class and any Text node.
freeze-element ol#b_results '' .organic-result #header
Any addition of an immediate child to the ol#b_results element will be blocked, except for the elements with the organic-result class or the id of header.
freeze-element ol#b_results subtree .organic-result #header
Any addition of a node to the entire subtree of ol#b_results element will be blocked, except for the elements with the organic-result class or the id of header.
freeze-element ol#b_results abort
Any addition of an immediate child to the ol#b_results element will throw an error.
freeze-element ol#b_results abort+subtree
Any addition of a node to the entire subtree of ol#b_results element throw an error.
freeze-element ol#b_results abort+subtree .organic-result
Any addition of a node to the entire subtree of ol#b_results element will throw an error, except for the elements with the organic-result class.

Debugging

During debugging, you'll see messages in your browser's Developer Console of the browser for every attempt to add a child node inside the frozen element.
As a result, the elements will be added to the frozen parent node, but they won't be visible as the CSS property display: none is added.
For all the DOM mutation properties apart from textContent, innerText and nodeValue, the structure of the message is the following (each line in the table is a line printed to the console):
Message
Structure
Explanation
Examples
title
[freeze][changeId] action: selector
  • changeId - the # of the attempt
  • action - aborting/watching
  • selector - the first argument of the snippet
  • [freeze][0] watching: ol#b_results
  • [freeze][1] aborting: ol#b_results
property used
[freeze][changeId] using the function: "property"
  • changeId - the # of the attempt
  • property - the DOM mutation property used
  • [freeze][0] added the function: "innerHTML"
parent node
[freeze][changeId] added to node: parentNode
  • changeId - the # of the attempt
  • parentNode - the parent node where the added node attempts to be inserted
  • [freeze][0] added to node: <div id='parent'></div>
added node
[freeze][changeId] node: addedNode
  • changeId - the # of the attempt
  • addedNode - the blocked node
  • [freeze][0] node: <div class='ad'>ad</div>
For textContent, innerText and nodeValue, the structure of the message is the following (each line in the table is a line printed to the console):
Message
Structure
Explanation
Examples
title
[freeze][changeId] action: selector
  • changeId - the # of the attempt
  • action - aborting/watching
  • selector - the first argument of the snippet
  • [freeze][0] watching: ol#b_results
  • [freeze][1] aborting: ol#b_results
parent node
[freeze][changeId] content of node: parentNode
  • changeId - the # of the attempt
  • parentNode - the parent node where the added node attempts to be inserted
  • [freeze][0] content of node: <div id='parent'>child</div>
new content
[freeze][changeId] changed to: newContent
  • changeId - the # of the attempt
  • newContent - the new content for the parent node
  • [freeze][0] changed to: text add
property used
[freeze][changeId] using the function: "property"
  • changeId - the # of the attempt
  • property - the DOM mutation property used
  • [freeze][0] added the function: "textContent"

Considerations

Keep the following in mind when you use the freeze-elementsnippet:
  • Logging is more reliable than highlighting. Sometimes, some elements don't show as highlighted even if their style has the correct rules.
  • Sometimes, when you hover on addedNode in the console, the added node is not highlighted on the page as it should be. That is because for some DOM mutation properties, like innerHTML, outerHTML or insertAdjacentHTML, the element loses its reference when it gets added.
  • When you see all the elements of a parent node highlighted/logged, that doesn't necessarily mean nothing was there to begin with. That's because of how innerHTML and outerHTML work: changing these properties of an element results in overriding the content. When you see all the children highlighted, then, it could be because innerHTML or outerHTML was used.
Last modified 9mo ago