In this chapter we will learn most commonly used properties and methods to accessing element of DOM . There are several properties and methods you can use to access and manipulate HTML elements in JavaScript. Here is a list of some commonly used ones:
getElementById(): This method allows you to access an HTML element using its id attribute.
getElementsByClassName(): This method returns a collection of HTML elements that have the same class name.
getElementsByTagName(): This method returns a collection of HTML elements that have the specified tag name.
querySelector(): This method returns the first HTML element that matches the specified CSS selector.
querySelectorAll(): This method returns a list of HTML elements that match the specified CSS selector.
innerHTML: This property allows you to get or set the HTML content inside an element.
textContent: This property allows you to get or set the text content inside an element.
setAttribute(): This method allows you to set the value of an attribute on an HTML element.
getAttribute(): This method allows you to get the value of an attribute on an HTML element.
classList: This property returns a list of the classes for an HTML element and provides methods to add, remove, and toggle classes.
style: This property allows you to get or set the style of an HTML element.
parentNode: This property allows you to access the parent node of an HTML element.
childNodes: This property allows you to access the child nodes of an HTML element.
children: This property allows you to access the child elements of an HTML element.
nextSibling: This property allows you to access the next sibling of an HTML element.
previousSibling: This property allows you to access the previous sibling of an HTML element.
Now, here are examples for each of the properties related to accessing elements in JavaScript:
<form> <labelfor="name">Name:</label> <inputtype="text"name="name"id="name" /> <br /> <labelfor="email">Email:</label> <inputtype="email"name="email"id="email" /></form><script>constelements=document.getElementsByName('email');console.log(elements[0].value); // outputs the value of the email input field</script>
The innerHTML property is used to get or set the HTML content of an element.
Example:
<divid="example">This is an example element</div>
constexampleElement=document.getElementById("example");// Get the current HTML content of the elementconstcurrentHTML=exampleElement.innerHTML;console.log(currentHTML); // Output: "This is an example element"// Set new HTML content for the elementexampleElement.innerHTML ="<p>This is new HTML content</p>";
textContent:
The textContent property is used to get or set the text content of an element.
Example:
<divid="example">This is an example element</div>
constexampleElement=document.getElementById("example");// Get the current text content of the elementconstcurrentText=exampleElement.textContent;console.log(currentText); // Output: "This is an example element"// Set new text content for the elementexampleElement.textContent ="This is new text content";
style:
The style property is used to get or set the CSS style of an element.
javascriptCopy codeconst exampleElement =document.getElementById("example");// Get the current style of the elementconstcurrentStyle=exampleElement.style;console.log(currentStyle.backgroundColor); // Output: "red"// Set new style for the elementexampleElement.style.backgroundColor ="blue";exampleElement.style.width ="200px";exampleElement.style.height ="200px";
classList:
The classList property is used to get or set the classes of an element.
Example:
htmlCopy code<divid="example"class="box"></div>
javascriptCopy codeconst exampleElement =document.getElementById("example");// Get the current classes of the elementconstcurrentClasses=exampleElement.classList;console.log(currentClasses); // Output: ["box"]// Add a new class to the elementexampleElement.classList.add("red");