# Tutorial: Constructor

Go to definition

A jLight collection can be constructed using a variety of inputs.

When invalid input is provided or no elements matching the selector are found an empty collection is returned.

- Element selection
- Element creation
- DOM ready
- Monadic structure

### Element selection

Let's assume the following html structure

    <div id="one" class="class-name" data-type="one"></div>

    <section class="my-section">
      <div id="two" class="class-name" data-type="two"></div>
    </section>

We can us all valid css selectors

    import $ from 'jlight'; // Will be omitted in further tutorials

    let $foo; // All jLight collections in this tutorial are prefixed with the $ symbol to easily identify them

    $foo = $('div'); // #one, #two
    $foo = $('#one'); // #one
    $foo = $('.class-name'); // #one, #two
    $foo = $('[data-type]'); // #one, #two
    $foo = $('[data-type="my-type"]'); // #one
    $foo = $('section div'); // #two
    $foo = $('.my-section .class-name'); // #two

### Element creation

We can easliy create new elements by just passing html to the constructor

    let $foo;

    // All these create a div element
    $foo = $('<div>');
    $foo = $('<div/>');
    $foo = $('<div />');
    $foo = $('<div></div>');

    // It is possible to nest tags, all necessary elements wil be created
    $foo = $('<section><div></section>');
    $foo = $('<div><strong>I am strong!</strong></div>');

    // HTMLElements, HTMLCollections an NodeLists are supported as well
    $foo = $(document.querySelector('#one'));
    $foo = $(document.querySelectorAll('div'));
    $foo = $(document.getElementById('#two'));
    $foo = $(document.getElementsByTagName('div'));

    // It is also possible to get a jLight element from the document or the window
    // These elements have a greatly reduced set of functions though

    // The full list of the supported functions:
    // - on
    // - off
    // - trigger
    // - innerWidth
    // - innerHeight
    // - outerWidth
    // - outerHeight
    // - scrollTop
    // - scrollLeft
    // - scrollTo

    $foo = $(document);
    $foo = $(window);

### DOM ready

A function passed to the constructor will be executed when the DOM content has finished loading or immediately if that is already the case.

A jLight element of the document will be returned.

    $(() => {
      // ...
    });

    const myFunction = () => {
      // ...
    };

    $(myFunction);

### Monadic structure

Almost all of jLights instance methods behave monadic.

They don't return the current instance but a new one, meaning that the collection at the top of the method chain won't be modified.

Refer to the docs to see which methods return an object of type `jLight` to see where you can make use of this.

    $('div')
      .addClass('new-class')
      .prepend('<strong>I am strong!</strong>')
      .attr('data-type', null)
      .fadeOut()
      // ...