Repozytorium Web Developera

DOM, BOM & Web APIs

The BOM (Browser Object Model) consists of objects: navigator, history, screen, location and document which are children of window. In the document node is the DOM (Document Object Model), the document object model, which represents the contents of the page. You can manipulate it using JavaScript. Source.

window vs window.document/document

window object doesn't have all the methods which has document object. document object has the whole DOM.

window.document/document methods

To get an element:


document.getElementById(ID)
document.getElementsByTagName(ELEMENT_TYPE)
document.getElementsByClassName(CLASS) // But it's only in IE9+ - whereas .querySelectorAll() is in IE8.
document.querySelector(SELECTOR)
document.querySelectorAll(SELECTOR)

To create an element:


document.createElement(ELEMENT_TYPE) // ex. 'img', 'div'

Some not popular methods:


document.activeElement // gets an focused element
document.readyState // is document loaded?

Child can be a Text node or an Element node. firstElementChild or lastElementChild will return only Element nodes. Similar methods without Element in name may also return a Text node.

  • .childElementCount
  • .firstElementChild
  • .lastElementChild
  • .previousElementSibling
  • .nextElementSibling

Node types and Element type

Node in not always an Element. There are several types of Nodes (like a Text Node). Element is one of them.

Element methods

Every element has some similar method to the document object. Especially for searching for nodes.

To append an element to another element:


element.appendChild(ELEMENT)

To set an attribute on element:


element.setAttribute(ATTRIBUTE_NAME, ATTRIBUTE_VALUE)

Some attributes you can set up directly:


img.src = URL

Events

To create a new type of event: event = document.createEvent('HTMLEvents').

To init an event: event.initEvent('dataavailable', true, true).

To listen for an event: document.addEventListener(eventName, callback). For example, to listen for invalid input and scroll to it:


document.addEventListener('invalid', (event) => {
  event.target.scrollIntoView(false)
}, true)

Scroll

Browser natively allows to scroll smoothly:


window.scroll({top: 0, left: 0, behavior: 'smooth' })

window.navigator

The navigator object has properties which specify user browser.

Web Share API navigator.share

Used to share URL/content using native capabilities of the host platform. Blog post on Google Web Fundamentals.


if (navigator.share) {
  navigator.share({
      title: 'Web Fundamentals',
      text: 'Check out Web Fundamentals — it rocks!',
      url: 'https://developers.google.com/web',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

MediaDevices

MediaDevices is part of WebRTC API. MediaDevices on MDN.

Get access to device

The MediaDevices.getUserMedia() method is used to prompt the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.

For example, to get rear camera and show it's stream in an video element:


const video = document.getElementById("video")
const constraints = {
    advanced: [{
        facingMode: "environment"
    }]
}
navigator.mediaDevices
    .getUserMedia({
        video: constraints
    })
    .then((stream) => {
        video.src = window.URL.createObjectURL(stream)
        video.play()
    })

Where environment is one of facingMode types: facingMode on MDN.

You can also check MediaRecorder API and WebRTC.

Call camera from file input

By using FileReader interface and it's method readAsDataURL you can get access to an image from an input and display it in image element. readAsDataURL on MDN


<input type="file" accept="image/*" capture="user" onchange="previewFile()"> 

function previewFile() {
  var preview = document.querySelector('img')
  var file = document.querySelector('input[type=file]').files[0]
  var reader = new FileReader()

  reader.addEventListener('load', function () {
    preview.src = reader.result
  }, false)

  if (file) {
    reader.readAsDataURL(file)
  }
}

Enumerate devices

You can enumerate through available devices by using the enumerateDevices method.


var enumeratorPromise = navigator.mediaDevices.enumerateDevices()

To list available devices you can write:


if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
  console.log("enumerateDevices() not supported.")
  return
}

// List cameras and microphones.

navigator.mediaDevices.enumerateDevices()
  .then(function(devices) {
    devices.forEach(function(device) {
      console.log(device.kind + ": " + device.label +
        " id = " + device.deviceId)
    })
  })
  .catch(function(err) {
		console.log(err.name + ": " + error.message)
  })

Useful links