DOM Manipulation

Learn how to work around Phenix Functions and helpers, add/remove classes, get element information or set multiple attributes, and create new elements in specific locations, etc.

What is Phenix Query

• Phenix Query is JavaScript Objects Query Creator with Prototypes functionality that lets you traverse and manipulate, event handling HTML Elements and create interactive components like slideshow, tabbing panels, etc.
• Phenix is an Elements Selector you can use to select HTML elements with CSS Selectors or JS Object and play with it, and it will always return itself which is an object of HTML Elements.
• Phenix has its collection of plugins and modules to create an amazing user interface, it almost has everything you will ever need to build a creative web app.
• Phenix JavaScript can be used individually without the CSS/SASS files as a completely self-independent JavaScript Library.
• Phenix JavaScript can be merged and work side by side with any other JavaScript framework like, vue, react, angular, etc.

Add Class

Phenix has a built-in function to add/remove and toggle class names to a group of elements at once and you can use it like the example below.

//====> Select Elements, add Class to Each of them <====//
Phenix('.some-list li').addClass('className');

Remove Class

Phenix has a built-in function to add/remove and toggle class names to a group of elements at once and you can use it like the example below.

//====> Select Elements, remove Class from Each of them <====//
Phenix('.some-list li').removeClass('className');

Toggle Class

Phenix has a built-in function to add/remove and toggle class names to a group of elements at once and you can use it like the example below.

//====> add Class if not exist and remove Class if exists <====//
Phenix('.some-list li').toggleClass('className');

Set CSS

with Phenix .css(style-object, clear:boolean) the function you can add/set multiple inline CSS properties to a group of matched selected elements, and you can learn how to use it from the example below, and it has an optional parameter to clear the elements inline-style before setting the new CSS.

//====> set multiple inline css <====//
Phenix('.dom-element').css({
    "display" : "block",
    "padding-top" : "30px",
});

//====> set css and remove any previous inline-style <====//
Phenix('.dom-element').css({
    "display" : "block",
}, true);