Posts

Showing posts with the label domelement

javascript : Object.isDomElement

  javascript : Object .isDomElement Target: Applicable with any javascript  Object  Variable  that holds DOM Element . Description : When an object holds an html domElement then it return  true  otherwise  undefined . basically it is defined in DomElement prototype. Many time in programming we face a problem that an object variable holds DomElement or other object structure then it help us. Before writing the code of DomElement manipulation we can check whether a variable holds DomElement or not. Note: It is an property of DomElement that is defined in DomElement Prototype. It is useful to check an object variable is DomElement or any other type. When we check the typeof(object_variable) it return 'object' not 'DomElement/Node'. Syntax: Object .isDomElement return  true  when object hold's DomElement otherwise  undefined Usase: var obj = document.querySelector('div') if(obj.isDomElement){      console.log('Object hold...
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 : domElement .isVisible()

  javascript : domElement .isVisible() Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : return  true  if target element or first element of list is visible other wise  false . Syntax: DOMElement.isVisible() DOMNodeList.isVisible() HTMLCollection.isVisible() Usase: document.getElementById('firstDiv').isVisible() it return true if firstDiv element is visible other wise false document.getElementsByTagName('div').isVisible() the getElementsByTagName selects all div but isVisible() method check for only first div and if it is visible then return true else false. document.getElementsByClassName('FirstDiv').isVisible() the getElementsByClassName selects all div having class "FirstDiv" but isVisible() method consider only first element and return true if it is visible other wise false. document.getElementsByName('FirstDiv').isVisible() the ...
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 .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 .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 .removeClass(className)

  javascript : domElement .removeClass( className ) Target: Applicable with any DOM element. getElementById getElementsByTagName getElementsByClassName getElementsByName querySelector querySelectorAll Description : remove givent className from element(s) classList if exists. Note: after removing class of element/elements list it return itself for further processing. Syntax: DOMElement.removeClass(' className ') DOMNodeList.removeClass(' className ') HTMLCollection.removeClass(' className ') Usase: document.getElementById('firstDiv').removeClass(' myClass ') it remove 'myClass' from the div having id firstDiv and return firstDiv element document.getElementsByTagName('div').removeClass(' myClass ') the getElementsByTagName selects all div and removeClass() method remove class name 'myClass' from all divs and return getElementsByTagName result for further processing you do not need to execute selector again. document....
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 : 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