getElementById() – Selects an element by its ID.
getElementsByClassName() – Selects elements by class name.
getElementsByTagName() – Selects elements by tag name.
querySelector() – Selects the first element matching a CSS selector.
querySelectorAll() – Selects all elements matching a CSS selector.
innerHTML – Gets or sets HTML content of an element.
textContent – Gets or sets text content of an element.
setAttribute() – Adds or changes an element's attribute.
getAttribute() – Retrieves the value of an attribute.
removeAttribute() – Removes an attribute from an element.
[Link]() – Adds a class to an element.
[Link]() – Removes a class from an element.
[Link]() – Toggles a class on/off for an element.
style – Directly changes the inline style of an element.
createElement() – Creates a new HTML element.
appendChild() – Appends a child element to a parent.
removeChild() – Removes a child element from a parent.
replaceChild() – Replaces an existing child with a new one.
insertBefore() – Inserts a new element before another.
parentNode – Accesses the parent of an element.
childNodes – Returns a NodeList of child nodes.
firstChild / lastChild – Gets the first/last child node.
nextSibling / previousSibling – Gets the next/previous sibling node.
firstElementChild / lastElementChild – Gets the first/last child element.
nextElementSibling / previousElementSibling – Gets the next/previous sibling
element.
closest() – Finds the closest ancestor matching a selector.
addEventListener() – Adds an event listener to an element.
removeEventListener() – Removes an event listener from an element.
offsetHeight / offsetWidth – Gets the height/width of an element (with
padding/border).
clientHeight / clientWidth – Gets the height/width of an element (without
border/scrollbar).
scrollHeight / scrollWidth – Gets the full scrollable height/width of an element.
getBoundingClientRect() – Gets the element's size and position relative to the
viewport.
animate() – Animates an element using keyframes.
-----------------------------------------------------------------------------------
------------------------------------------------------------------
[Link]("myId");
[Link]("myClass");
[Link]("div");
[Link](".myClass");
[Link](".myClass");
[Link]("myId").innerHTML = "Hello, World!";
[Link]("myId").textContent = "Text content";
[Link]("myId").setAttribute("type", "button");
[Link]("myId").getAttribute("type");
[Link]("myId").removeAttribute("type");
[Link]("myId").[Link]("newClass");
[Link]("myId").[Link]("oldClass");
[Link]("myId").[Link]("active");
[Link]("myId").[Link] = "blue";
[Link]("div");
[Link]("parent").appendChild([Link]("div"));
[Link]("parent").removeChild([Link]("child"));
[Link]("parent").replaceChild(newChild, oldChild);
[Link]("parent").insertBefore(newChild, existingChild);
[Link]("child").parentNode;
[Link]("parent").childNodes;
[Link]("parent").firstChild;
[Link]("parent").lastChild;
[Link]("parent").nextSibling;
[Link]("parent").previousSibling;
[Link]("parent").firstElementChild;
[Link]("parent").lastElementChild;
[Link]("parent").nextElementSibling;
[Link]("parent").previousElementSibling;
[Link]("child").closest(".parentClass");
[Link]("myId").addEventListener("click", function()
{ alert('Clicked!'); });
[Link]("myId").removeEventListener("click", myFunction);
[Link]("myId").offsetHeight;
[Link]("myId").clientHeight;
[Link]("myId").scrollHeight;
[Link]("myId").getBoundingClientRect();
[Link]("myId").animate([{ opacity: 0 }, { opacity: 1 }],
{ duration: 1000 });