---Loading---

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, kinda like jQuery but with Typescript and Plain JS (ES-Next).
  • 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 (array) 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);

Get CSS

with .getCSS(property, pseudo) you can get the css value of a specific HTML element and you can get all the Computed styles of the element or target specific property or pseudo-elements, and it will return the value of the css as an object for all and string value for the targeted property, you can learn how to use it from the example below.

//====> Get Element All CSS Information <====//
let AllCss = Phenix(element).getCss();
//====> Get Element Specific CSS Property Value <====//
let display = Phenix(element).getCss("display");
//====> Get Element ::before pseudo CSS Property Value <====//
let pseudo = Phenix(element).getCss("display", ":before");

Set Attributes

with Phenix .setAttributes(attr...) the function you can add/set multiple attributes to a group of matched selected elements, and you can learn how to use it from the example below.

//====> set multiple Attributes to multiple elements <====//
Phenix('.links').setAttributes({
"href" : "#",
"target" : "_blank",
"class" : "link-element class-test"
});

Insert Elements

with Phenix .insert(postion, html) you can create HTML elements or move from their place and insert it in another place hooked up to another element and insert it after the element or before the element or as first children of the element or even the last children of the element.

//====> Create HTML String Element <====//
let html_code = `<div class="demo">....</div>`;
//====> Insert The html_code after the .hook-element <====//
Phenix('.hook-element').insert('after', html_code);
//====> Create HTML String Element <====//
let html_code = `<div class="demo">....</div>`;
//====> Insert The html_code before the .hook-element <====//
Phenix('.hook-element').insert('before', html_code);
//====> Create HTML String Element <====//
let html_code = `<div class="demo">....</div>`;
//====> Insert The html_code as the last child of .hook-element <====//
Phenix('.hook-element').insert('append', html_code);
//====> Create HTML String Element <====//
let html_code = `<div class="demo">....</div>`;
//====> Insert The html_code as the first child of .hook-element <====//
Phenix('.hook-element').insert('prepend', html_code);

Get Height

with .height the function you can get the exact/true height of any element including padding even if the element is hidden and will return the value of the HTML Element height with pixels number.

//====> Get Element True Height <====//
let height = Phenix(element).height();

Get Direction

with Phenix .direction() you can get information about the current Document[page] flow direction like if its rtl or ltr, what is the start point left or right etc, and you can learn how to use them in the example below.

//====> Check for Page Direction <====//
let cureent_direction = Phenix(document).direction();
if (cureent_direction == "rtl") {....};
//====> Check for Page Direction Start Point <====//
let start_point = Phenix(document).direction('start');
if (start_point == "right") {....};
//====> Check for Page Direction End Point <====//
let end_point = Phenix(document).direction('end');
if (end_point == "right") {....};

View-port Checker

with Phenix viewport Checker .inView({options}) you can check if the element is currently displayed in the view point of the user screen and it return true or false, and you can check with specific and different cases with multiple options like :

  • flow: if you want to check if the element in the view from the top or the bottom
  • into: check the element view after it shows by adding offset number by pixels
  • offset : check before the element shows by adding offset number by pixels
  • !important : you can’t use offset and into with each other you can only increase or decrease the target position.
//====> Check if the element in View-Point <====//
let viewCheck = Phenix(element).inView();
if(viewCheck) {...};
//====> Check if the element in View-Point with Options <====//
let viewCheck = Phenix(element).inView({
flow : 'start', //===> values : start, end
into : 30, //===> Increase Target Position By [number]
offset : 10 //===> Decrease Target Position By [number]
});
if(viewCheck) {...};

View-port Dimensions

with Phenix .viewport(property) you can get the current view-port/screen width and height, it will return an object with width , height keys which hold a value for each with pixels, and you can use it for creating a media query for js code etc.

//====> Get View-Port Width/Height <====//
let screen_size = Phenix(document).viewport();
//====> if the screen width is more then 1280px do something <====//
if (screen_size["width"] > 1280) {...}

//====> Get View-Port Width <====//
let screen_width = Phenix(document).viewport('width');
//====> Get View-Port Height <====//
let screen_height = Phenix(document).viewport('height');

Table of Content