minimal-element-class v2.0.1

Element

Base class for minimal elements.

Installation

$ npm install minimal-element-class --save

Usage

To create a new element,

var Element = require( 'minimal-element-class' );

var element = new Element();

The element instance has the following methods...

element.attr( [name, value] )

This method is a setter/getter. If no arguments are provided, returns an object containing all attribute-value pairs. If only a name is provided, returns the corresponding attribute value. If the attribute does not exist, returns undefined. If a name and value are provided, sets the attribute value.

// Set an attribute value:
element.attr( 'class', 'beep' );
element.attr( 'id', 'boop' );

// Get the `class` attribute's value:
element.attr( 'class' );
// Returns 'beep'

// Get all attribute value pairs:
element.attr();
// Returns {'class':'beep','id':'boop'}

Note: to set an attribute value, the value must be either a string, boolean, or number.

element.selfClosing()

Returns a boolean indicating if an element is a self-closing element.

element.selfClosing();

element.append( element )

Appends another element (Element or Text instance) to an element. If the element is a self-closing element, this method will throw an Error.

var el = new Element();

element.append( el );

When an element is serialized, nested elements are serialized in the order in which they were appended.

element.toString()

Serializes an element as a string.

element.toString();
// Returns '<tag>...</tag>'

Examples

// Create a class which inherits from Element...

function HTMLElement( name ) {
	Element.call( this );
	this._name = name;
	this._selfClosing = false;
	return this;
}

HTMLElement.prototype = Object.create( Element.prototype );

HTMLElement.prototype.constructor = HTMLElement;


// Create a new parent container...

var container = new HTMLElement( 'div' );
container.attr( 'class', 'container' );

// Build other components...

var col = new HTMLElement( 'div' );
col.attr( 'class', 'column' );

var h1 = new HTMLElement( 'h1' );
h1.attr( 'class', 'title' )
	.attr( 'id', 'title' );

var p = new HTMLElement( 'p' );
p.attr( 'class', 'content' );

// Create the document structure...

container.append( col );
col.append( h1 )
	.append( p );

// Serialize to string...

console.log( container.toString() );
// Returns: '<div class="container"><div class="column"><h1 class="title" id="title"></h1><p class="content"></p></div></div>'

To run the example code from the top-level application directory,

$ node ./examples/index.js

Notes

Inheritance

Classes which inherit from the Element class should set the name and selfClosing private properties. Unless the serialization method toString() is overwritten, both of these properties are used when serializing an element instance.

function HTMLElement( name ) {
	Element.call( this );
	this._name = name;
	this._selfClosing = false;
	return this;
}

HTMLElement.prototype = Object.create( Element.prototype );

HTMLElement.prototype.constructor = HTMLElement;

Tests

Unit

Unit tests use the Mocha test framework with Chai assertions. To run the tests, execute the following command in the top-level application directory:

$ make test

All new feature development should have corresponding unit tests to validate correct functionality.

Test Coverage

This repository uses Istanbul as its code coverage tool. To generate a test coverage report, execute the following command in the top-level application directory:

$ make test-cov

Istanbul creates a ./reports/coverage directory. To access an HTML version of the report,

$ open reports/coverage/lcov-report/index.html

License

MIT license.

Copyright

Copyright © 2014. Athan Reines.