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";
}
}
Prototype strips out the unwanted text nodes
notice that these are methods, so you need ()
Selecting groups of DOM objects
(8.3.5)
methods in document and other DOM objects for accessing descendents:
array of descendants that match given CSS selector, such as "div#sidebar ul.news > li"
var gameButtons = $("game").select("button.control");
for (var i = 0; i < gameButtons.length; i++) {
gameButtons[i].style.color = "yellow";
}
The $$ function
(9.1.5)
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
(8.3.5)
name
description
$(document.createElement("tag"))
creates and returns a new empty DOM node representing an element of that type
document.createTextNode("text")
creates and returns a text node containing given text
// create a new <h2> node
var newHeading = $(document.createElement("h2"));
newHeading.innerHTML = "This is a heading";
newHeading.style.color = "green";
merely creating a node does not add it to the page
you must add the new node 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() {
this.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
(9.1.4)
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
element nodes (HTML tag)
text nodes (text in a block element)
attribute nodes (attribute/value pair)
