The Document Object Model (DOM), Part 4: Table of Methods | WebReference

The Document Object Model (DOM), Part 4: Table of Methods

The Document Object Model (DOM), Part 4 (3)

Manipulating Documents using Methods

The Document Object Model provides a set of methods that you can use to create, delete, insert, exchange, and replace nodes with. When using the DOM's methods, you need to think in the terms we have introduced in the last three columns, i.e. document trees and document nodes. The table below shows the DOM's methods. For each method, it shows the syntax by which you may use the method, its argument type, its description, and the value it returns. The terms object and node are completely interchangeable in this table. Any reference to an object may be viewed as a reference to a document tree node, and vice versa. In the following pages we'll cover in depth each of the methods below.

The outcome of cloneNode(deep) and removeNode(deep) depends on the value of deep. When deep is true, the cloneNode method clones a complete subtree rooted at the specified node. When deep is false, just the specified node is duplicated, having no children at all. Similarly, when deep is true, the removeNode method removes a complete subtree rooted at the specified node. When deep is false, just the specified node is removed and all its children become children of their former father's father (former grandfather).

DOM's MethodSyntaxArgument TypeEffectReturned Value
appendChildfatherObj.appendChild(childObj)An [object]Appends an object (childObj) as a child to the specified object (fatherObj).Appended [object]
applyElementchildObj.applyElement(fatherObj)An [object]Appends the object (childObj) as a child to an object (fatherObj).Appended [object]
clearAttributesclearedObj.clearAttributes()NARemoves all attributes (and their values) from the object (clearedObj)Cleared [object]
cloneNodenewObj = originalObj.cloneNode(deep) BooleanCreates a new object (newObj), identical to the original object (originalObj) if deep is true. When deep is false only root will be cloned.An [object]
createElementnewObj = document.createElement("htmlTag")HTML Tag (ex: TR, IMG)Creates a new tag node (newObj).An [object]
createTextNodenewObj = document.createTextNode(string)A String (ex: "this is the document body")Creates a new text node (newObj).An [object]
hasChildNodeshasChildrenFlag = testedObj.hasChildNodes()NAReturns whether the object (testedObj) has children.true for yes, false for no
insertBeforeparentObj.insertBefore(childObj, brotherObj)An [object]Inserts an object (childObj) as a child of the specified object (parentObj) just before the specified child (brotherObj).true if successful, null if not
mergeAttributestargetObj.mergeAttributes(sourceObj)An [object]Copies all attributes from the source object (sourceObj) to the target object (targetObj).Target [object]
removeNodedeletedObj.removeNode(deep)NARemoves the deletedObj's subtree from the document hierarchy when deep is true. Removes just the node when deep is false.Removed [object]
replaceNodeoldObj.replaceNode(newObj)An [object]Replaces an existing node (oldObj) with a new node (newObj).Replaced [object]
swapNodefirstObj.swapNode(secondObj)An [object]Exchanges the positions of two nodes, firstObj and secondObj.Swapped Out [object]

Produced by Yehuda Shiran and Tomer Shiran

Created: July 5, 1999
Revised: September 17, 1999