select-js

Getting Started

To use select-js, you can either include the script from a CDN or install it via npm.

Using a CDN

<script src="https://cdn.jsdelivr.net/npm/@shanto-islam/select-js/dist/select-js.min.js"></script>

Using npm

$ npm install @shanto-islam/select-js

Then, include it in your project:

<script src="node_modules/@shanto-islam/select-js/dist/select-js.min.js"></script>

Basic Usage

Here are some examples of how to use the select-js library:

Selecting Elements

Select an element or elements from the DOM:

const element = select('div');  // Selects the first <div> element
const elements = select('.class-name');  // Selects all elements with class 'class-name'

Manipulating Elements

Once you've selected elements, you can manipulate them using the following methods:

.addClass(className)

Adds a class to the selected element(s).

select('p').addClass('highlight');  // Adds 'highlight' class to all <p> elements

.removeClass(className)

Removes a class from the selected element(s).

select('.highlight').removeClass('highlight');  // Removes 'highlight' class from all elements

.toggleClass(className)

Toggles a class on the selected element(s).

select('p').toggleClass('active');  // Toggles 'active' class on all <p> elements

.setText(text)

Sets the text content of the selected element(s).

select('#title').setText('New Title');  // Sets the text of the element with id 'title'

.on(event, handler)

Adds an event listener to the selected element(s).

select('button').on('click', () => alert('Button clicked!'));

.setAttribute(name, value)

Sets an attribute for the selected element(s).

select('img').setAttribute('alt', 'Image description');

.removeAttribute(name)

Removes an attribute from the selected element(s).

select('img').removeAttribute('alt');

.getAttribute(name)

Gets the value of an attribute from the first selected element.

const altText = select('img').getAttribute('alt');

.addStyle(style)

Adds inline styles to the selected element(s).

select('p').addStyle({ color: 'red', fontSize: '20px' });

.removeStyle(styleName)

Removes a specific inline style from the selected element(s).

select('p').removeStyle('color');

.append(html)

Appends HTML content to the selected element(s).

select('#list').append('<li>New Item</li>');

.prepend(html)

Prepends HTML content to the selected element(s).

select('#list').prepend('<li>First Item</li>');

.remove()

Removes the selected element(s) from the DOM.

select('.temp').remove();

.toggleVisibility()

Toggles the visibility of the selected element(s).

select('.hidden-element').toggleVisibility();

.replaceWith(html)

Replaces the selected element(s) with new HTML content.

select('#old-element').replaceWith('<div id="new-element">New Content</div>');

Chaining Methods

Here’s an example of chaining multiple methods to perform several operations on selected elements:

// Select elements and chain methods for manipulation
select('.my-class')
.addClass('active')      // Adds 'active' class to elements with 'my-class'
.setText('Hello, World!') // Sets the text content to 'Hello, World!' for selected elements
.on('click', () => alert('Clicked!')); // Adds a click event listener that shows an alert

// Chaining multiple manipulations on selected elements
select('.item')
.addClass('highlighted')  // Adds 'highlighted' class to all elements with 'item' class
.setAttribute('data-active', 'true')  // Sets a data attribute for selected elements
.append('New Element')  // Appends a new span element
.addStyle({ color: 'blue', fontWeight: 'bold' })  // Adds multiple inline styles
.toggleVisibility()  // Toggles the visibility of selected elements
.on('mouseover', () => console.log('Mouseover Event Triggered'));  // Adds a mouseover event listener

// A more complex example with chaining
select('#menu')
.addClass('open')  // Adds 'open' class to the menu
.setText('Menu Opened')  // Updates the menu text
.addStyle({ backgroundColor: 'green' })  // Changes the background color
.on('click', () => select('#menu').removeClass('open').setText('Menu Closed'));  // Toggles menu state on click

Selecting All Elements (`selectAll`)

To select all matching elements within a context, use the `selectAll` function:

const allItems = selectAll('li');  // Selects all <li> elements
const itemsInDiv = selectAll('li', document.querySelector('#container'));  // Selects all <li> elements inside #container

This function returns an array of elements, allowing you to use array methods like `.forEach()`.

Error Handling

The `select-js` library includes built-in error handling to provide warnings and errors for incorrect usage: