Interesting ways to manipulate the DOM using (vanilla) JavaScript Part 2

Hope you found the part 1 helpful..

Okay, let’s begin…

Styling

  1. style property
    1. to access a specific style property e.g. border-width, use selection.style.borderWidth or for background-color backgroundColor.
  2. getProperty, setProperty, removeProperty methods
    1. get – takes in only one argument; returns the value of that property e.g. selection.getProperty(“background-color”)
    2. set – updates the value of a specific property; two arguments – property and value e.g. selection.setProperty(“background-color”, “red”)
    3. remove – well, removes hehe..
  3. The (2) methods apparently do not work for inline css <p style=”background-color:’red'”>Me</p>; solutions
    1. style.cssText
      1. This is my fav, mainly because you can set multiple CSS properties in a string
    2. setAttribute with “style” as the first  argument and the set css properties as the second

See the Pen DOM Manipulation: Styling by Ajala Comfort (@AJALACOMFORT) on CodePen.

 

Next DOM Events

if you want to listen to a user pressing a button, or hovering / pointer over a link, using DOM events should be learned.  There are two ways you can listen to events (e.g. clicking) according the book

    1. the method pattern
    1. property event handler pattern
    1. inline attribute event handler pattern

click is not the only event type. Below is a short list of the event types available, there are more listed in the book. I just found this list useful personally.

  1. For User Interface
    1. load – when files are loaded e.g. css, image, html page etc
    2. unload – when files are removed
    3. resize – fired when the document view is being resized
    4. scroll – when user scrolls the document in view
    5. context – when user right clicks
  2. For Focusing
    1. blur – when element loses focus either by mouse or tapping(mobile)
    2. focus – when elements gets in focus
  3. For Forms
    1. change – when a control loses the input focus and the input value has been modified
    2. reset – when form resets
    3. submit – when form is submitted
    4. select – when user select some text in the input field
  4. For Mouse
    1. click – you know this
    2. dbclick – when you double click
    3. mousedown – when the mouse pointer is pressed over an element
    4. mouseenter – when the mouse pointer enters the boundries of the element or its descendant element / children
    5. mouseleave – similar to mouseenter but when the mouse pointer leaves

If after a button is clicked and your click function is called, how does one prevent the function from being called again if a user clicks again ?

removeEventListener

Due to time I will not treat other aspects like Event.preventDefault() or even Event.stopPropagation()  /*look them up; could be of use*/

If you have any questions, do comment down below.

See the Pen DOM Manipulation : DOM Events by Ajala Comfort (@AJALACOMFORT) on CodePen.