CampusCrate is a student operating system for B.Tech students in India, combining opportunities, academic resources, communities, learning hubs, and career tools in one platform.

Who is CampusCrate built for?

CampusCrate is built for Indian engineering and B.Tech students who need a structured place to discover opportunities, access college resources, join societies, learn technical skills, and build their career profile.

What can students find on CampusCrate?

Students can find hackathons, internships, competitions, notes, test papers, cheatsheets, college communities, DSA and development learning tracks, roadmaps, profiles, and AI career tools.

Learn Code and Practice

DOM Manipulation — Bringing Pages to Life

The Document Object Model (DOM) is a tree representation of your HTML. JavaScript can read and modify any part of this tree — changing text, styles, attributes, and structure in real time.

Selecting Elements

Method	Returns	Example
`getElementById()`	Single element	`document.getElementById("app")`
`querySelector()`	First match	`document.querySelector(".card")`
`querySelectorAll()`	NodeList	`document.querySelectorAll("li")`
`getElementsByClassName()`	Live HTMLCollection	`document.getElementsByClassName("btn")`

Tip: Prefer querySelector / querySelectorAll — they accept any CSS selector.

Modifying Content

element.textContent = "Safe text";     // plain text (XSS-safe)
element.innerHTML = "<b>Bold</b>";     // parses HTML (caution!)
element.setAttribute("href", "/home");
element.classList.add("active");
element.style.color = "blue";          // inline style

Creating & Removing Elements

const li = document.createElement("li");
li.textContent = "New item";
ul.appendChild(li);         // add to end
ul.prepend(li);             // add to start
ul.removeChild(li);         // remove
li.remove();                // modern removal

Traversing the DOM

parentNode / parentElement
children / childNodes
firstElementChild / lastElementChild
nextElementSibling / previousElementSibling
closest(".selector")  ← walks up the tree

DOM Tree Visualization

document
 └── html
      ├── head
      │    └── title
      └── body
           ├── header
           ├── main
           │    ├── section
           │    └── article
           └── footer

What the DOM Actually Is

When the browser loads your HTML, it builds a tree of objects in memory called the DOM (Document Object Model). Each tag becomes a *node*, attributes become properties, and JavaScript can read or change any of it on the fly.

So when you "manipulate the DOM" you're just editing that in-memory tree, and the browser repaints the page to match.

document
└── html
    ├── head
    │   └── title  "My App"
    └── body
        ├── h1   "Welcome"
        └── ul
            ├── li  "One"
            └── li  "Two"

Step One: Find an Element

Modern selector methods cover 99% of needs:

document.querySelector("#hero");           // first match by CSS selector
document.querySelector(".card");
document.querySelectorAll("li");           // all matches (a NodeList)
document.getElementById("hero");           // by id (slightly faster)

Tip: querySelector accepts any CSS selector — "nav > a:not(.active)" works fine.

Step Two: Read or Change It

const title = document.querySelector("h1");title.textContent = "Hi there";   // change visible text
title.classList.add("highlight"); // add a class
title.classList.remove("dim");
title.classList.toggle("open");
title.setAttribute("data-id", "42");
title.style.color = "tomato";     // inline style (use sparingly)

`textContent` vs `innerHTML`

Property	What it does	When to use
`textContent`	Plain text, escaped automatically	Default choice — XSS safe
`innerHTML`	Parses HTML markup	Only with trusted content
`innerText`	Like textContent but respects CSS visibility	Rare cases

Treat innerHTML like a loaded gun. Setting element.innerHTML = userInput can let an attacker inject