Skip to content

Latest commit

 

History

History
280 lines (228 loc) · 5.29 KB

js.md

File metadata and controls

280 lines (228 loc) · 5.29 KB

JavaScript code

Find element

  • Find a element by id. Return a list of elements.
    document.getElementById(id)
  • Find a element by name. Return a list of elements.
    document.getElementsByTagName(name)
  • Find a element by class. Return a list of elements.
    document.getElementsByClassName(name)

Insert element

  • Insert a element in the HTML document.
    document.createElement(element)
  • Insert a element in the HTML document.
    document.appendChild(element)
  • Insert a text for a element.
    document.createTextNode("text")
  • Insert a element before another one
    element.insertBefore(element,elementChild)

Remove element

  • Remove a element from a HTML document.
    document.removeChild(element)

Replace element

  • Replace a element from a HTML document.
    document.replaceChild(element)

Get values

  • Get a value from a element.
    element.value
  • Get a value from a the first child element.
    element.firstChild.nodeValue
  • Get a value from a child element in position 0.
    element.childNodes[0].nodeValue
  • Get all from HTML document.
    document.documentElement.innerHTML
  • Get all from body element.
    document.body.innerHTML
  • Get all cookies. Return a list with key and value.
    document.cookie
  • Get window's width. Not include toolbar and scrollbar. Return in pixels.
    window.innerWidth
    document.documentElement.clientWidth
    document.body.clientWidth
  • Get window's height. Not include toolbar and scrollbar. Return in pixels.
    window.innerHeight
    document.documentElement.clientHeight
    document.body.clientHeight
  • Get screen's width. Return in pixels.
    screen.width
    screen.availWidth
  • Get screen's height. Return in pixels.
    screen.height
    screen.availHeight
  • Return the number of bits used to display a color on screen.
    screen.colorDepth
  • Return the deep of pixels on the screen.
    screen.pixelDepth
  • Return URL from the current window.
    window.location.href
  • Return the host name from the current window.
    window.location.hostname
  • Return the path name from the current window.
    window.location.pathname
  • Return the protocol web (e.g., http, https) used by the current page.
    window.location.protocol
  • Return the browser's name (e.g., IE11, Chrome, Firefox, and Safari 'Netscape').
    navigator.appName
  • Return the browser's codename (e.g., IE11, Chrome, Firefox, and Safari 'Mozilla').
    navigator.appCodeName
  • Return the SO used to run the current browser (e.g., Linux, Windows).
    navigator.platform
  • Return the engine's name used on the browser.
    navigator.product
  • Return the language set on the browser (e.g., pt-br, en-us).
    navigator.language

Replace values

  • Replace a content's value from an element.
    element.innerHTML =  new html content
  • Replace a content's value from an element specified by id.
    document.getElementById("id").innerHTML = "text"
  • Replace a attribute's value from an element.
    element.attribute = new value
  • Replace a attribute's value from an element.
    element.setAttribute(attribute, value)
  • Replace element's style.
    element.style.property = new style
  • Replace an attribute's value from an element specified by id.
    document.getElementById("id")."any attribute" = "text"
  • Replace the HTML document.
    document.write(text)

Window manipulation

  • Open a new window.
    window.open()
  • Close the current window.
    window.close()
  • Move the current window.
    window.moveTo()
  • Resize the current window.
    window.resizeTo()
  • Load a new document.
    window.location.assign(URL)
  • Display a popup.
    window.alert("text")

Console

  • Display a onformation on browser's console.
    console.log(5 + 6)

Trigger

  • Trigger a function after a specified time.
    window.setTimeout(function, milliseconds)
  • Trigger a function over and over in a specified interval.
    window.setInterval(function, milliseconds)
  • Trigger a function by a click event.
    <script>
    function myFunction()
    {	
        document.getElementById("id").innerHTML = "text";
    }
    </script>

    <tag onclick="myFunction()"> </tag>
  • Trigger a function to replace the HTML document by a click event.
    <tag onclick="document.write("text")">text</tag>
  • Trigger a function to replace a content's value from an element by a click event.
    <tag onclick="this.innerHTML="text"">text</tag>
  • Assign an event to a element through addEventListener().
    <script>
    element.addEventListener("click", displayDate);

    function displayDate() 
    {
        document.getElementById("demo").innerHTML = Date();
    }
    </script>