DOM Navigation And Nodes
In the Document Object Model (DOM), nodes represent different parts of an HTML or XML document. Nodes can be elements, attributes, text, etc. Understanding DOM navigation and nodes is crucial for effectively traversing and manipulating the document structure using JavaScript.
DOM Navigation:
DOM navigation is crucial for accessing, manipulating, and updating the content of a web page.
Element | Description | Example |
parentNode | Returns the parent node of an element | var parentDiv = myDiv.parentNode; |
childNodes | Returns a collection of child nodes of an element | var myChildren = myDiv.childNodes; |
firstChild | Returns the first child node of an element | var firstChild = myDiv.firstChild; |
lastChild | Returns the last child node of an element | var lastChild = myDiv.lastChild; |
nextSibling | Returns the next sibling node of an element | var nextSibling = myDiv.nextSibling; |
previousSibling | Returns the previous sibling node of an element | var previousSibling = myDiv.previousSibling; |
DOM Node:
In the context of the DOM, a node is a single point in the node tree. Various things that are nodes are the document itself, elements, text, and comments.
DOM Node | Description | Example |
nodeType | Returns the type of the node | element.nodeType === 1; // returns true for element nodes |
nodeName | Returns the name of the node | element.nodeName // returns the tag name of an element node |
nodeValue | Returns or sets the value of the node | textNode.nodeValue = “new text”; // btnbyID |
appendChild() | Adds a new child node to the end of the current node’s child nodes | parent.appendChild(newChild); |
removeChild() | Removes a child node from the current node’s child nodes | parent.removeChild(child); |
replaceChild() | Replaces a child node with a new node | parent.replaceChild(newChild, oldChild); |
Example
In this example, we have an HTML table with two rows and two cells in each row. The JavaScript code demonstrates various operations on the table using DOM manipulation.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Table Manipulation</title>
</head>
<body>
<table>
<tr id=”row1″>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr id=”row2″>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<script>
// Get the table element
const table = document.querySelector(‘table’);
// Get the first row using its ID
const row1 = table.querySelector(‘#row1’);
// Create a new cell
const newCell = document.createElement(‘td’);
newCell.textContent = ‘Cell 3’;
// Append the new cell to the end of the first row
row1.appendChild(newCell);
// Remove the second row using its ID
const row2 = table.querySelector(‘#row2’);
table.removeChild(row2);
// Replace the first cell in the first row with a new cell
const oldCell = row1.querySelector(‘td’);
const newCell2 = document.createElement(‘td’);
newCell2.textContent = ‘New Cell’;
row1.replaceChild(newCell2, oldCell);
</script>
</body>
</html>
Example
1. Selection:
– `const table = document.querySelector(‘table’);`: Selects the table element using `document.querySelector`.
2. Appending a New Cell:
– `const newCell = document.createElement(‘td’);`: Creates a new `td` (table cell) element.
– `newCell.textContent = ‘Cell 3’;`: Sets the text content of the new cell.
– `row1.appendChild(newCell);`: Appends the new cell to the end of the first row.
3. Removing a Row:
– `const row2 = table.querySelector(‘#row2’);`: Selects the second row using its ID.
– `table.removeChild(row2);`: Removes the second row from the table.
4. Replacing a Cell:
– `const oldCell = row1.querySelector(‘td’);`: Selects the first cell in the first row.
– `const newCell2 = document.createElement(‘td’);`: Creates a new cell.
– `newCell2.textContent = ‘New Cell’;`: Sets the text content of the new cell.
– `row1.replaceChild(newCell2, oldCell);`: Replaces the old cell with the new cell in the first row.
