Study Vault Search notes, aliases and full text
Study Vault
Graph
On this page
Connections ↓
ConceptDBISAI-written · not yet proofread

DOM Manipulation

Also DOM · Document Object Model

DOM manipulation is reading and changing the elements of a web page from JavaScript through the Document Object Model, a well-defined scheme for addressing page elements, typically by selecting elements with CSS selectors, reading or writing their content, and reacting to user events.

Know these firstHTML Structure

Formula#

Selecting elements#

document.querySelector("#id")       // first element matching a CSS selector (#id = by id)
document.querySelector("button")    // first <button>
document.querySelectorAll("p")      // all <p> elements
document.getElementById("id")       // by id, without "#"

Reading and writing#

let val = document.querySelector("#query").value;             // content of an input field
document.querySelector("#query").value = "You win";            // set an input field
document.querySelector("#result").textContent = "Hello";       // text (safe against injection)
document.querySelector("#result").innerHTML = "<b>Bold</b>";   // parsed as HTML (unsafe)

Event handlers#

document.querySelector("button").onclick = function() { ... };          // click
document.querySelector("#query").onkeyup = function() { ... };          // after each keystroke
document.querySelector("#input").addEventListener("input", function() { ... });  // any change of the field
document.addEventListener("DOMContentLoaded", function() { ... });      // page parsed, DOM built

jQuery (deprecated)#

jQueryVanilla JavaScript
$("#query").val() / .val(x).value / .value = x
$("#result").html(content).innerHTML = content
$("#result").text(content) (safe).textContent = content
$("button").click(function() {...}).onclick = function() {...}
$("#query").keyup(function() {...}).onkeyup = … / addEventListener("keyup", …)
$(document).ready(function() {...})addEventListener("DOMContentLoaded", …)

$() is jQuery’s shorthand for element selection, with the same CSS selectors as querySelector.

Properties#

  • Always prefer .textContent over .innerHTML for untrusted content, to prevent code injection.
  • onkeyup fires after each keystroke; the input event fires on every change of the field (also paste, undo), which suits live search (“search as you type”).
  • The DOM must exist before it is selected. A <script> in <head> without defer runs before <body> is parsed, so querySelector("#input") returns null. Remedies: <script src="…" defer>, the <script> at the end of <body>, or wrapping the code in a DOMContentLoaded/$(document).ready handler.
  • The selected element needs an id (or another selectable feature) in the HTML; exam tasks therefore require “the input field and the paragraph should have an ID”.
  • The browser development console (F12), tab Elements, shows the current DOM; tab Console shows JavaScript output and errors.

Example#

Sources#

Search

Type In
↑ ↓ move ↵ open ⇥ next section Ctrl↵ results page Prefix # to search text only