Posts

Showing posts with the label DomElementList

javascript : Object.isNodeList

  javascript : Object .isNodeList Target: Applicable with any javascript  Object  Variable  that holds DOM Elements List. Description : When an object holds an html domElementsList/NodeList/htmlCollection then it return  true  otherwise  undefined . basically it is defined in NodeList/htmlCollection prototype. Many time in programming we face a problem that an object variable holds DomElementList or other object structure then it help us. Before writing the code of DomElementList manipulation we can check whether a variable holds domElementsList/NodeList/htmlCollection or not. Note: It is an property of DomElementsList that is defined in NodeList/htmlCollection Prototype. It is useful to check an object variable is DomElementsList or any other type. When we check the typeof(object_variable) it return 'object' not 'NodeList/htmlCollection'. Syntax: Object .isNodeList return  true  when object hold's NodeList/htmlCollection otherwise  unde...
Post a Comment
Read more

javascript domElement .attr(attributeName,[attributeValue])

  javascript domElement .attr( attributeName,[attributeValue] ) Target: Get/Set DOM element attribute. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll In case of DOM NodeList first Node Element is processed for get and set to all elements. Description : get/set attribute of DOM element. if attributeValue is passed then it set the attribute and return element itself, otherwise return attribute of element. If attributeValue is blank string then it remove attribute. Note: after setting the attribute of DOM elements it return the element/elementList. Syntax: DOMElement.attr( 'attributeName',[attributeValue] ) DOMNodeList.attr( 'attributeName',[attributeValue] ) HTMLCollection.attr( 'attributeName',[attributeValue] ) Usase: document.getElementById('txtName').attr("maxlength",10) it sets the maxlength of textbox with 10 character and return textbox element document.getElementById('txtNam...
Post a Comment
Read more

javascript : domElementList .each( function )

  javascript : domElementList .each( fn ) Target: Applicable with any DOM element / elements list. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : executes the function in loop with each element in loop and return elements list. Note: loop function this represent individual element in list. Syntax: DOMElement.each(function(){  /*this element related statement*/  }) DOMNodeList.each(function(){  /*this element related statement*/  }) HTMLCollection.each(function(){  /*this element related statement*/  }) Usase: document.getElementById('firstDiv').each(function(){this.style.color='red';}) it executes the function passed and set firstDiv element's style color red. document.getElementsByTagName('div').each(function(){this.style.color='red';}) It loop for each div element and executes function for every div and set it's color style to red. document.getElementsByClassName('Fi...
Post a Comment
Read more

javascript : domElement .fadeOut([duration],[callBack])

  javascript : domElement .fadeOut( [duration],[callBack] ) Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : Shows selected element/elements list with fade animation. duration : optional if not passed then default is 300ms. callBack :optional function executes when animation completes. Note: if callBack function is passed then after animation callback method will initiate. Syntax: DOMElement.fadeOut( [duration],[callBack] ) DOMNodeList.fadeOut( [duration],[callBack] ) HTMLCollection.fadeOut( [duration],[callBack] ) Usase: document.getElementById('firstDiv').fadeOut() it shows the div having id firstDiv with fade animation and return firstDiv element document.getElementsByTagName('div').fadeOut() the getElementsByTagName selects all div and fadeOut() method shows all divs with fade animation and return getElementsByTagName result for further processing you do...
Post a Comment
Read more

javascript domElement .toggleClass(className)

  javascript domElement .toggleClass( className ) Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : Toggle givent className with element(s) classList. That's mean if not exists then add and if exist then remove. Note: after toggling class of element/elements list it return itself for further processing. Syntax: DOMElement.toggleClass(' className ') DOMNodeList.toggleClass(' className ') HTMLCollection.toggleClass(' className ') Usase: document.getElementById('firstDiv').toggleClass(' myClass ') it toggle 'myClass' with the div having id firstDiv and return firstDiv element document.getElementsByTagName('div').toggleClass(' myClass ') the getElementsByTagName selects all div and toggleClass() method toggle class name 'myClass' with all divs and return getElementsByTagName result for further processing...
Post a Comment
Read more

javascript : domElement .addClass(className)

  javascript : domElement .addClass( className ) Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : add givent className to element(s) classList. Note: after adding class of element/elements list it return itself for further processing. Syntax: DOMElement.addClass(' className ') DOMNodeList.addClass(' className ') HTMLCollection.addClass(' className ') Usase: document.getElementById('firstDiv').addClass(' myClass ') it add 'myClass' to the div having id firstDiv and return firstDiv element document.getElementsByTagName('div').addClass(' myClass ') the getElementsByTagName selects all div and addClass() method add class name 'myClass' to all divs and return getElementsByTagName result for further processing you do not need to execute selector again. document.getElementsByClassName('FirstDiv').addCl...
Post a Comment
Read more

javascript : dom Elements .toggle()

  javascript : DomElements.toggle() Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : toggle element display style none. Note: after setting the style display of element/elements list it return itself for further processing. Syntax: DOMElement.toggle() DOMNodeList.toggle() HTMLCollection.toggle() Usase: document.getElementById('firstDiv').toggle() it hide/show the div having id firstDiv and return firstDiv element document.getElementsByTagName('div').toggle() the getElementsByTagName selects all div and toggle() method hide/show all divs and return getElementsByTagName result for further processing you do not need to execute selector again. document.getElementsByClassName('FirstDiv').toggle() the getElementsByClassName selects all div having class "FirstDiv" and toggle() method hide/show all divs and return getElementsByClassName result for ...
Post a Comment
Read more

javascript : dom elements .show()

  javascript : DomElements.show() Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : It remove dom element inline display style if currently "none". if after that applicable style is "none" then sets inline style to "block" Note: after setting the style display of element/elements list it return itself according to selector for further processing. Syntax: DOMElement.show() DOMNodeList.show() HTMLCollection.show() Usase: document.getElementById('firstDiv').show() it shows the div having id firstDiv and return firstDiv element document.getElementsByTagName('div').show() the getElementsByTagName selects all div and show() method shows all divs and return getElementsByTagName result for further processing you do not need to execute selector again. document.getElementsByClassName('FirstDiv').show() the getElementsByClassName se...
Post a Comment
Read more

javascript : Dom Elements .hide()

  javascript : DomElements .hide() Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : set dom element style display none. Note: after setting the style display of element/elements list it return itself for further processing. Syntax: DOMElement.hide() DOMNodeList.hide() HTMLCollection.hide() Usase: document.getElementById('firstDiv').hide() it hides the div having id firstDiv and return firstDiv element document.getElementsByTagName('div').hide() the getElementsByTagName selects all div and hide() method hides all divs and return getElementsByTagName result for further processing you do not need to execute selector again. document.getElementsByClassName('FirstDiv').hide() the getElementsByClassName selects all div having class "FirstDiv" and hide() method hides all divs and return getElementsByClassName result for further processing you do no...
Post a Comment
Read more