HelPHP Javascript Documentation

Class: H_dom

H_dom

Utility class for DOM manipulation and element management.
Provides static methods for creating, modifying, positioning, styling, and interacting with DOM elements.
Used as h.libs.dom.

It permit also to create dom elements for your UI, complexe UI ones are made with H_ui.

new H_dom()

dom.js, line 28

Methods

staticH_dom.add_class(dom_element, class_name)

dom.js, line 653
Adds a class to a DOM element.
Name Type Description
dom_element HTMLElement The element.
class_name string Class name.

staticH_dom.add_css_rule(sheet_id, selector, style, sheet_media){number|false}

dom.js, line 1640
Adds a CSS rule to a stylesheet.
Name Type Description
sheet_id int Stylesheet ID.
selector string CSS selector.
style string CSS style.
sheet_media object Media condition.
Returns:
Type Description
number | false Rule index or false.

staticH_dom.add_script_tag(script_tag, delay)

dom.js, line 117
Adds a script tag to the DOM, handling defer if present.
Name Type Description
script_tag HTMLElement The script tag element.
delay number Optional delay for deferred script_tag.

staticH_dom.append_content(dom_element, content)

dom.js, line 507
Appends content to a DOM element.
Handles DOM elements, arrays, objects, and strings.
or an object/class who got an attribute dom_element that point to a dom element
Name Type Description
dom_element HTMLElement Target element.
content * Content to append.

staticH_dom.can_have_css(dom_element){boolean}

dom.js, line 629
Checks if a DOM element can have CSS classes. classList exist.
Name Type Description
dom_element HTMLElement The element.
Returns:
Type Description
boolean True if can have CSS.

staticH_dom.clone_dom_element(dom_element, recursive){HTMLElement}

dom.js, line 584
Clones a DOM element, optionally recursively.
Copies event listeners and custom classes.
Name Type Description
dom_element HTMLElement Element to clone.
recursive boolean Clone children.
Returns:
Type Description
HTMLElement The cloned element.

staticH_dom.create_button_info(params, content}, type){SVGElement}

dom.js, line 481
Creates an button info element.
Name Type Default Description
params object {} optional attributes.
content} object optional content of the tooltip.
type string 'text' optional type of content (text or link).
Returns:
Type Description
SVGElement The SVG icon element.

staticH_dom.create_element(tag_name, params, content, parent){HTMLElement}

dom.js, line 394
Creates a new DOM or SVG element with attributes and content.
and add it to the targetted parent?
Name Type Description
tag_name string Tag name.
params object optional Attributes.
content * optional Content to append.
parent HTMLElement optional Parent to append to.
Returns:
Type Description
HTMLElement The created element.

staticH_dom.create_icon(name, params){SVGElement}

dom.js, line 467
Creates an SVG icon element.
Name Type Default Description
name string Icon name.
params object {} optional SVG attributes.
Returns:
Type Description
SVGElement The SVG icon element.

staticH_dom.disable_css_sheet(sheet_id){boolean}

dom.js, line 1678
Disables a CSS stylesheet by ID.
Name Type Description
sheet_id int Stylesheet ID.
Returns:
Type Description
boolean True if disabled.

staticH_dom.disable_mouse_events(dom_element)

dom.js, line 1748
Disables mouse events on a DOM element.
Name Type Description
dom_element HTMLElement The element.

staticH_dom.enable_css_sheet(sheet_id){boolean}

dom.js, line 1702
Enables a CSS stylesheet by ID.
Name Type Description
sheet_id int Stylesheet ID.
Returns:
Type Description
boolean True if enabled.

staticH_dom.enable_mouse_events(dom_element)

dom.js, line 1761
Enables mouse events on a DOM element.
Name Type Description
dom_element HTMLElement The element.

staticH_dom.find_child_index(parent_element, child_element){number}

dom.js, line 351
Finds the index of a child element.
Name Type Description
parent_element HTMLElement Parent element.
child_element HTMLElement Child element.
Returns:
Type Description
number Index or -1 if not found.

staticH_dom.get_class_object(element, type){object|Array}

dom.js, line 560
Gets custom class objects linked to a DOM element.
Name Type Description
element HTMLElement The DOM element.
type string optional Class type.
Returns:
Type Description
object | Array The class object(s).

staticH_dom.get_css_rules(sheet_id, sheet_media){object|false}

dom.js, line 1607
Gets the cssRulesList of a stylesheet or CSSMediaRule.
Both implement insertRule and removeRule methods.
Name Type Description
sheet_id int Stylesheet ID.
sheet_media object Media condition.
Returns:
Type Description
object | false CSS stylesheet or rule.

staticH_dom.get_dom_element(dom_id_or_object){HTMLElement|null}

dom.js, line 365
Gets a DOM element by ID or returns the dom object.
Name Type Description
dom_id_or_object string | object ID or element.
Returns:
Type Description
HTMLElement | null The DOM element or null.

staticH_dom.get_em_unit_value(parent_node){number}

dom.js, line 1815
Gets the value of 1em in pixels for a parent node.
Name Type Description
parent_node HTMLElement Parent node.
Returns:
Type Description
number Value of 1em in px.

staticH_dom.get_global_height(dom_element){number}

dom.js, line 1326
Gets the global height of an element.
Name Type Description
dom_element HTMLElement The element.
Returns:
Type Description
number Height in px.

staticH_dom.get_global_position(dom_element){object}

dom.js, line 917
Gets the global position of an element.
Name Type Description
dom_element HTMLElement The element.
Returns:
Type Description
object Position {x, y}.

staticH_dom.get_global_rect(dom_element, force_refresh, debug){object|null}

dom.js, line 812
Gets the absolute rect of an element in page coordinates.
Name Type Default Description
dom_element HTMLElement The element.
force_refresh boolean optional Force recompute.
debug boolean false optional Debug output.
Returns:
Type Description
object | null Rect object or null.

staticH_dom.get_global_to_local(dom_element, x, y, advanced){object}

dom.js, line 881
Converts page coordinates to local coordinates inside an element.
Name Type Description
dom_element HTMLElement The element.
x number X coordinate.
y number Y coordinate.
advanced boolean optional Return ratios.
Returns:
Type Description
object Local coordinates.

staticH_dom.get_global_width(dom_element){number}

dom.js, line 1313
Gets the global width of an element.
Name Type Description
dom_element HTMLElement The element.
Returns:
Type Description
number Width in px.

staticH_dom.get_position(dom_element){object}

dom.js, line 899
Gets the position of an element (offsetLeft/offsetTop).
Name Type Description
dom_element HTMLElement The element.
Returns:
Type Description
object Position {x, y}.

staticH_dom.get_relative_position(dom_element){object}

dom.js, line 908
Gets the relative position of an element.
Name Type Description
dom_element HTMLElement The element.
Returns:
Type Description
object Position {x, y}.

staticH_dom.get_style(dom_element){object}

dom.js, line 1414
Returns the computed styles for an element.
Name Type Description
dom_element HTMLElement The element.
Returns:
Type Description
object Computed style object.

staticH_dom.get_style_value(dom_element, attribute_name){string|undefined}

dom.js, line 1400
Gets a style value for an element.
Name Type Description
dom_element HTMLElement The element.
attribute_name string CSS attribute.
Returns:
Type Description
string | undefined Value.

staticH_dom.has_class(dom_element, class_name){boolean}

dom.js, line 641
Checks if a DOM element has a specific class.
Name Type Description
dom_element HTMLElement The element.
class_name string Class name.
Returns:
Type Description
boolean True if has class.

staticH_dom.hide_element(element)

dom.js, line 288
Hides a DOM element, storing its original display value.
Name Type Description
element HTMLElement The element to hide.

staticH_dom.insert_after(dom_element, after_me)

dom.js, line 767
Inserts a DOM element after another.
Name Type Description
dom_element HTMLElement | string Element to insert.
after_me HTMLElement Reference element.

staticH_dom.insert_before(dom_element, before_me)

dom.js, line 724
Inserts a DOM element before another.
Name Type Description
dom_element HTMLElement | string Element to insert.
before_me HTMLElement Reference element.

staticH_dom.insert_script_tag(script_tag)

dom.js, line 133
Inserts a script tag into the DOM and executes it.
Handles both external and inline scripts.
Name Type Description
script_tag HTMLElement The script tag element.

staticH_dom.is_same_element(a, b){boolean}

dom.js, line 340
Checks if two elements are the same.
Name Type Description
a * First element.
b * Second element.
Returns:
Type Description
boolean True if same.

staticH_dom.load_css(url){boolean}

dom.js, line 1570
Loads a CSS file into the document head if not already present.
of course the url must respect the CORS rules..
Name Type Description
url string CSS file URL.
Returns:
Type Description
boolean True if loaded, false if already present.

staticH_dom.load_script(url){boolean}

dom.js, line 224
Loads a script into the document head if not already present.
Name Type Description
url string Script URL.
Returns:
Type Description
boolean True if loaded, false if already present.

staticH_dom.move_to_front(dom_element)

dom.js, line 1788
Moves a DOM element to the front by setting a high z-index.
Name Type Description
dom_element HTMLElement The element.

staticH_dom.move_to_header(id)

dom.js, line 178
Moves a script or link element to the document head.
Name Type Description
id string The element ID.

staticH_dom.point_inside_element(x, y, dom_element){boolean}

dom.js, line 929
Checks if a point is inside an element's global rect.
Name Type Description
x number X coordinate.
y number Y coordinate.
dom_element HTMLElement The element.
Returns:
Type Description
boolean True if inside.

staticH_dom.point_inside_element_data(x, y, dom_element){object}

dom.js, line 941
Returns data about a point relative to an element.
Name Type Description
x number X coordinate.
y number Y coordinate.
dom_element HTMLElement The element.
Returns:
Type Description
object Data {inside, rect, localX, localY}.

staticH_dom.px_to_em(px_value, parent_node, add_em_suffix){number|string}

dom.js, line 1841
Converts a pixel value to em units.
Name Type Description
px_value number Pixel value.
parent_node HTMLElement Parent node.
add_em_suffix boolean Add 'rem' suffix.
Returns:
Type Description
number | string Value in em/rem.

staticH_dom.reload_page(url)

dom.js, line 158
Reloads the page or navigates to a given URL.
Name Type Description
url string optional Optional URL to navigate to.

staticH_dom.remove_class(dom_element, class_name)

dom.js, line 664
Removes a class from a DOM element.
Name Type Description
dom_element HTMLElement The element.
class_name string Class name.

staticH_dom.remove_css_rule(sheet_id, ruleName, sheet_media){boolean}

dom.js, line 1658
Removes a CSS rule from a stylesheet.
Name Type Description
sheet_id int Stylesheet ID.
ruleName string Selector name.
sheet_media object Media condition.
Returns:
Type Description
boolean True if removed.

staticH_dom.remove_element(element)

dom.js, line 531
Removes a DOM element from the document and cleans up events etc.
Name Type Description
element HTMLElement Element to remove.

staticH_dom.replace_class(dom_element, class_name_to_replace, new_class_name)

dom.js, line 676
Replaces a class on a DOM element.
Name Type Description
dom_element HTMLElement The element.
class_name_to_replace string Class to replace.
new_class_name string New class name.

staticH_dom.replace_element(original_element, new_element)

dom.js, line 699
Replaces a DOM element with another, executing scripts if present.
Name Type Description
original_element HTMLElement | string Element to replace.
new_element HTMLElement | string Replacement.

staticH_dom.restore_mouse_events(dom_element)

dom.js, line 1774
Restores the original mouse events on a DOM element.
Name Type Description
dom_element HTMLElement The element.

staticH_dom.restore_zindex(dom_element)

dom.js, line 1802
Restores the original z-index of a DOM element.
Name Type Description
dom_element HTMLElement The element.

staticH_dom.set_alignment(dom_element, horizontal, vertical, parent_node, from_window)

dom.js, line 1371
Sets the alignment of an element within its parent or window.
horizontal and vertical are factor from 0 (left) to 1(right)
Name Type Default Description
dom_element HTMLElement The element.
horizontal number Horizontal alignment (0..1).
vertical number Vertical alignment (0..1).
parent_node HTMLElement Parent node.
from_window boolean false optional Use window as reference.

staticH_dom.set_global_bottom(dom_element, new_bottom)

dom.js, line 1102
Sets the global bottom position of an element.
Name Type Description
dom_element HTMLElement The element.
new_bottom number New bottom position.

staticH_dom.set_global_cursor(cursor_value){boolean}

dom.js, line 1727
Sets the global cursor style for the page.
Name Type Description
cursor_value string CSS cursor value.
Returns:
Type Description
boolean False if already set.

staticH_dom.set_global_height(dom_element, new_height)

dom.js, line 1216
Sets the global height of an element, accounting for border and padding.
Name Type Description
dom_element HTMLElement The element.
new_height number New height in px.

staticH_dom.set_global_left(dom_element, new_left)

dom.js, line 1007
Sets the global left position of an element.
Name Type Description
dom_element HTMLElement The element.
new_left number New left position.

staticH_dom.set_global_min_width(dom_element, new_width)

dom.js, line 1174
Sets the global min-width of an element.
Name Type Description
dom_element HTMLElement The element.
new_width number New min-width in px.

staticH_dom.set_global_position(dom_element, x, y)

dom.js, line 956
Sets the global position of an element in page coordinates.
Name Type Description
dom_element HTMLElement The element.
x number X coordinate.
y number Y coordinate.

staticH_dom.set_global_rect(dom_element, left, top, right, bottom)

dom.js, line 1237
Sets the global rect (left, top, right, bottom) of an element.
Name Type Description
dom_element HTMLElement | object The element or rect object.
left number Left position.
top number Top position.
right number Right position.
bottom number Bottom position.

staticH_dom.set_global_right(dom_element, new_right)

dom.js, line 1088
Sets the global right position of an element.
Name Type Description
dom_element HTMLElement The element.
new_right number New right position.

staticH_dom.set_global_top(dom_element, new_top)

dom.js, line 1050
Sets the global top position of an element.
Name Type Description
dom_element HTMLElement The element.
new_top number New top position.

staticH_dom.set_global_width(dom_element, new_width)

dom.js, line 1116
Sets the global width of an element, accounting for border and padding.
Name Type Description
dom_element HTMLElement The element.
new_width number New width in px.

staticH_dom.set_height(dom_element, h)

dom.js, line 1270
Sets the height of an element in local coordinates.
Name Type Description
dom_element HTMLElement The element.
h number Height in px.

staticH_dom.set_left(dom_element, x)

dom.js, line 1280
Sets the left position of an element in local coordinates.
Name Type Description
dom_element HTMLElement The element.
x number Left position in px.

staticH_dom.set_position(dom_element, x, y, css_position)

dom.js, line 1342
Sets the position of an element in local coordinates.
use H_dom.RELATIVE or H_dom.ABSOLUTE for specify the css_position parameters
Name Type Description
dom_element HTMLElement The element.
x number | object X position or {x, y}.
y number Y position.
css_position string optional CSS position value.

staticH_dom.set_rect_dirty()

dom.js, line 1531
Marks only the rect of an element and its children as dirty and to recompute.

staticH_dom.set_size(dom_element, w, h)

dom.js, line 1301
Sets the width and height of an element in local coordinates.
Name Type Description
dom_element HTMLElement The element.
w number Width in px.
h number Height in px.

staticH_dom.set_style_dirty(dom_element)

dom.js, line 1524
Marks the style of an element as dirty for recomputation.
Name Type Description
dom_element HTMLElement The element.

staticH_dom.set_style_value(dom_element, attribute_name, value){boolean}

dom.js, line 1545
Sets a style value for an element and marks as dirty if changed.
Name Type Description
dom_element HTMLElement The element.
attribute_name string CSS attribute.
value string Value to set.
Returns:
Type Description
boolean True if changed.

staticH_dom.set_top(dom_element, y)

dom.js, line 1290
Sets the top position of an element in local coordinates.
Name Type Description
dom_element HTMLElement The element.
y number Top position in px.

staticH_dom.set_width(dom_element, w)

dom.js, line 1260
Sets the width of an element in local coordinates.
Name Type Description
dom_element HTMLElement The element.
w number Width in px.

staticH_dom.show_element(element, force_visibility_value)

dom.js, line 308
Shows a previously hidden DOM element.
and restore its visibility to the original one or to an opationnal force_visibility_value
Name Type Description
element HTMLElement The element to show.
force_visibility_value string optional Optional display value.

staticH_dom.string_to_dom(str, multiple, active_script){Node|NodeList}

dom.js, line 256
Converts an HTML string to DOM nodes.
Optionally activates scripts and returns multiple nodes.
Name Type Default Description
str string HTML string.
multiple boolean false optional Return all nodes.
active_script boolean false optional Activate scripts.
Returns:
Type Description
Node | NodeList The DOM node(s).

staticH_dom.toggle_class(dom_element, class_name, force_state)

dom.js, line 688
Toggles a class on a DOM element.
Name Type Description
dom_element HTMLElement The element.
class_name string Class name.
force_state boolean optional Force toggle state.

staticH_dom.unset_global_cursor()

dom.js, line 1739
Unsets the global cursor style.

staticH_dom.write_html(target, html_data, append, before)

dom.js, line 60
Insert HTML code inside a dom element
Ensures scripts are executed. Replace content by default.
Name Type Default Description
target * Element to insert inside.
html_data string | HTMLElement HTML to insert.
append boolean false optional True to append new content.
before boolean false optional True to prepend the content.