Join Joe Marini for an in-depth discussion in this video Quick intro to the DOM, part of XML Essential Training.
- [Instructor] In the previous chapter we saw how to define our first XML document and then use CSS to give the XML an appearance. The CSS approach though has some downsides. First, there's no easy way to reorder the XML content using CSS. And in fact, some people would argue that CSS shouldn't even be used for things like that. The second problem is that if you have an XML tag and that tag has a certain meaning and you want to take an XML tag and based upon its value it would perform some functions.
CSS doesn't really give you a good way of doing that. It's mostly just a way of styling the appearance of the static XML data. And there is certainly a set of circumstances where that's going to work just fine. In this chapter however, we'll see how to use the DOM, or the Document Object Model, to exercise fine level control over XML content. The Document Object Model is a standard set of APIs or functions for working with document content. It's platform, browser, and language neutral.
The DOM represents this document as a tree structure. At the top is the HTML node, inside the HTML node are the head and the body, and these are said to be child nodes of the HTML node, which is the parent. Then inside the head and body are the title and paragraph tags respectively. And so far we've talked about tags, but the actual content of these tags are themselves nodes within the DOM. So inside the title tag there's a text string called Document, and inside the paragraph there's a text string which has the value Paragraph Text.
And each one of these is a node in the document. We can express the relationship between these nodes using familiar family-style names. So, for example, the head and the body are child nodes of the HTML node, which is said to be the parent. The title is a child of the head node and the document is a child of the title node. The head and body nodes are siblings of each other. And you'll see this terminology used throughout the DOM API. All right, so let's talk about some important DOM properties that you'll come across when using these functions.
So the first four provide information about any given node. So, for example, the nodeName property is the name of the node. For a tag it's going to be the tag name, for things like comments and text nodes it's going to be a special string. The nodeType property is the node's type. It's a numerical value that represents what kind of node it is. There are numerical constants for things like elements, comments, text, and so on. The nodeValue property is the value of the node and this varies based on the node type. For example, the nodeValue of a text node would be the text content.
And then there's the attributes property, which is only valid for elements. It's an array of the attributes and their values that appear on the tag. There are also properties for accessing the family relationships of nodes. So, for example, if you have a node and you access the parentNode property of that node that gives you the parent of the node you're looking for. If there isn't one, for example, you're already at the document root, then at value is null. There's a childNodes array, which lists the child nodes of the current node.
And again, if there aren't any then it's just an empty array. You can also ask for a node's first and lastChild and for its previous and next sibling. There are functions for taking nodes and moving them around in the document. For example, the appendChild function inserts a new node at the end of a given element's existing children. The other functions do what they say. For example, removeChild removes an element, insertBefore inserts a new node before a given node, and you can also replace an existing node inside a parent with a new one by calling the replaceChild function.
There are also properties for doing things like accessing and creating document content. For example, the documentElement refers to the root document element node. There are creation functions, like createElement, createTextNode, and so on, that allow you to create new nodes of the given type. There are also functions for accessing nodes in the document. For example, the getElementsByTagName function will return a list of tags that match a given tag name. So, for example, you can ask the document to getElementsByTagName and give it something like P and that would give you all of the paragraph tags.
You can also call getElementById and that will return a single element that matches the ID you pass in. So if the element has an ID attribute set to a certain string you can retrieve it using this function. Finally, there are some other important miscellaneous properties. For example, you can get and set the attributes on a tag and remove a given attribute from an element. There's also a property called innerHTML and that will give you or allow you to set the HTML content of a given tag simply by passing in a text string that contains well-formed HTML.
And finally, there's the data property, which gets the text data of an element, comment, or a text node. Throughout the rest of this chapter we're going to exercising these functions to perform various operations on XML content and in our web pages, so let's get started with that now.
- What is XML?
- Advantages and drawbacks of XML
- Proper XML syntax
- Working with XML namespaces
- Styling XML tags
- Discovering and creating document content
- Manipulating XML content using XPath and XSLT
- Document type definitions and XML schema