CSC436: Web Platform: Demos! [22/22]

Viewing the DOM/documents using developer tools: It's a tree!

Messing around with CSS and HTML using Liveweave

• div and span
• CSS selectors: class, id, etc
• selectors choose positions within the DOM tree: compare xpath and jQuery selectors

Messing around javascript using Javascript visualizer and JSBin

Javascript:

console.log ("hi");
document.body.innerHTML = "<p>pizza</p>";

let x = document.getElementById ("x");
console.log (x);
x.innerHTML = "hi";

function f () {
  console.log ("pizza");
  let y = document.getElementById ("y");
  y.innerHTML = "Pushed";
}

HTML:

<p class="a" id="x">
  hello
</p>
<p class="a">
  hello
</p>
<button id="y" onclick="f()">Push me</button>