Document Object Model (DOM) is a standard programming interface recommended by W3C to deal with extensible markup languages. The DOM is the standard for how to get, modify, add, or remove HTML elements. Everything we do with a web page in JavaScript is done through the DOM.
This article will show you various ways of how to get DOM elements using DOM API.
document.getElementById
document.getElementById() get a DOM element by its id. return a HTMLElement object.
<div id="app"></div>
const app = document.getElementById("app");
document.getElementsByTagName
document.getElementsByTagName() get a DOM element by its tag name. return a HTMLCollection object.
<div />
<div />
const divs = document.getElementsByTagName("div");
console.log(divs.length); // 2
document.getElementsByClassName
document.getElementsByClassName() get a DOM element by its class name. return a HTMLCollection object.
<div class="row" />
<div class="row" />
<div class="row" />
const rows = document.getElementsByClassName("row");
console.log(rows.length); // 3
document.querySelector
document.querySelector() get a DOM element by its CSS selector. return a HTMLElement object. CSS selector is very powerful, and can be used to get a DOM element by its tag name, class name, id, or any other attribute.
<div id="app" />
<div class="container" />
const appDiv = document.querySelector("#app");
const containerDiv = document.querySelector(".container");
document.querySelectorAll
document.querySelectorAll() get a DOM element by its CSS selector. return a NodeList object. The only difference between querySelectorAll() and querySelector() is that querySelectorAll() returns a NodeList object.
<div class="container" />
<div class="container" />
const divs = document.querySelectorAll(".container");
console.log(divs.length); // 2
firstChild
element.firstChild get the first child of the element. return a Node object.
<div>
<span>Hello</span>
</div>
const div = document.querySelector("div");
const span = div.firstChild; // <span>Hello</span>
lastChild
element.lastChild get the last child of the element. return a Node object.
<div>
<span>Hello</span>
<span>World</span>
</div>
const div = document.querySelector("div");
const span = div.lastChild; // <span>World</span>
childNodes
element.childNodes get all children of the element. return a NodeList object.
<div>
<span>Hello</span>
<span>World</span>
</div>
previousSibling
element.previousSibling get the previous sibling of the element. return a Node object.
<span>1</span>
<span id="span2">2</span>
<span>3</span>
const span2 = document.querySelector("#span2");
const span1 = span2.previousSibling; // <span>1</span>
nextSibling
element.nextSibling get the next sibling of the element. return a Node object.
<span>1</span>
<span id="span2">2</span>
<span>3</span>
const span2 = document.querySelector("#span2");
const span3 = span2.nextSibling; // <span>3</span>
parentNode
element.parentNode get the parent node of the element. return a Node object.
<div>
<span>1</span>
<span id="span2">2</span>
<span>3</span>
</div>
const span2 = document.querySelector("#span2");
const parentNode = span2.parentNode; // <div>
NodeList
As you can see, some of the methods above return a NodeList object. It's a array like object, and you can use it like an array.
Finally, I will show you how to iterate through a NodeList object. You can use for loop, forEach function, or for of loop.
const divs = document.querySelectorAll("div");
for (let i = 0; i < divs.length; i++) {
const div = divs[i];
console.log(div.innerHTML);
}
// forEach
divs.forEach((div) => {
console.log(div.innerHTML);
});
// for of
for (const div of divs) {
console.log(div.innerHTML);
}
This article is original, without authorization, any media or personal we media and any statement reproduced
Commercial infringement will be investigated, if you need authorization please contact[email protected]
The original link:https://www.jstyro.com/blog/how-do-i-get-dom-elements-using-dom-api
Buy me a coffee