Skip to content

Latest commit

 

History

History
280 lines (228 loc) · 5.02 KB

js.md

File metadata and controls

280 lines (228 loc) · 5.02 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>