Scripting in the Browser - Part 1 | Page 2 | WebReference

Scripting in the Browser - Part 1 | Page 2


[previous] [next]

Scripting in the Browser

Understanding Key DOM Interfaces

The W3C XML DOM includes three levels. Level 1 focuses on XML and HTML documents. Level 2 adds stylesheet support to DOM Level 1 and provides mechanisms for applications to manipulate style information programmatically. Level 2 also supports XML namespaces and defines an event model. Level 3 builds on Level 2 to specify Document Type Definitions (DTDs) and schemas. Mozilla supports DOM Level 2 and parts of DOM Level 3, while IE 6 supports DOM Level 1.Both provide additional areas of support outside of the DOM.

The DOM Level 1 Core includes the following interfaces:

  • Document
  • DocumentFragment
  • DocumentType
  • EntityReference
  • Element
  • Attr
  • ProcessingInstruction
  • Comment
  • Text
  • CDATASection
  • Entity
  • Notation
  • Node
  • NodeList
  • NamedNodeMap

You can find out more about these interfaces at https://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#ID-1590626201. Each of these interfaces has other member interfaces. You can think of these interfaces as objects within the JavaScript code that you'll write.

In the next section, I'll work through the following interfaces:

  • Document
  • Node
  • NodeList
  • NamedNodeMap

Understanding the Document Interface

The Document interface represents the entire document and is the parent for the rest of the object model. The document object hosts the Document interface. This interface is the root of the document tree.

The interface also contains a number of factory methods that create new objects. You can use these methods to add new elements, text nodes, and attributes using code. Factory methods create content within the Document interface.

The Document interface includes the following members:

  • documentElement
  • createElement()
  • createTextNode()
  • createAttribute()
  • getElementsByTagName()

You can find out more about the Document interface at https://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#i-Document.

documentElement

The documentElement attribute provides direct access to the root element of the XML document:

In an XHTML document, this is the <html> element. The documentElement references an Element object, which is a type of Node object.

createElement(tagName)

The createElement() method is a factory method used to create an Element. It requires a tag name. The method creates an element with the specified tag name:

When this method creates a new element, it doesn't have any position in the document tree. You still need to add it, usually using the appendChild() method:

The preceding code creates a <DVD> element and appends it to the root element of the document. Note that the code refers to the document oDocument when it uses the createElement() method.

There are a number of similar create methods, including createTextNode() and createAttribute().

createTextNode(value)

The createTextNode() factory method creates text nodes containing the passed-in value. This is equivalent to adding text inside an element or attribute, because a text node is the child. You can use the method in the following way:

This code creates the following element:

createAttribute(attrName)

You can use the createAttribute() factory method to create Attr (attribute) objects. The value of an attribute appears within a text node inside that attribute, so you can use a similar approach to the one used to add a value to an Element. You can also use the value property to set the value of the text node in the attribute:

This code sample creates an attribute with the value 4. The code then inserts it into the attributes collection of an element by calling the setNamedItem() method on a NamedNodeMap. You'll learn a little more about the NamedNodeMap shortly.

These other factory methods create the remaining node types:

createCDATASection() createComment() createDocumentFragment() createEntityReference() createProcessingInstruction()

You can find these methods detailed in the DOM Level 1 reference at https://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html.

getElementsByTagName(tagName)

The getElementsByTagName() method returns all matching elements as a NodeList. The method requires a string, which is the name of tags to identify. Note that the method doesn't return attributes with the specified name:

This line returns a collection of elements called <title>. Note that in XML, the tag name is case-sensitive.


[previous] [next]

URL: