Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/XHTML"> <head> <title>Page Title</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <h1>This is a heading</h1> <p>A paragraph with a <a href="http://www.google.com/">link</a>.</p> <ul> <li>a list item</li> <li>another list item</li> <li>a third list item</li> </ul> </body> </html>
<p>This is a paragraph of text with a <a href="/path/to/another/page.html">link</a> inside.</p>
every node's DOM object has the following properties:
firstChild
, lastChild
: start/end of this node's list of childrenchildNodes
: array of all this node's childrennextSibling
, previousSibling
: neighboring nodes that have the same parentparentNode
: 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> inside.</p>
<div id="foo"> <p> This is a paragraph of text with a <a href="page.html">link</a> </p> </div>
div
above have?"\n\t"
(before the paragraph)"\n\t"
(after the paragraph)All of the following methods return only element nodes (not text nodes):
ancestors
: array of elements above this one
childElements
: array of children (elements only, not text nodes)
descendants
,
firstDescendant
,
descendantOf
: array of all this element's children, grandchildren, etc.
next
,
previous
,
siblings
,
previousSiblings
,
nextSiblings
, adjacent
: methods to access node's siblings
set all siblings of the element with id
of main
to be bold:
var siblings = $("main").siblings(); for (var i = 0; i < siblings.length; i++) { siblings[i].style.fontWeight = "bold"; }
()
)
$("foo").textContent = "New paragraph text"; // change text on the page
textContent
: text (no HTML tags) inside a node
innerText
: text (no HTML tags) inside a node
textContent
property$("foo").innerText = $("foo").textContent = "Some text";
innerHTML
: text and/or HTML tags inside a node
innerHTML
// bad style!
$("foo").innerHTML = "<p>text and <a href="page.html">link</a>";
innerHTML
can inject arbitrary XHTML content into the pageinnerHTML
and instead encourage using textContent
only to set plain text contents inside an element
// create a new <h2> node var newHeading = document.createElement("h2"); newHeading.style.color = "green"; newHeading.textContent = "This is a heading";
document.createElement("tag")
: creates and returns a new empty DOM node representing an element of that type
$
or Element.extend
on itdocument.createTextNode("text")
: creates and returns a new text node containing the given text
window.onload = function() { $("thisslide").onclick = slideClick; } function slideClick() { var p = document.createElement("p"); p.textContent = "A paragraph!"; $("thisslide").appendChild(p); }
Every DOM node object has these methods:
appendChild(node)
: places the given node at the end of this node's child listinsertBefore(newChild, oldChild)
: places the given new node in this node's child list just before oldChild
removeChild(node)
: removes given node from this node's child listreplaceChild(newChild, oldChild)
: replaces given child with new nodeup
*,
down
*,
remove
*
: moves this node up/down a level in the tree, or deletes it (Prototype)
innerHTML
revisitedWhy not just code the previous example this way?
function slideClick() { $("thisslide").innerHTML += "<p>A paragraph!</p>"; }
innerHTML
codeImagine that the new node is more complex:
function slideClick() { this.innerHTML += "<p style='color: red; " + "margin-left: 50px;' " + "onclick='myOnClick();'>" + "A paragraph!</p>"; }
"
and '
innerHTML
function slideClick() {
var p = document.createElement("p");
p.style.color = "red";
p.style.marginLeft = "50px";
p.onclick = myOnClick;
p.textContent = "A paragraph!";
$("thisslide").appendChild(p);
}
Click a rectangle to move it to the front. Shift-click a rectangle to delete it.
z-index
property to adjust which rectangles are on top