Class: Element

Element

The HTML DOM Element interface.

Mixes In

Methods

attr(attribute) → {String}

Gets the value of the element's specified attribute.

Parameters:
Name Type Description
attribute String

The name of the attribute who's value you want to get.

Source:
Returns:
Type
String

The value of the attribute. If the element does not have the specified attribute, null is returned.

attr(attribute, value)

Sets the element's specified attribute.
Parameters:
Name Type Description
attribute String

The name of the attribute who's value should be set.

value String | Number

The value to set the specified attribute to.

If the value argument is specified and is null or undefined, the specified attribute is removed.

Source:

attr(attributes)

Sets the specified attributes of the element.
Parameters:
Name Type Description
attributes Object

An object of attribute-value pairs.

If a value in the attributes object is null or undefined, the attribute is removed from the element.

Source:

CLS(className) → {HTMLCollection|NodeList}

Returns a list of the elements within the element with the specified class name.
Alias of Element.getElementsByClassName().

Parameters:
Name Type Description
className String
Source:
Returns:
Type
HTMLCollection | NodeList

A collection of elements with the specified class name.

data() → {Object}

Gets the element's stored data object.

HTML5 data-* attributes are pulled into the stored data object the first time the data property is accessed and then are no longer accessed or mutated (they are stored in a private Firebolt property).

Source:
Returns:
Type
Object

The element's stored data object.

data(key) → {*}

Get the value at the named data store for the element as set by `.data(key, value)` or by an HTML5 data-* attribute.
Parameters:
Name Type Description
key String

The name of the stored data.

The HTML5 data-* attributes are pulled into the stored data object the first time the data property is accessed and then are no longer accessed or mutated (they are stored in a private Firebolt property).

Source:
Returns:
Type
*

The value of the stored data.

data(key, value)

Stores arbitrary data associated with the element.
Parameters:
Name Type Description
key String

A string naming the data to set.

value *

Any arbitrary data to store.

When setting data properties (either input ones or those pulled from HTML5 data- attributes), Firebolt will camelize dashed key names. For example, when pulling a data- attribute called data-foo-bar, Firebolt will add the data to the element's stored data object with the key fooBar.

Source:

data(obj)

Stores arbitrary data associated with the element.
Parameters:
Name Type Description
obj Object

An object of key-value pairs to add to the element's stored data.

When setting data properties (either input ones or those pulled from HTML5 data- attributes), Firebolt will camelize dashed key names. For example, when pulling a data- attribute called data-foo-bar, Firebolt will add the data to the element's stored data object with the key fooBar.

Source:

empty()

Removes all of the element's child nodes.

Source:
Example
// HTML (before)
// <div id="mydiv">
//   <span>Inside Span</span>
//   Some Text
// </div>

// JavaScript
$ID('mydiv').empty();

// HTML (after)
// <div id="mydiv"></div>

find(selector) → {NodeList}

Gets the descendants of the element, filtered by a selector.

Note: The main difference between when this function and Element#querySelectorAll() (or Firebolt's short form Element#QSA()) is that in this function, the selector is evaluated with the current element as the root of the selection (as opposed to the document). This can be seen in the example below.

Parameters:
Name Type Description
selector String

A CSS selector string.

Source:
Returns:
Type
NodeList
Example

Comparing Element#querySelectorAll() and Element#find()

/// HTML
// <div id="test">
//   <b>Hello</b>
// </div>

var testDiv = $$('test');
testDiv.querySelectorAll('div b'); // -> [<b>Hello</b>]
testDiv.find('div b'); // -> []
testDiv.find('b');     // -> [<b>Hello</b>]

find(matcher) → {NodeCollection}

Gets the descendants of the element, filtered by a collection of elements or a single element.

Parameters:
Name Type Description
matcher Element | Array.<Element>

A collection of elements or a single element used to match descendant elements against.

Source:
Returns:
Type
NodeCollection

html() → {String}

Gets the element's inner HTML.

Source:
Returns:
Type
String

The element's inner HTML.

html(htmlString)

Sets the element's inner HTML.

ProTip: Quite often, this function is used to set the text contents of elements. However, if the text being set does not (or should not) contain any actual HTML, the Node#text() function should be used instead as it will be faster and also prevent unwanted HTML from being injected into the page.

Parameters:
Name Type Description
htmlString String
Source:

matches(selector) → {Boolean}

Determines if the element matches the specified CSS selector.

Parameters:
Name Type Description
selector String

A CSS selector string.

Source:
Returns:
Type
Boolean

true if the element matches the selector; else false.

prop(property) → {?}

Gets the value of the element's specified property.

Parameters:
Name Type Description
property String

The name of the property who's value you want to get.

Source:
Returns:
Type
?

The value of the property being retrieved.

prop(property, value)

Sets the specified property of the element.

Parameters:
Name Type Description
property String

The name of the property to be set.

value *

The value to set the property to.

Source:

prop(properties)

Sets the specified properties of the element.

Parameters:
Name Type Description
properties Object

An object of property-value pairs to set.

Source:

QS(selector) → {Element}

Returns the first element within the element that matches the specified CSS selector.
Alias of Element.querySelector().

Parameters:
Name Type Description
selector String
Source:
Returns:
Type
Element

QSA(selector) → {NodeList}

Returns a list of the elements within the element that match the specifed CSS selector.
Alias of Element.querySelectorAll().

Parameters:
Name Type Description
selector String
Source:
Returns:
Type
NodeList

A list of selected elements.

removeAttr(attribute)

Removes the specified attribute from the element.

Parameters:
Name Type Description
attribute String

The name of the attribute to remove.

Source:

removeData(name)

Removes a previously stored piece of Firebolt data.
When called without any arguments, all data is removed.

Parameters:
Name Type Argument Description
name String <optional>

The name of the data to remove.

Source:

removeData(list)

Removes previously stored Firebolt data.
When called without any arguments, all data is removed.

Parameters:
Name Type Argument Description
list Array | String <optional>

An array or space-separated string naming the pieces of data to remove.

Source:

removeProp(propertyName)

Removes the specified property from the element.

Parameters:
Name Type Description
propertyName String

The name of the property to remove.

Source:

TAG(tagName) → {HTMLCollection|NodeList}

Returns a list of the elements within the element with the specified tag name.
Alias of Element.getElementsByTagName().

Parameters:
Name Type Description
tagName String
Source:
Returns:
Type
HTMLCollection | NodeList

A collection of elements with the specified tag name.