PROWAREtech
JavaScript: Tutorial - A Guide to JavaScript - Page 15
Special Collections
The document object has a few special collections. Each of these collections return an array. Collection
document.anchors contains all <a> elements with a name attribute. Collection
document.forms contains all <form> elements. Collection document.images contains
all <img> elements. Collection document.links contains all <a> elements
with an href attribute.
The Element Type
Next to the Document type, the Element type is most often used. The Element type represents an HTML element, providing access to information such as its tag name, children, and attributes. An Element node has the following characteristics:
- nodeType is 1.
- nodeName is the element's tag name.
- nodeValue is null.
- parentNode may be a Document or Element.
- Child nodes may be Element, Text, Comment, ProcessingInstruction, CDATASection, or EntityReference.
HTML Elements
All HTML elements are represented by the HTMLElement type, either directly or through subtyping. The HTMLElement inherits directly from Element and adds several properties. Each property represents one of the following standard attributes that are available on every HTML element.
Getting Attributes
Each element may have zero or more attributes, which are used to give extra information
about the particular element or its contents. The three DOM methods for working with
attributes are getAttribute(), setAttribute(), and removeAttribute().
Consider the following code:
<div id="someDiv" class="bd" title="Body text" lang="en" dir="ltr" new-attribute="pill">some DIV</div>
<script type="text/javascript">
var div = document.getElementById("someDiv");
alert(div.getAttribute("id")); //"someDiv"
alert(div.getAttribute("class")); //"bd"
alert(div.getAttribute("title")); //"Body text"
alert(div.getAttribute("lang")); //"en"
alert(div.getAttribute("dir")); //"ltr"
alert(div.getAttribute("new-attribute")); //"pill"
</script>Setting Attributes
setAttribute() accepts two arguments: the name of the attribute to set and the value to set it to. If it already
exists, setAttribute() replaces its value with the one specified; if it doesn't exist,
setAttribute() creates it and sets its value.
<div id="someDiv" class="bd" title="Body text" lang="en" dir="ltr" new-attribute="pill">some DIV</div>
<script type="text/javascript">
var div = document.getElementById("someDiv");
div.setAttribute("title", "NEW TITLE");
</script>Removing Attributes
Remove an attribute with removeAttribute().
<div id="someDiv" class="bd" title="Body text" lang="en" dir="ltr" new-attribute="pill">some DIV</div>
<script type="text/javascript">
var div = document.getElementById("someDiv");
div.removeAttribute("title");
</script>Creating Elements
New elements are created by using the document.createElement() method. This method
accepts a single argument, the tag name of the element to create. To create a <div>:
someDiv = document.createElement("div");you can manipulate the element's attributes and add more children to it:
someDiv = document.createElement("div");
someDiv.id = "newId";
someDiv.className = "window";
Add the new element to the document tree using appendChild(), insertBefore(), or
replaceChild(). The following code adds the newly created element to the document's <body>
element:
someDiv = document.createElement("div");
document.body.appendChild(someDiv);Element Children
Elements have any number of children and descendants since elements may be children of
elements. The childNodes property is an array that contains all of the immediate children of the element, which
may be other elements, text nodes, comments, or processing instructions.
