DOM manipulation

Objectives

  • Create DOM elements
  • Create text nodes
  • Set DOM element relationships
  • Set element attribute values

Selecting, creating, modifying elements

  • You can select DOM elements by class name, tag name, id, and even by CSS selector.
  • Selecting an element by id: document.getElementById(id)
  • Selecting elements by tag name: document.getElementsByTagName(tagName)
  • Selecting elements by class name: document.getElementsByClassName(className)
  • Selecting element by CSS selector: document.querySelectorAll(selector)
  • See domSelect.html for selecting and modifying DOM elements
  • See domCreate.html for creating DOM elements dynamically
  • See arrayDisplay3.html for displaying array elements as a new list
  • See arrayParas.html for displaying array elements as new paragraphs