Except where otherwise noted, the contents of this document are
Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst.
All rights reserved.
Any redistribution, reproduction, transmission, or storage of part
or all of the contents in any form is prohibited without the author's
expressed written permission.
Complex DOM manipulation problems
How would we do each of the following in JavaScript code? Each involves modifying each one of a group of elements ...
When the Go button is clicked, reposition all the divs of class puzzle to random x/y locations.
When the user hovers over the maze boundary, turn all maze walls red.
Change every other item in the ul list with id of TAs to have a gray background.
The DOM tree
The elements of a page are nested into a tree-like structure of objects
the DOM has properties and methods for traversing this tree
elements with same parent
as this one (not text nodes)
// alter siblings of "main" that do not contain "Sun"
var sibs = $("main").siblings();
for (var i = 0; i < sibs.length; i++) {
if (sibs[i].innerHTML.indexOf("Sun") < 0) {
sibs[i].innerHTML += " Sunshine";
}
}
Selecting groups of DOM objects
methods in document and other DOM objects (* = HTML5):
returns an array of all elements that would be matched by the given CSS selector string
Getting all elements of a certain type
highlight all paragraphs in the document:
var allParas = document.querySelectorAll("p");
for (var i = 0; i < allParas.length; i++) {
allParas[i].style.backgroundColor = "yellow";
}
<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>You get the idea...</p>
</body>
Complex selectors
highlight all paragraphs inside of the section with ID "address":
// var addrParas = $("address").getElementsByTagName("p");
var addrParas = document.querySelectorAll("#address p");
for (var i = 0; i < addrParas.length; i++) {
addrParas[i].style.backgroundColor = "yellow";
}
var gameButtons = $("game").select("button.control");
for (var i = 0; i < gameButtons.length; i++) {
gameButtons[i].style.color = "yellow";
}
The $$ function
var arrayName = $$("CSS selector");
// hide all "announcement" paragraphs in the "news" section
var paragraphs = $$("div#news p.announcement");
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].hide();
}
$$ returns an array of DOM elements that match the given CSS selector
like $ but returns an array instead of a single DOM object
a shorthand for document.select
useful for applying an operation each one of a set of elements
Common $$ issues
many students forget to write . or # in front of a class or id
// get all buttons with a class of "control"
var gameButtons = $$("control");
var gameButtons = $$(".control");
$$ returns an array, not a single element; must loop over the results
// set all buttons with a class of "control" to have red text$$(".control").style.color = "red";
var gameButtons = $$(".control");
for (var i = 0; i < gameButtons.length; i++) {
gameButtons[i].style.color = "red";
}
Q: Can I still select a group of elements using $$ even if my CSS file doesn't have any style rule for that same group? (A: Yes!)
Creating new nodes
name
description
$(document.createElement("tag"))
creates and returns a new empty DOM node representing an element of that type
// create a new <h2> node
var newHeading = $(document.createElement("h2"));
newHeading.innerHTML = "This is a heading";
newHeading.style.color = "green";
merely creating a element does not add it to the page
you must add the new element as a child of an existing element on the page...
var p = $(document.createElement("p"));
p.innerHTML = "A paragraph!";
$("main").appendChild(p);
Removing a node from the page
function slideClick() {
var bullets = document.getElementsByTagName("li");
for (var i = 0; i < bullets.length; i++) {
if (bullets[i].innerHTML.indexOf("children") >= 0) {
bullets[i].remove();
}
}
}
each DOM object has a removeChild method to remove its children from the page
Prototype adds a remove method for a node to remove itself
DOM versus innerHTML hacking
Why not just code the previous example this way?
function slideClick() {
$("thisslide").innerHTML += "<p>A paragraph!</p>";
}
Imagine that the new node is more complex:
ugly: bad style on many levels (e.g. JS code embedded within HTML)
error-prone: must carefully distinguish " and '
can only add at beginning or end, not in middle of child list
function slideClick() {
$("main").innerHTML += "<p style='color: red; " +
"margin-left: 50px;' " +
"onclick='myOnClick();'>" +
"A paragraph!</p>";
}
style property lets you set any CSS style for an element
problem: you cannot (usually) read existing styles with it
Accessing styles in Prototype
function biggerFont() {
// turn text yellow and make it bigger
var size = parseInt($("clickme").getStyle("font-size"));
$("clickme").style.fontSize = (size + 4) + "pt";
}
getStyle function added to DOM object allows accessing existing styles
function highlightField() {
// turn text yellow and make it bigger
if (!$("text").className) {
$("text").className = "highlight";
} else if ($("text").className.indexOf("invalid") < 0) {
$("text").className += " highlight";
}
}
JS DOM's className property corresponds to HTML class attribute
somewhat clunky when dealing with multiple space-separated classes as one big string
Getting/setting CSS classes in Prototype
function highlightField() {
// turn text yellow and make it bigger
if (!$("text").hasClassName("invalid")) {
$("text").addClassName("highlight");
}
}
element nodes (HTML tag)
text nodes (text in a block element)
attribute nodes (attribute/value pair)
