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>










                                

                                    Contribute!

                                    
 Contribute to this article by sharing your opinion on Twitter:

                                    

                                        
                                    

                                


                                

                                    Unlimited Automated Page Speed Monitoring & Tracking.
                                    
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
                                

                            


                                                    

                    

                    

                        
                    

                

                    

    






	
	




















Privacy Policy