Wednesday, August 20, 2014

Using this in DOM elements selectors

The word this in JavaScript has a several meaning depending on a contest of a function call. But also in DOM-manipulations this can invoke useful properties of element if used properly. Below is the list of 15 cases how this can be used for DOM manipulations with all tags, inputs/selects and specifically interesting with parts of HREF attribute of <a> tag.

  • (as you know)
  • this.value (on most input types. only issues I know are IE when a <select> doesn't have value properties set on its <option> elements, or radio inputs in Safari.)
  • this.className to get or set an entire "class" property
Form elements
  • this.selectedIndex against a <select> to get the selected index
  • this.options against a <select> to get a list of <option> elements
  • this.text against an <option> to get its text content
  • this.rows against a <table> to get a collection of <tr> elements
  • this.cells against a <tr> to get its cells (td & th)
  • this.parentNode to get a direct parent
  • this.checked to get the checked state of a checkbox 
  • this.selected to get the selected state of an option 
  • this.disabled to get the disabled state of an input 
  • this.readOnly to get the readOnly state of an input 
Links aka <a>
  • this.href against an <a> element to get its href
  • this.hostname against an <a> element to get the domain of its href
  • this.pathname against an <a> element to get the path of its href
  • against an <a> element to get the querystring of its href
  • this.src against an element where it is valid to have a src