JavaScript Tutorial
DOM manipulation lets JavaScript update page structure, styles, and content dynamically.
Interactive websites rely on DOM operations for input handling, validation messages, and real-time UI updates.
// Add syntax lines here.const heading = document.querySelector("#title");
if (heading) {
heading.textContent = "Updated from JavaScript";
}textContent is safe for plain text updates.
const btn = document.querySelector("#toggleBtn");
btn?.addEventListener("click", () => {
document.body.classList.toggle("dark");
});classList toggle is a common and clean UI pattern.
Use querySelector for single element and querySelectorAll for NodeList collections.
Check for null before manipulating selected elements to prevent runtime errors.
Prefer semantic selectors and data attributes for robust targeting.
Use textContent for plain text insertion and innerHTML only when trusted HTML is intended.
ClassList API (add/remove/toggle/contains) is cleaner than manual className concatenation.
Batch updates when possible to reduce layout thrashing in complex UI updates.
const list = document.querySelector("#skills");
const data = ["HTML", "CSS", "JavaScript"];
if (list) {
list.innerHTML = data.map((item) => `<li>${item}</li>`).join("");
}Quick rendering pattern for small static-safe content.
Without
// Without this feature
// ...With
// With this feature
// ...Use textContent or sanitize inputs before HTML injection.
Guard with null checks or optional chaining before mutation.
Batch changes with classes and minimal repaint triggers.
Both are fine. querySelector is flexible with CSS selectors; getElementById is specific and simple for ID lookups.
No, but unsafe with untrusted input due to XSS risk.
Minimize frequent reflows, batch updates, and use classes instead of inline style changes.
For learning and small tools, vanilla is great. Larger apps often benefit from framework abstractions.
Practice: Write a short example that uses JavaScript DOM Manipulation: Selecting, Updating, Rendering and run it in the compiler.
const heading = document.querySelector("#title");
if (heading) {
heading.textContent = "Updated from JavaScript";
}Both are fine. querySelector is flexible with CSS selectors; getElementById is specific and simple for ID lookups.
No, but unsafe with untrusted input due to XSS risk.
Minimize frequent reflows, batch updates, and use classes instead of inline style changes.
For learning and small tools, vanilla is great. Larger apps often benefit from framework abstractions.
Try this example in our JavaScript Compiler and modify it to explore variations.