Last change: August 22, 2019
Current version: 1.6.0
The domManipulation module allows you to manipulate the DOM model of the page.
syntax
webanizr.send('domManipulation', data, parameters, callback);
data
Not used by this module, but passed on to the next module.
parameters
The domManipulation accepts the following parameters:
type__manipulation (required)
The type of manipulation you want to perform. The following options are supported:
- remove: removes the selected elements
- place-in: places the selected elements in a container in the order that they are found
- place-before: places the selected elements before an element in the order that they are found
- place-after: places the selected elements after an element in the order that they are found
- disable: sets the disable attribute to true (only applicable for form fields)
- toggle-css-hidden: show / hides the element using the css display property
- toggle-dom-hidden: show / hides the element using the hidden attribute
- image-src: changes the src of the image. Uses the value of the parameter src__image as the new src of the image
- toggle-css: toggles css attributes. E.g. { maxHeight : [ '100px', '500px', '8000px' ] } will toggle the max height of the element(s) from 100px to 500px to 8000px and back to 100px again.
- inner-html: sets the html content of the element(s)
query__selector (required)
The selector that defines the elements the manipulation should be applied to. You can also use a DOM element as value.
id__relativeelement (required by some)
The element that is used as reference or target element. Ie with the place-in manipulation this is the container all selected element are placed in. You can also use a DOM element as value.
src__image (optional for task image-src)
The new srch for the image(s) when the type of manupilation is image-src.
html__content (optional for task inner-html)
The html content to be placed in the element(s)
callback
The callback is called with the original data.
demos
https://cdn.cpmodules.webanizr.com/demo/dom-manipulations/index.html
Changelog
- August 22, 2019: 1.6.0 - Added inner-html option