XML DOM Tutorial

Learn JSON  Learn W3.JS  Web Templates  Learn XML DOM  W3.JS Reference  W3.JS Examples  XML HOME  XML Introduction  XML How to use  XML Tree 

The DOM defines a standard for accessing and manipulating documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The HTML DOM defines a standard way for accessing and manipulating HTML documents. It presents an HTML document as a tree-structure.

The XML DOM defines a standard way for accessing and manipulating XML documents. It presents an XML document as a tree-structure.

Understanding the DOM is a must for anyone working with HTML or XML.

All HTML elements can be accessed through the HTML DOM.

This example changes the value of an HTML element with id="demo":

This example changes the value of the first <h1> element in an HTML document:

Note: Even if the HTML document contains only ONE <h1> element you still have to specify the array index [0], because the getElementsByTagName() method always returns an array.

You can learn a lot more about the HTML DOM in our JavaScript tutorial.

All XML elements can be accessed through the XML DOM.

The XML DOM is:

In other words: The XML DOM is a standard for how to get, change, add, or delete XML elements.

This code retrieves the text value of the first <title> element in an XML document:

The XML file used in the examples below is books.xml.

This example reads "books.xml" into xmlDoc and retrieves the text value of the first <title> element in books.xml:

This example loads a text string into an XML DOM object, and extracts the info from it with JavaScript:

The DOM models XML as a set of node objects. The nodes can be accessed with JavaScript or other programming languages. In this tutorial we use JavaScript.

The programming interface to the DOM is defined by a set standard properties and methods.

Properties are often referred to as something that is (i.e. nodename is "book").

Methods are often referred to as something that is done (i.e. delete "book").

These are some typical DOM properties:

Note: In the list above, x is a node object.

Note: In the list above, x is a node object.

HTML, CSS, JavaScript, PHP, jQuery, Bootstrap and XML.

Your message has been sent to W3Schools.

  1. A standard object model for XML
  2. A standard programming interface for XML
  3. Platform- and language-independent
  4. A W3C standard
  1. xmlDoc - the XML DOM object created by the parser.
  2. getElementsByTagName("title")[0] - get the first <title> element
  3. childNodes[0] - the first child of the <title> element (the text node)
  4. nodeValue - the value of the node (the text itself)
  1. x.nodeName - the name of x
  2. x.nodeValue - the value of x
  3. x.parentNode - the parent node of x
  4. x.childNodes - the child nodes of x
  5. x.attributes - the attributes nodes of x
  1. x.getElementsByTagName(name) - get all elements with a specified tag name
  2. x.appendChild(node) - insert a child node to x
  3. x.removeChild(node) - remove a child node from x

DOM node tree

colorpicker

W3Schools.com