Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.
How would we do each of the following in JavaScript code? Each involves modifying each one of a group of elements ...
div
s of class puzzle
to random x/y locations.ul
list with id
of TAs
to have a gray background.<p> This is a paragraph of text with a <a href="/path/page.html">link in it</a>. </p>
every node's DOM object has the following properties:
name(s) | description |
---|---|
firstChild , lastChild
|
start/end of this node's list of children |
childNodes
|
array of all this node's children |
nextSibling , previousSibling
|
neighboring nodes with the same parent |
parentNode
|
the element that contains this node |
<p id="foo">This is a paragraph of text with a <a href="/path/to/another/page.html">link</a>.</p>
<div> <p> This is a paragraph of text with a <a href="page.html">link</a>. </p> </div>
div
above have?"\n\t"
(before/after the paragraph)a
tag?
method(s) | description |
---|---|
ancestors ,
up
|
elements above this one |
childElements ,
descendants ,
down
|
elements below this one (not text nodes) |
siblings ,
next ,
nextSiblings , previous ,
previousSiblings ,
adjacent
|
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";
}
}
()
document
and other DOM objects for accessing descendents:
name | description |
---|---|
getElementsByTagName
|
returns array of descendents with the given tag, such as "div"
|
getElementsByName
|
returns array of descendents with the given name attribute (mostly useful for accessing form controls)
|
highlight all paragraphs in the document:
var allParas = document.getElementsByTagName("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>
getElementById
highlight all paragraphs inside of the section with ID "address"
:
var addrParas = $("address").getElementsByTagName("p"); for (var i = 0; i < addrParas.length; i++) { addrParas[i].style.backgroundColor = "yellow"; }
<p>This won't be returned!</p>
<div id="address">
<p>1234 Street</p>
<p>Atlanta, GA</p>
</div>
Prototype adds methods to the document
object (and all DOM element objects) for selecting groups of elements:
getElementsByClassName
|
array of elements that use given class attribute
|
select
|
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"; }
$$
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
$
but returns an array instead of a single DOM object
document.select
$$
issues.
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"; }
$$
even if my CSS file doesn't have any style rule for that same group? (A: Yes!)
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";
Every DOM element object has these methods:
name | description |
---|---|
appendChild(node)
|
places given node at end of this node's child list |
insertBefore(new, old)
|
places the given new node in this node's child list just before old child
|
removeChild(node)
|
removes given node from this node's child list |
replaceChild(new, old)
|
replaces given child with new node |
var p = document.createElement("p"); p.innerHTML = "A paragraph!"; $("main").appendChild(p);
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(); } } }
removeChild
method to remove its children from the page
remove
method for a node to remove itself
innerHTML
hackingWhy not just code the previous example this way?
function slideClick() { $("thisslide").innerHTML += "<p>A paragraph!</p>"; }
"
and '
function slideClick() { this.innerHTML += "<p style='color: red; " + "margin-left: 50px;' " + "onclick='myOnClick();'>" + "A paragraph!</p>"; }
<button id="clickme">Click Me</button>
window.onload = function() { $("clickme").onclick = biggerFont; }; function biggerFont() { var size = parseInt($("clickme").style.fontSize); size += 4; $("clickMe").style.fontSize = size + "pt"; }
style
property lets you set any CSS style for an element
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 stylesaddClassName
, removeClassName
, hasClassName
manipulate CSS classesthis.style.top = this.getStyle("top") + 100 + "px";// bad!
"200px" + 100 + "px"
, "200px100px"
this.style.top = parseInt(this.getStyle("top")) + 100 + "px"; // correct
function highlightField() {
// turn text yellow and make it bigger
if (!$("text").hasClassName("invalid")) {
$("text").addClassName("highlight");
}
}
addClassName
, removeClassName
, hasClassName
manipulate CSS classesclassName
DOM property, but don't have to manually split by spaces