Black & White Series

DOM

Document Object Model

Web Layers

width:1000px

DOM Tree

width:1100px

JavaScript DOM View

width:1200px

Defining a span Target

span target

Importing an External JS

External JS

Retrieving the span Object

querySelector

Inserting HTML content

innerHTML

CSS Selectors

selector syntax examples
type tag name p, h1
classe .classname .story
identifier #idname #show-wd

Reference: mdn CSS selectors

document.querySelector

querySelector(<selector>)
  • Returns the first element within the document that matches the selector
  • This element is a DOM object
document.querySelector("#show-wd")

Returns the element identified by show-wd.

Reference: mdn Document.querySelector()

Element.innerHTML

  • JavaScript property
  • Gets or Sets the HTML inside an element

div Example

div Example

More Complex innerHTML

Complex innerHTML

André Santanchè

www.ic.unicamp.br/~santanch/

Web2Learn

santanche.github.io/web2learn/