Methods for Direct DOM Node Selection and Manipulation
Tech
3
Direct DOM Node Selection Methods
JavaScript provides several methods to directly select elements from the Document Object Model (DOM). These methods are essential for interacting with and modifying web page content.
1. Selecting by ID
The getElementById() method retrieves a single element based on its unique id attribute.
<!DOCTYPE html>
<html>
<head>
<script>
function modifyDivContent() {
const targetDiv = document.getElementById("mainDiv");
console.log(targetDiv);
targetDiv.textContent = "Updated div content";
}
</script>
</head>
<body>
<div id="mainDiv">Original content</div>
<button onclick="modifyDivContent()">Update by ID</button>
</body>
</html>
2. Selecting by Class Name
The getElementsByClassName() method returns a live HTMLCollection of elements sharing a specific class.
<!DOCTYPE html>
<html>
<head>
<script>
function processElementsByClass(className) {
const elementList = document.getElementsByClassName(className);
console.log(elementList);
for (let i = 0; i < elementList.length; i++) {
console.log(elementList[i]);
}
}
</script>
</head>
<body>
<div class="highlight">First highlighted div</div>
<div class="highlight">Second highlighted div</div>
<div class="highlight">Third highlighted div</div>
<button onclick="processElementsByClass('highlight')">Select by Class</button>
</body>
</html>
3. Selecting by Tag Name
The getElementsByTagName() method retrieves all element with a given tag name.
<!DOCTYPE html>
<html>
<head>
<script>
function getAllParagraphs() {
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs);
for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i]);
}
}
</script>
</head>
<body>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<input type="text" value="Not a paragraph">
<button onclick="getAllParagraphs()">Select Paragraphs</button>
</body>
</html>
4. Selecting by Name Attribute
The getElementsByName() method returns a NodeList of elements with a specific name attribute.
<!DOCTYPE html>
<html>
<head>
<script>
function getSelectionOptions() {
const options = document.getElementsByName("colorChoice");
console.log(options);
for (let i = 0; i < options.length; i++) {
console.log(options[i]);
}
}
</script>
</head>
<body>
Favorite Color:
<input type="radio" name="colorChoice" value="red"> Red
<input type="radio" name="colorChoice" value="blue"> Blue
<input type="radio" name="colorChoice" value="green"> Green
<button onclick="getSelectionOptions()">Select by Name</button>
</body>
</html>
Manipulating Element Attributes
There are two primary syntaxes for getting and setting element attributes.
Syntax 1: Dot Notation
<!DOCTYPE html>
<html>
<head>
<script>
function changeInputProperties() {
const inputField = document.getElementById("textInput");
// Get attribute values
console.log(inputField.type);
console.log(inputField.value);
// Set attribute values
inputField.type = "button";
inputField.value = "Click Me";
}
</script>
</head>
<body>
<input type="text" value="Initial text" id="textInput">
<button onclick="changeInputProperties()">Change Attributes</button>
</body>
</html>
Syntax 2: getAttribute() and setAttribute() Methods
<!DOCTYPE html>
<html>
<head>
<script>
function modifyAttributes() {
const inputField = document.getElementById("textInput");
// Get attribute values
console.log(inputField.getAttribute("type"));
console.log(inputField.getAttribute("value"));
// Set attribute values
inputField.setAttribute("type", "button");
inputField.setAttribute("value", "Updated Text");
}
</script>
</head>
<body>
<input type="text" value="Initial text" id="textInput">
<button onclick="modifyAttributes()">Modify with Methods</button>
</body>
</html>
Manipulating Element Styles
Element styles can be modified iether by direct manipulating the style property or by changing the element's class.
Method 1: Direct Style Manipulation
<!DOCTYPE html>
<html>
<head>
<style>
#styleBox {
width: 150px;
height: 150px;
border: 2px solid black;
}
</style>
<script>
function applyDirectStyles() {
const box = document.getElementById("styleBox");
box.style.width = "300px";
box.style.height = "300px";
box.style.border = "5px solid blue";
box.style.backgroundColor = "lightyellow";
}
</script>
</head>
<body>
<div id="styleBox">Stylable Box</div>
<button onclick="applyDirectStyles()">Apply Direct Styles</button>
</body>
</html>
Method 2: Class-Based Styling
<!DOCTYPE html>
<html>
<head>
<style>
#styleBox {
width: 150px;
height: 150px;
border: 2px solid black;
}
.highlighted {
background-color: coral;
color: white;
font-size: 24px;
font-weight: bold;
}
</style>
<script>
function applyClassStyles() {
const box = document.getElementById("styleBox");
// Apply class to element
box.setAttribute("class", "highlighted");
// Alternative syntax:
// box.className = "highlighted";
}
</script>
</head>
<body>
<div id="styleBox">Class-stylable Box</div>
<button onclick="applyClassStyles()">Apply Class Styles</button>
</body>
</html>
