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.