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 Method | Syntax | Argument Type | Effect | Returned Value |
appendChild | fatherObj.appendChild(childObj) | An [object] | Appends an object (childObj ) as a child to the specified object (fatherObj ). | Appended [object] |
applyElement | childObj.applyElement(fatherObj) | An [object] | Appends the object (childObj ) as a child to an object (fatherObj ). | Appended [object] |
clearAttributes | clearedObj.clearAttributes() | NA | Removes all attributes (and their values) from the object (clearedObj ) | Cleared [object] |
cloneNode | newObj = originalObj.cloneNode(deep) | Boolean | Creates 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] |
createElement | newObj = document.createElement("htmlTag") | HTML Tag (ex: TR , IMG ) | Creates a new tag node (newObj ). | An [object] |
createTextNode | newObj = document.createTextNode(string) | A String (ex: "this is the document body" ) | Creates a new text node (newObj ). | An [object] |
hasChildNodes | hasChildrenFlag = testedObj.hasChildNodes() | NA | Returns whether the object (testedObj ) has children. | true for yes, false for no |
insertBefore | parentObj.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 |
mergeAttributes | targetObj.mergeAttributes(sourceObj) | An [object] | Copies all attributes from the source object (sourceObj ) to the target object (targetObj ). | Target [object] |
removeNode | deletedObj.removeNode(deep) | NA | Removes the deletedObj 's subtree from the document hierarchy when deep is true . Removes just the node when deep is false . | Removed [object] |
replaceNode | oldObj.replaceNode(newObj) | An [object] | Replaces an existing node (oldObj ) with a new node (newObj ). | Replaced [object] |
swapNode | firstObj.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
URL: https://www.webreference.com/js/column43/properties.html