PROWAREtech

articles » current » javascript » tutorial » page-15

JavaScript: Tutorial - A Guide to JavaScript - Page 15

The Document Object Model (The Element Type).

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.

<<<[Page 15 of 22]>>>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE