Comment on page
freeze-element
The
freeze-element
freezes a DOM element, thereby preventing new nodes from being adding inside the element.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:
| '' 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:
| .article #banner .navigation /.*/ | No |
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. |
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 |
|
|
property used | [freeze][ changeId ] using the function: " property " |
|
|
parent node | [freeze][ changeId ] added to node: parentNode |
|
|
added node | [freeze][ changeId ] node: addedNode |
|
|
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 |
|
|
parent node | [freeze][changeId] content of node: parentNode |
|
|
new content | [freeze][changeId] changed to: newContent |
|
|
property used | [freeze][ changeId ] using the function: " property " |
|
|
Keep the following in mind when you use the
freeze-element
snippet:- 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, likeinnerHTML
,outerHTML
orinsertAdjacentHTML
, 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
andouterHTML
work: changing these properties of an element results in overriding the content. When you see all the children highlighted, then, it could be becauseinnerHTML
orouterHTML
was used.
Last modified 9mo ago