Posts

Showing posts with the label querySelector

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 .fadeIn([duration],[callBack])

  javascript : DomElement .fadeIn( [duration],[callBack] ) Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : hide 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.fadeIn( [duration],[callBack] ) DOMNodeList.fadeIn( [duration],[callBack] ) HTMLCollection.fadeIn( [duration],[callBack] ) Usase: document.getElementById('firstDiv').fadeIn() it hides the div having id firstDiv with fade animation and return firstDiv element document.getElementsByTagName('div').fadeIn() the getElementsByTagName selects all div and fadeIn() method hides all divs with fade animation and return getElementsByTagName result for further processing you do not nee...
Post a Comment
Read more

javascript : domElement .hasClass( className )

  javascript : domElement .hasClass( className ) Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : return true/false if givent className exist with element classList. In case of elementsList it check first element's classList and return true/false. Syntax: DOMElement.hasClass(' className ') DOMNodeList.hasClass(' className ') HTMLCollection.hasClass(' className ') Usase: document.getElementById('firstDiv').hasClass(' myClass ') it check the div having id firstDiv classList contains className 'myClass' if contains then return true other wise false document.getElementsByTagName('div').hasClass(' myClass ') the getElementsByTagName selects all div and hasClass() method check class name 'myClass' in first div's classList for existance and return true/false document.getElementsByClassName('FirstDi...
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 : domElement.getComputedStyle()

  javascript : domElement.getComputedStyle() Target: Applicable with any DOM Element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll select etc. In case of DOM NodeList first Node Element is processed for getComputedStyle. Description : This extension method is exactly window.getComputedStyle(domElement). It return list of all style attribute applicable to that domElement. Note: when list of element passed then it reutrn first element's style attribute list. Syntax: DOMElement.getComputedStyle() DOMNodeList.getComputedStyle() HTMLCollection.getComputedStyle() Usase: document.getElementById('firstDiv').getComputedStyle() It return  CSSStyleDeclaration { } document.querySelector('#firstDiv').getComputedStyle() It return  CSSStyleDeclaration { } document.querySelectorAll('ul').getComputedStyle() It return  CSSStyleDeclaration { } document.body.getComputedStyle().width It return  "1366px" do...
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

javascript : DomElement .text()

  javascript : DomElement .text() Target: Applicable with any DOM element having attribute innerText. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll In case of DOM NodeList first Node Element is processed for get innerText. Description : get innerText of DOM element. Syntax: DOMElement.text() DOMNodeList.text() HTMLCollection.text() Usase: document.getElementById('firstDiv').text() it returns the innerText of firstDiv, that is " welcome " document.querySelector('#firstDiv').text() it returns the innerText of firstDiv, that is " welcome " document.querySelectorAll('div').text() it returns the innerHTML of first div's, that is " welcome " document.getElementsByTagName('div').text() it returns the innerHTML of first div's, that is " welcome " Download MYJS.js MyJs is a collection of java script extension methods that enhances the JavaScript obj...
Post a Comment
Read more

javascript : DomElement .html(html)

  javascript : DomElement .html( html ) Target: Applicable with any DOM element having attribute innerHTML. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll In case of DOM NodeList first Node Element is processed for get/set. Description : get/set innerHTML of DOM element. if html is passed then it set the innerHTML and return element itself, otherwise return innerHTML of element. Note: after setting the innerHTML of element it return the element itself. Syntax: DOMElement.html( 'html' ) DOMNodeList.html( 'html' ) HTMLCollection.html( 'html' ) Usase: document.getElementById('firstDiv').html("welcome") it sets the innerHTML of div having id firstDiv with html " welcome " and return firstDiv element document.querySelector('#firstDiv').html("welcome") it sets the innerHTML of div having id firstDiv with innerHTML " welcome " and return firstDiv element...
Post a Comment
Read more

javascript : DomElement .val(value)

  javascript : DomElement .val( value ) Target: Applicable with any DOM input object having attribute value. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll In case of DOM NodeList first Node Element is processed for get/set. Description : get/set value attribute of input element. if value is passed then it set the value and return element itself, otherwise return value of element. Note: after setting the value of input control it return the control itself. Syntax: DOMInputElement.val( 'value' ) DOMInputNodeList.val( 'value' ) HTMLCollection.val( 'value' ) Usase: document.getElementById('txtName').val("Govind Gupta") it sets the value of textbox with value " Govind Gupta " and return textbox element document.querySelector('#txtName').val("Govind Gupta") it sets the value of textbox with value " Govind Gupta " and return textbox element document.get...
Post a Comment
Read more

javascript : .closest(cssSelector)

  javascript : .closest( cssSelector ) Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll select etc. Description : it search for closest parent element that matched with the selector. It traverse parentNode to parentNode untill matched with selector if no any parent element matched then it return empty array of nodeElementsList instead of null so nested statement not generate error due to null reference. Note : it start searching of selector from the element itself. That's mean if the element matches with the selector it return itself. Syntax: DOMElement.closest( cssSelector ) DOMNodeList.closest( cssSelector ) HTMLCollection.closest( cssSelector ) Usase: document.getElementById('firstDiv').closest( 'form' ) it search for firstDiv Element's parent form. document.getElementsByTagName('div').closest( 'form' ) the getElementsByTagName selects all div a...
Post a Comment
Read more