Related Topics
CSS
HTML
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="greeting">Hello World!</h1>
<button onclick="changeText()">Click me!</button>
<script>
function changeText() {
var greetingElement = document.getElementById("greeting");
greetingElement.innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
In this example, we have an HTML page with a heading (<h1>) element that has an id attribute of “greeting”, and a button element that, when clicked, calls the changeText() function.
The changeText() function gets a reference to the greetingElement using the document.getElementById() method, and then changes the text of the element using the innerHTML property.
This is just one simple example of how JavaScript can be used to manipulate the DOM. In practice, the DOM can be manipulated in many different ways, allowing for rich and dynamic web applications.
// get the element with ID "myElement"
var element = document.getElementById("myElement");
// change the text content of the element
element.textContent = "Hello, world!";
Access an element by class name:
To access an element by its class name, you can use the document.getElementsByClassName() method. This method returns a collection of elements that match the given class name. You can then loop through the collection and manipulate each element as needed.
// get all elements with class "myClass"
var elements = document.getElementsByClassName("myClass");
// loop through the elements and change their text content
for (var i = 0; i < elements.length; i++) {
elements[i].textContent = "Hello, world!";
}
Access an element by tag name:
To access an element by its tag name, you can use the document.getElementsByTagName() method. This method returns a collection of elements that match the given tag name. You can then loop through the collection and manipulate each element as needed.
// get all <p> elements
var paragraphs = document.getElementsByTagName("p");
// loop through the paragraphs and change their text content
for (var i = 0; i < paragraphs.length; i++) {
paragraphs[i].textContent = "Hello, world!";
}
Modify an element’s attributes:
To modify an element’s attributes, you can use the element’s setAttribute() method. This method takes two arguments: the name of the attribute to modify, and the new value for the attribute.
// get the image element
var image = document.getElementById("myImage");
// change the src attribute of the image
image.setAttribute("src", "newImage.jpg");
Create a new element:
To create a new element, you can use the document.createElement() method. This method takes the name of the element to create as its argument. You can then modify the properties of the new element as needed, and add it to the DOM using the appendChild() method.
// create a new <div> element
var newDiv = document.createElement("div");
// set the class and text content of the new element
newDiv.className = "myClass";
newDiv.textContent = "Hello, world!";
// add the new element to the DOM
document.body.appendChild(newDiv);
These are just a few examples of how to access and manipulate HTML elements with JavaScript. The DOM API provides many other methods and properties for working with HTML elements, so be sure to check the documentation for more information.
<div id="myDiv">Animate me!</div>
CSS:
#myDiv {
position: absolute;
top: 0;
left: 0;
}
JavaScript:
var div = document.getElementById("myDiv");
var pos = 0;
var speed = 2;
function animate() {
// update the position of the element
pos += speed;
div.style.top = pos + "px";
// check if the element has gone off the screen
if (pos > window.innerHeight) {
// reset the position of the element
pos = 0;
}
// call the animate function again in a moment
requestAnimationFrame(animate);
}
// start the animation
animate();
In this example, the JavaScript code uses the requestAnimationFrame() method to repeatedly call the animate() function, which updates the position of the <div> element by changing its top property. The pos variable keeps track of the current position of the element, and the speed variable determines how fast the element moves.
The if statement checks if the element has gone off the bottom of the screen, and if so, resets the position of the element to the top of the screen.
Note that this is just one example of how to animate an HTML element with JavaScript. There are many other ways to create animations with JavaScript, including using CSS animations or external libraries such as jQuery or GreenSock.
<button id="myButton">Click me!</button>
JavaScript:
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});
In this example, the JavaScript code uses the addEventListener() method to add a click event listener to the button element. When the user clicks the button, the anonymous function passed to addEventListener() is executed, which displays an alert message.
There are many other types of events that you can detect with JavaScript, such as mouseover, keydown, scroll, and resize. You can add event listeners to a wide range of HTML elements, including buttons, links, images, and form fields. To add an event listener to an element, you first need to obtain a reference to the element using document.getElementById() or another method, and then call addEventListener() with the name of the event and the function to be executed when the event is triggered.
Popular Category
Topics for You
CSS
Go through our study material. Your Job is awaiting.