DOM & CSS
The Dom namespace contains all the features necessary to manipulate the DOM (Document Object Model) and document styling (CSS).
DOM manipulation - Add, Insert and Remove
To Add/Insert and Remove elements from the DOM we have several options outline in the code snippets below.
// Create demo elements
var hello = document.createElement("b");
hello.innerHTML = "Hello ";
var mighty = document.createElement("b");
mighty.innerHTML = "mighty ";
var world = document.createElement("b");
world.innerHTML = "world";
// Manipulate DOM
// Add (append) new elements - result: "Hello world"
Fit.Dom.Add(document.body, hello);
Fit.Dom.Add(document.body, world);
// Insert "mighty" after "Hello" - result: "Hello mighty world"
Fit.Dom.InsertAfter(hello, mighty);
// Insert "mighty" before "world" - result: "Hello mighty world"
Fit.Dom.InsertBefore(world, mighty);
// Remove element - result: "Hello world"
Fit.Dom.Remove(mighty);
// Insert "mighty" before "world" using position (index) - result: "Hello mighty world"
var container = world.parentElement;
var index = Fit.Dom.GetIndex(world);
Fit.Dom.InsertAt(container, index, mighty);
DOM manipulation - Replace and Wrap
Being able to either replace a DOM element with another, or wrap an existing element within a new container, often comes in handy, and Fit.UI makes this very easy.
// Get existing element to replace - e.g. <h1>Fit.UI just released</h1>
var oldHead = document.getElementById("headline");
// Create new headline: <h1>Breaking news..</h1>
var newHead = document.createElement("h1");
newHead.innerHTML = "Breaking news..";
// Replace old headline with new headline
Fit.Dom.Replace(oldHead, newHead);
// Wrap headline in new container:
// <div class="Draggable"><h1>Breaking news..</h1></div>
var draggable = document.createElement("div");
draggable.className = "Draggable";
Fit.Dom.Wrap(newHead, draggable);
DOM manipulation - create element
While document.createElement is fine for creating empty containers, we need something more sophisticated for creating complex objects from a string, which is what CreateElement is for.
// Create an element (<b>) from an HTML string
var b = Fit.Dom.CreateElement("<b style='color: red'>Hello world</b>");
// If the string defines multiple elements, they will automatically
// be wrapped in a <div> container. The code below returns:
// <div><b>Hello</b> <i>world</i></div>
var div = Fit.Dom.CreateElement("<b>Hello</b> <i>world</i>");
// A second argument allows us to change the default container type.
// The code below wraps multiple elements in a <span> container instead.
var span = Fit.Dom.CreateElement("<b>Hello</b> <i>world</i>", "span");
The functions demonstrated below is used to work with the DOM hierarchy.
// Determine whether elm is contained in container (at any level)
var isContained = Fit.Dom.Contained(container, elm);
// Get elm's index in its parent container
var index = Fit.Dom.GetIndex(elm);
// Determine elm's depth in DOM hierarchy.
// <html> is level 0, <body> is level 1, etc.
var depth = Fit.Dom.GetDepth(elm);
// Use GetConcealer to determine which element is hiding elm.
// If element itself is hidden (display: none) then elm itself is returned.
var concealer = Fit.Dom.GetConcealer(elm);
// Traverse DOM from tdElm and up until parent of given type is reached
var table = Fit.Dom.GetParentOfType(tdElm, "table");
Contained, GetIndex, GetDepth, GetConcealer, GetParentOfType
We can use GetDepth to determine how deep in the DOM hierarchy an element is nested, Contained to determine whether one element contains another element
// Determine the depth of an element
Fit.Dom.GetDepth(elm); // Returns 2 - <html> is level 0, <body> is level 1 and <b> (elm) is level 2
The functions Attribute, Data, and Text are setter and getter functions, meaning they can be used to both set and retrieve values.
Attribute is used to set/get attribute values, Data is used to set/get HTML5 data attribute values, and Text is used to set/get the text value of an element.
// Create element
var elm = Fit.Dom.CreateElement("<div style='color: red'>Hello</div>");
// Get and Set style attribute
var style = Fit.Dom.Attribute(elm, "style"); // Get style attribute
Fit.Dom.Attribute(elm, "style", "color: blue"); // Set style attribute
Fit.Dom.Attribute(elm, "style", null); // Remove style attribute
// Add data attribute - result:
Fit.Dom.Data(elm, "id", "123"); // Set data-id: <div style="color: blue" data-id="123">Hello</div>
var id = Fit.Dom.Data(elm, "id"); // Get data-id value
Fit.Dom.Data(elm, "id", null); // Remove data-id
// Get and Set element text
var txt = Fit.Dom.Text(elm); // Get text
Fit.Dom.Text(elm, "Hi World"); // Set text - result: <div style="color: blue">Hi World</div>
Fit.Dom.Text(elm, ""); // Clear text
DOM visibility and rooting
Use IsRooted to determine whether an element has been added to the page and IsVisible to determine whether an element is visible or not (hidden). If an element is not visible, we can use GetConcealer to determine which parent is responsible for hiding the element.
var elm = document.createElement("b");
elm.innerHTML = "Hello world";
// Determine whether an element has been added to DOM (page) and is visible.
// IsRooted returns True if element is added to page.
// IsVisible returns True if element is added to page AND is visible (not hidden).
Fit.Dom.IsRooted(elm); // Returns false
Fit.Dom.IsVisible(elm); // Returns false
Fit.Dom.Add(document.body, elm);
Fit.Dom.IsRooted(elm); // Returns true
Fit.Dom.IsVisible(elm); // Returns true
elm.style.display = "none";
Fit.Dom.IsVisible(elm); // Returns false
// Find element responsible for hiding our element
Fit.Dom.GetConcealer(elm); // Returns itself in this case since it has display:none
Various other DOM functions are demonstrated below.
// GetFocused is a helper function used to obtain the element currently focused.
// It works around an iframe related bug in Internet Explorer. The function returns
// Null if DOM is not ready yet, and returns document.body if no element is focused.
var focusedElemenet = Fit.Dom.GetFocused();
// Get elm's position within document.
// The function returns e.g. { X: 100, Y: 240 } if element is visible, otherwise Null.
var position = Fit.Dom.GetPosition(elm);
// Get elm's position within viewport.
// The function returns e.g. { X: 100, Y: 240 } if element is visible, otherwise Null.
var position = Fit.Dom.GetPosition(elm, true);
// Get elm's relative position to a positioned parent or ancestor (offset parent).
// The coordinates returned are relative to document if no positioned parent or ancestor is found.
// The function returns e.g. { X: 100, Y: 240 } if element is visible, otherwise Null.
var position = Fit.Dom.GetRelativePosition(elm);
The functions below are used to manipulate CSS classes on elements.
// Add CSS classes to elm
Fit.Dom.AddClass(elm, "MenuLink");
Fit.Dom.AddClass(elm, "ActiveLink");
// Determine whether elm has a CSS class registered
var isActiveLink = Fit.Dom.HasClass("ActiveLink");
// Remove CSS class from elm
Fit.Dom.RemoveClass(elm, "ActiveLink");
// Get CSS styles applied to element
var fontFamily = Fit.Dom.GetComputedStyle(elm, "font-family");
var fontSize = Fit.Dom.GetComputedStyle(elm, "font-size");
var fontColor = Fit.Dom.GetComputedStyle(elm, "color");