# js2uix > js2uix DOM module Latest version **1.0.15** (published 2020-07-13) · MIT license · 0 weekly downloads ## Install ```sh npm install js2uix pnpm add js2uix yarn add js2uix bun add js2uix ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.15 | | Published | 2020-07-13 | | First published | 2020-07-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 338.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | js2uix | | Maintainers | js2uix | | Keywords | javascript, js2uix, libray | ## Links - npm: https://www.npmjs.com/package/js2uix - Repository: https://github.com/js2uix/js2uix - Homepage: http://js2uix - Issues: https://github.com/js2uix/js2uix/issues - npm.io page: https://npm.io/package/js2uix ## Recent versions - 1.0.15 (latest) — 2020-07-13 - 1.0.14 — 2020-07-10 ## README js2uix === js2uix is a Javascript Module that combines Dom Control function and Component production function. Simple implementation of the existing Dom Control function, and additional component production is possible. ## js2uix (js2uix-dom-control) 
 * Name        : js2uix
 * Developer   : JH.Yu
 * Email       : deshineplus@icloud.com
 * Language    : Javascript(ES5)
 * Copyright   : 2018 JH.Yu (js2uix)
 * GitHub      : https://github.com/js2uix/js2uix
 * License     : https://github.com/js2uix/js2uix/blob/master/LICENSE
 
 * Create Dom Control Module (html dom control, component, ui creation tool)
 1. js2uix()
 2. js2uix.Component()
 3. js2uix.UI
 
 [Notice] Does not support IE 8 and lower versions!!
## 1. Features ### 1. js2uix('selector'): default selector **js2uix(param): The value of the parameter is'string','object','function'** 
Example of use:
import js2uix from 'js2uix';
or
const js2uix = require('js2uix');


js2uix('div') : Select the entire div tag.
js2uix('.class') : Select Node with class name.
js2uix('#id') : Select Npde with id name.
js2uix('<div></div>') : Create a new div tag.
js2uix(callback) : In case of callback function, callback can be executed after html load is completed.
### 2. js2uix('selector).method().method() : Method chaining **js2uix selector basically uses built-in functions through method chaining.** 
Example of use:
js2uix('div').addClass('test1').removeClass('test1')
### 3. js2uix.Component(): Create a component object **Independent component object can be created through the js2uix module.** **Component objects for each function can be created/managed, and screens can be rendered by combining each object.** 
Example of use:
[Content.js]
    var Content = js2uix.Component({
        super : function(){
            this.state = {
                name : 'js2uix'
            }
        },
        onClick : function(){
            this.setState({
                name : 'js2uix-component'
            })
        },
        render : function(){
            var onClick = this.onClick.bind(this);
            var test = js2uix(
                '<section class="content">' +
                '<div class="text '+this.state.name+'">'+this.props.content+'!</div>' +
                '</section>'
            );
            test.addEvent('click', onClick);
            return (test);
        }
    });
    js2uix.Export('Content', Content);

Example of use:
[index.js]
    var content = js2uix.Import('Content');
    js2uix.Render(test.props({'content' : 'js2uix'}), '#root');
## 2. Function (Dom Control) **addClass: Set the class name of the selected Dom.** 
Example of use:
js2uix('div').addClass('test');
js2uix('div').addClass('test1 test2 test3');
**addEvent: Set event on selected Dom** 
Example of use:
js2uix('div#test').addEvent('click', function(){ ... });
js2uix('div#test').addEvent({
    'click' : function(){...},
    'mouseover' : function(){...}
});
**addId: Set id name of selected Dom.** 
Example of use:
js2uix('div').addId('test');
**after: Insert Dom after selected Dom.** 
Example of use:
js2uix('div').after(js2uix('.test1'));
js2uix('div').after('<div>test</div>');
js2uix('div').after('test');
**ajaxForm: ajax communication using Dom of selected form type.** 
Example of use:
js2uix('form').ajaxForm({
    url : '/ajax/api',
    method : 'POST',
    data : {title : 'title'},
    success : function(){},
    error : function(){}
});
**animate: Dynamic processing effect using the selected Dom.** 
Example of use:
js2uix('div').animate({
    width : 100,
    height : 200
}, 250, function(){
    console.log('animate end!')
});
**append: Insert Dom at the end of the selected Dom.** 
Example of use:
js2uix('div').append(js2uix('.test1'));
js2uix('div').append('<div>test</div>');
**before: Insert Dom before the selected Dom.** 
Example of use:
js2uix('div').before(js2uix('.test1'));
js2uix('div').before('<div>test</div>');
js2uix('div').before('test');
**children: Check the child Dom in the selected Dom.** 
Example of use:
js2uix('div').children();
js2uix('div').children('.child');
**clone: Copy selected Dom.** 
Example of use:
var newDiv = js2uix('div').clone();
var deepDiv = js2uix('div').clone(true);
**createDom: Create new Dom.** 
Example of use:
var newNode = js2uix.createDom('div', {
    className : 'test',
    idName : 'ids',
    attributes : {
        'data-id' : 'test11',
        'data-name' : 'testName'
    },
    styles : {
        'width' : 100,
        'height' : 200,
        'backgroundColor' : 'red'
    },
    content : 'hello world'
});
console.log( newNode ); //div node
**css: Set style of selected Dom** 
Example of use:
js2uix('div').css('color', 'red');
js2uix('div').css({
    'color' : 'red',
    'z-index' : 1
});
**empty: Delete all child elements of the selected Dom.** 
Example of use:
js2uix('div').empty();
**extend: merge/inherit objects** 
Example of use:
var object1 = {test1:1, test2:2}
var object2 = {test1:1, test2:2}
js2uix.extend({}, object1);
js2uix.extend(object1, object2);
**fadeIn: Flashing of selected Dom.** 
Example of use:
js2uix('div').fadeIn();
js2uix('div').fadeIn(250);
**fadeOut: Flashing of selected Dom.** 
Example of use:
js2uix('div').fadeOut();
js2uix('div').fadeOut(250);
**find: Find a specific Dom within the selected Dom** 
Example of use:
js2uix('div').find('.test1');
js2uix('div.name').find('div');
**firstNode: Select the first Dom from the selected Dom** 
Example of use:
var first = js2uix('div').firstNode();
**getAttr: Check the attribute of the selected Dom** 
Example of use:
js2uix('div').getAttr('data-name');
js2uix('div').getAttr();
**hasChild: Check if the selected Dom has a specific child** 
Example of use:
js2uix('div').hasChild( '.test1' );
**hasClass: Check if the selected Dom has a specific class name** 
Example of use:
js2uix('div').hasClass( 'test1' );
**hasId: Check if the selected Dom has a specific id name** 
Example of use:
js2uix('div').hasId( 'test1' );
**hasParents: Identify parents with a specific name among the parents of the selected Dom** 
Example of use:
js2uix('div').hasParents( '.parent' );
**height: Set and check the height value of the selected Dom** 
Example of use:
js2uix('div').height( 200 );
var height = js2uix('div').height();
console.log(height) //200
**hide: Display property of selected Dom none** 
Example of use:
js2uix('div').hide();
**html: Set and return child elements of the selected Dom** 
Example of use:
var html = js2uix('div').html();
js2uix('div').html('test');
js2uix('div').html('
test
');
**index: Check the index information of the selected Dom** 
Example of use:
js2uix('li').index();
**lastINode: Select the last Dom among the selected Dom** 
Example of use:
var last = js2uix('div').lastINode();
**left: Set and check the left value of the selected Dom** 
Example of use:
js2uix('div').left( 200 );
var height = js2uix('div').left();
console.log(left) //200
**loaded: executed after all html is loaded** 
Example of use:
js2uix.loaded(function(){
    console.log('load complete');
});
js2uix(function(){
    console.log('load complete');
});
**loop: Apply the loop of the selected Dom or specific object** 
Example of use:
js2uix('div').loop(function(num, node){
    console.log(num, node);
});

var doms = js2uix('div');
js2uix.loop(doms, function(num, node){
    console.log(num, node);
});

var array = [1,2,3,4];
js2uix.loop(array, function(num, value){
    console.log(num, value);
})
**nextNode: Next selection of the selected Dom** 
Example of use:
var next = js2uix('div.test').nextNode();
console.log(next);
**not: not select of selected Dom** 
Example of use:
var item = js2uix('div.test').not('.test2');
console.log(item);
**Offset: Check the offset of the selected Dom** 
Example of use:
var offset = js2uix('div.test').offset();
console.log(offset);
**parent: Check the parent directly above the selected Dom** 
Example of use:
var parent1 = js2uix('div.test').parent();
var parent2 = js2uix('div.test').parent('.parent');
console.log(parent1);
console.log(parent2);
**parents: Confirm a specific parent among selected Dom parents** 
Example of use:
var parent = js2uix('div.test').parents('.parent');
console.log(parent);
**prepend: Insert Dom at the beginning of the selected Dom** 
Example of use:
js2uix('div.target').prepend(js2uix('div.test'));
js2uix('div.target').prepend('<div>test</div>');
**prevNode: Previous selection of the selected Dom** 
Example of use:
var prev = js2uix('div.test').prevNode();
console.log(prev);
**remove: Delete selected Dom** 
Example of use:
js2uix('div.test').remove();
**removeAttr: Delete the specific attribute value of the selected Dom** 
Example of use:
js2uix('div.test').removeAttr('data-id');
**removeClass: Delete specific class value of selected Dom** 
Example of use:
js2uix('div.test').removeClass('test');
**removeEvent: Remove selected Dom event** 
Example of use:
var addEventHandler = function(){...};
js2uix('div#test').removeEvent();
js2uix('div#test').removeEvent('click');
js2uix('div#test').removeEvent('click.eventName');
js2uix('div#test').removeEvent('click', addEventHandler);
**removeId: Delete the specific id value of the selected Dom** 
Example of use:
js2uix('div#test').removeId('test');
**replace: Replace the selected Dom with a specific Dom or a generated Dom** 
Example of use:
js2uix('div#test').replace(js2uix('div.new'));
**setAttr: Set attribute of selected Dom.** 
Example of use:
js2uix(select).addAttr('data-name', test);
js2uix(select).addAttr({
    'data-name' : test,
    'data-value' : 100
});
**show: display property block of the selected Dom** 
Example of use:
js2uix('div#test').show();
**siblingNodes: Check for adjacent sibling elements except for the selected Dom** 
Example of use:
js2uix('div#test').siblingNodes();
**text: Set and check the text of the selected Dom** 
Example of use:
js2uix('div#test').text('test');
var textValue = js2uix('div#test').text();
console.log(textValue)
**top: Set and check the top of the selected Dom** 
Example of use:
var top = js2uix('div#test').top();
console.log(top);
js2uix('div#test').top(200);
**value: Set and check the value of Dom of the selected form** 
Example of use:
var value = js2uix('input').value();
js2uix('input').value('test');
**width: Set and check the width of the selected Dom** 
Example of use:
var width = js2uix('div#test').width();
console.log(width);
js2uix('div#test').width(200);
--- _Source: https://npm.io/package/js2uix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._