DOM Part 2: Modifying Elements¶
1. innerText, textContent, innerHTML¶
innerText¶
Returns visible text.
element.innerText = "Hello";
textContent¶
Returns all text, including hidden.
element.textContent = "Hi";
innerHTML¶
Reads or replaces the HTML inside an element.
element.innerHTML = "<strong>Bold text</strong>";
2. Changing Styles¶
Use .style.propertyName (camelCase for CSS).
element.style.color = "red";
element.style.backgroundColor = "#f0f0f0";
3. classList Methods¶
add() – Add a class¶
element.classList.add("active");
remove() – Remove a class¶
element.classList.remove("disabled");
toggle() – Add if missing, remove if present¶
element.classList.toggle("open");
contains() – Check if class exists¶
element.classList.contains("active"); // true/false
4. Working with Attributes¶
getAttribute()¶
let link = element.getAttribute("href");
setAttribute()¶
element.setAttribute("src", "img.png");
removeAttribute()¶
element.removeAttribute("disabled");
5. Input Values¶
Use .value for form elements.
let input = document.querySelector("#username");
console.log(input.value); // get
input.value = "newUser123"; // set
6. Example: Modify Button Text & Style¶
let btn = document.querySelector("#submit");
btn.innerText = "Sending...";
btn.style.backgroundColor = "gray";
btn.classList.add("disabled");