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>
Use SpeedFactor to track your website. It’s simple and reliable.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started
