≡

❌ Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland
All Content Copyright ©2018
getButterfly

JSquared Demo – Core

Demo: Core

Please ensure you read the JSquared documentation for full details on using each JSquared method and object described below.

getElementsByTagNames

var nodes = document.getElementsByTagNames("input, textarea");

var lists = document.getElementById("myElement").getElementsByTagNames( ["ul", "ol", "dl"] );

We are all familiar with the getElementsByTagName method on a node, but I am sure sometimes you just want to get elements of various different tag types. Now you can with one simple method call. This method returns a simple array.

getElementsByClassName

var nodes = document.getElementsByClassName("myClass");

var nodes = document.getElementsByClassName({ cssClass: "myClass", tags: "div,h2" });

var nodes = document.getElementsByClassName({ cssClass: "myClass", tags: ["span", "a"], callback: function() {
    console.log(this.tagName);
}});

The getElementsByClassName method is available in all browsers. For those that dont support it, JSquared will add support through this method. The JSquared method supports the standard interface for the DOM method but also extends it so you can supply a class name, a list of tag names and also a callback function. The callback function will be called when each matching node is found. This can help performance as you then wont need to loop through the returned array of nodes again.

createElement

JSquared extends the standard createElement method allowing you to pass an object in as a second parameter. This object can contains items which will get added to the new node. Other than this enhancement, the interface is exactly as per the standard DOM method.

HTML before

<body>
    <div id="myDIV"></div>
</body>

JavaScript

var myElement = document.createElement("div", {
    cssClass: "myClass",
    id: "newDIV",
    innerHTML: "This is my element"
});

document.getElementById("myDIV").appendChild(myElement);

HTML after

<body>
    <div id="myDIV"><div id="newDIV" class="myClass">This is my element</div></div>
</body>

setStyle

The setStyle method allows you to add a CSS style to a node without worrying about browser oddities. It also allows you to use a JSquared cssColor object to set colours meaning better compatability.

HTML before

<div id="myId"></div>

JavaScript

document.getElementById("myID").setStyle("display", "inline");

HTML after

<div id="myID" style="display: inline"></div>

getStyle

HTML

<div id="myID" style="display: inline"></div>

JavaScript

// returns "inline"
var style = document.getElementById("myID").getStyle("display");

The JSquared getStyle method will get the specified style using the best possible method for the current browser and in the best possible way. If its a colour value that you want, it will return a JSquared cssColor object allowing better compatability with the rest of JSquared.

APPENDCHILD VIA AJAX

HTML BEFORE

<body>

</body>

JAVASCRIPT

The response from the AJAX request is an HTML snippet that is a div element with some basic text inside “here it is”.

var ajax = new J2.AJAX({URL: "getNode.html"});

document.body.appendChild(ajax);

HTML AFTER

<body>

    <div>here it is</div>

</body>

MOVETO

HTML BEFORE

<div>

    <span id="source">node to move</span>

</div>

<div id="target">

    <span id="existingNode1"></span>

    <span id="existingNode2"></span>

    <span id="existingNode3"></span>

</div>

JAVASCRIPT

document.getElementById("source").moveTo(document.getElementById("target"));

HTML AFTER

<div></div>

<div id="Div1">

    <span id="Span1"></span>

    <span id="Span2"></span>

    <span id="Span3"></span>

    <span id="Span4">node to move</span>

</div>

With the moveTo method, it becomes very easy to move elements around on the page. You can even specify the elements position in the list of children of its new parent using the J2.Element.nodePosition object.

ADDELEMENTTOOL

Whilst JSquared comes with an extensive array of tools for manipulating nodes with each tool being added as a method on each node selected through one of the JSquared methods, you may wish to add your own tools such as this one which will set the colour of any node to be red. When adding the element tool, all nodes previously selected and those selected afterwards using a JSquared method will have the new element tool.

BIND A NEW TOOL TO THE ELEMENTS

var highlightError = function() {

    this.setStyle("color", "red");

    return this;

J2.addElementTool("highlightError", highlightError);

HTML BEFORE

<div id="myID"></div>

START USING THE NEW METHOD ON HTML ELEMENTS

document.getElementById("myID").highlightError();

HTML AFTER

<div id="myID" style="color: red"></div>

My Battle Tested Recommendations

Disclaimer: These recommendations contain affiliate links.

Documentation

eCards Documentation
requires membership, applies to 3.5.0+
Lighthouse Documentation
requires membership, applies to 2.2.0+
ImagePress Documentation
requires membership, applies to 6.0.0+
Noir UI Documentation
requires membership, applies to 3.1.0+
Bug Report/Feature Request
requires membership

JSquared Demo – Core

Demo: Core

getElementsByTagNames

getElementsByClassName

createElement

HTML before

JavaScript

HTML after

setStyle

HTML before

JavaScript

HTML after

getStyle

HTML

JavaScript

APPENDCHILD VIA AJAX

HTML BEFORE

JAVASCRIPT

HTML AFTER

MOVETO

HTML BEFORE

JAVASCRIPT

HTML AFTER

ADDELEMENTTOOL

BIND A NEW TOOL TO THE ELEMENTS

HTML BEFORE

START USING THE NEW METHOD ON HTML ELEMENTS

HTML AFTER

My Battle Tested Recommendations

Documentation

Useful tutorials