JavaScript Tutorial

The language for programming web pages.

JS DOM

JavaScript HTML DOM

The HTML DOM (Document Object Model) is a programming interface for HTML. When a web page is loaded, the browser creates a Document Object Model of the page. JavaScript can change all HTML elements and attributes in the page.

Common DOM Methods:

getElementById()
getElementsByClassName()
querySelector()
querySelectorAll()
createElement()
appendChild()
removeChild()
innerHTML / textContent

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
<style>
  body{font-family:Arial;padding:20px;}
  .item{padding:10px;margin:5px 0;background:#f0f4ff;border-radius:5px;border-left:4px solid #f7df1e;display:flex;justify-content:space-between;align-items:center;}
  button{padding:6px 12px;border:none;border-radius:4px;cursor:pointer;}
  .del-btn{background:#dc3545;color:white;}
</style>
</head>
<body>
<h2>DOM Manipulation — Todo List</h2>
<div style="display:flex;gap:10px;margin-bottom:15px;">
  <input id="taskInput" type="text" placeholder="Add a task..." style="flex:1;padding:10px;border:2px solid #f7df1e;border-radius:5px;">
  <button onclick="addTask()" style="padding:10px 20px;background:#f7df1e;color:#1a1a2e;border:none;border-radius:5px;font-weight:bold;">+ Add</button>
</div>
<div id="taskList"></div>
<script>
function addTask() {
  const input = document.getElementById("taskInput");
  const text = input.value.trim();
  if (!text) return;
  const list = document.getElementById("taskList");
  const item = document.createElement("div");
  item.className = "item";
  item.innerHTML = `<span>${text}</span><button class="del-btn" onclick="this.parentElement.remove()">Delete</button>`;
  list.appendChild(item);
  input.value = "";
}
document.getElementById("taskInput").addEventListener("keypress", e => {
  if (e.key === "Enter") addTask();
});
</script>
</body></html>

Result

Topics