Scribd
Upload
44 views

JavaScript DOM Code Examples V6

The document provides code examples for interacting with the DOM in JavaScript, including accessing elements, adding event listeners, modifying content and styles, creating and removing elements, interacting with forms, and working with classes. Key topics covered include getting and setting element values, adding and checking for classes, and changing text, styles, and DOM structure through methods like appendChild, remove, and classList.

Uploaded by

Chris Davis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
44 views

JavaScript DOM Code Examples V6

The document provides code examples for interacting with the DOM in JavaScript, including accessing elements, adding event listeners, modifying content and styles, creating and removing elements, interacting with forms, and working with classes. Key topics covered include getting and setting element values, adding and checking for classes, and changing text, styles, and DOM structure through methods like appendChild, remove, and classList.

Uploaded by

Chris Davis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

JavaScript DOM Code Examples

What is the DOM in JavaScript and how can we access it? 2

How can we add an event listener to a DOM element in JavaScript? 3

How can we change the text content of a DOM element in JavaScript? 4

How can we change the CSS styles of a DOM element in JavaScript? 5

How can we create a new DOM element in JavaScript and add it to the page?
6

How can we remove a DOM element from the page in JavaScript? 7

How can we get the value of a form input in JavaScript? 8

How can we set the value of a form input in JavaScript? 10

How can we check if a DOM element has a specific class in JavaScript? 11

How can we add a class to a DOM element in JavaScript? 12

Laurence Svekis https://basescripts.com/


1
What is the DOM in JavaScript and how can
we access it?
The Document Object Model (DOM) is a programming interface
for web documents. It represents the page so that programs can
change the document structure, style, and content. We can
access the DOM using JavaScript's document object. Here's an
example:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Hello, world!</p>
<button id="myButton">Click me!</button>
<script src="script.js"></script>
</body>
</html>

// Accessing the DOM


const myButton = document.getElementById('myButton');
const myParagraph =
document.getElementsByTagName('p')[0];
Laurence Svekis https://basescripts.com/
2
In this example, we're accessing the DOM using
document.getElementById and
document.getElementsByTagName. The first line gets the button
element with an id of myButton, and the second line gets the first
p element on the page.

How can we add an event listener to a DOM


element in JavaScript?
We can add an event listener to a DOM element using the
addEventListener method. Here's an example:

// Adding an event listener


const myButton = document.getElementById('myButton');
myButton.addEventListener('click', () => {
console.log('Button clicked!');
});
In this example, we're adding a click event listener to the button
with an id of myButton. When the button is clicked, the arrow
function is called, which logs a message to the console.

Laurence Svekis https://basescripts.com/


3
How can we change the text content of a
DOM element in JavaScript?
We can change the text content of a DOM element using the
textContent property. Here's an example:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p id="myParagraph">Hello, world!</p>
<script src="script.js"></script>
</body>
</html>

// Changing the text content


const myParagraph =
document.getElementById('myParagraph');
myParagraph.textContent = 'Goodbye, world!';

In this example, we're changing the text content of the p element


with an id of myParagraph from "Hello, world!" to "Goodbye,
world!" using the textContent property.
Laurence Svekis https://basescripts.com/
4
How can we change the CSS styles of a DOM
element in JavaScript?
We can change the CSS styles of a DOM element using the style
property. Here's an example:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
#myDiv {
background-color: red;
color: white;
}
</style>
</head>
<body>
<div id="myDiv">Hello, world!</div>
<script src="script.js"></script>
</body>
</html>

Laurence Svekis https://basescripts.com/


5
// Changing the CSS styles
const myDiv = document.getElementById('myDiv');
myDiv.style.backgroundColor = 'green';
myDiv.style.color = 'black';

In this example, we're changing the background color of the div


element with an id of myDiv from red to green, and the text color
from white to black using the style property.

How can we create a new DOM element in


JavaScript and add it to the page?
We can create a new DOM element using the createElement
method, and we can add it to the page using the appendChild or
insertBefore method. Here's an example:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<div id="myDiv">Hello, world!</div>
<script src="script.js"></script>

Laurence Svekis https://basescripts.com/


6
</body>
</html>

// Creating and adding a new element


const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
const myDiv = document.getElementById('myDiv');
myDiv.appendChild(newParagraph);

In this example, we're creating a new p element with the text


content "This is a new paragraph.", and then adding it to the div
element with an id of myDiv using the appendChild method.

How can we remove a DOM element from the


page in JavaScript?
We can remove a DOM element from the page using the remove
method. Here's an example:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>

Laurence Svekis https://basescripts.com/


7
<body>
<div id="myDiv">Hello, world!</div>
<script src="script.js"></script>
</body>
</html>

// Removing an element
const myDiv = document.getElementById('myDiv');
myDiv.remove();

In this example, we're removing the div element with an id of


myDiv from the page using the remove method.

How can we get the value of a form input in


JavaScript?
We can get the value of a form input using the value property.
Here's an example:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>

Laurence Svekis https://basescripts.com/


8
<body>
<form>
<label for="myInput">Enter some text:</label>
<input type="text" id="myInput" name="myInput">
<button type="submit">Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>

// Getting the value of a form input


const myInput = document.getElementById('myInput');
const inputValue = myInput.value;
console.log(inputValue);

In this example, we're getting the value of the input element with
an id of myInput using the value property, and logging it to the
console.

How can we set the value of a form input in


JavaScript?
We can set the value of a form input using the value property.
Here's an example:
Laurence Svekis https://basescripts.com/
9
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<form>
<label for="myInput">Enter some text:</label>
<input type="text" id="myInput" name="myInput">
<button type="submit">Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>

// Setting the value of a form input


const myInput = document.getElementById('myInput');
myInput.value = 'Some text';
In this example, we're setting the value of the input element with
an id of myInput to "Some text" using the value property.

Laurence Svekis https://basescripts.com/


10
How can we check if a DOM element has a
specific class in JavaScript?
We can check if a DOM element has a specific class by using the
classList property and the contains method. Here's an example:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.myClass {
color: red;
}
</style>
</head>
<body>
<div id="myDiv" class="myClass">Hello, world!</div>
<script src="script.js"></script>
</body>
</html>
// Checking if an element has a specific class
const myDiv = document.getElementById('myDiv');
if (myDiv.classList.contains('myClass')) {

Laurence Svekis https://basescripts.com/


11
console.log('The element has the class "myClass".');
} else {
console.log('The element does not have the class
"myClass".');
}

In this example, we're checking if the div element with an id of


myDiv has the class myClass using the classList property and the
contains method.

How can we add a class to a DOM element in


JavaScript?
We can add a class to a DOM element using the classList property
and the add method. Here's an example:

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
.myClass {
color: red;
}

Laurence Svekis https://basescripts.com/


12
</style>
</head>
<body>
<div id="myDiv">Hello, world!</div>
<script src="script.js"></script>
</body>
</html>

// Adding a class to an element


const myDiv = document.getElementById('myDiv');
myDiv.classList.add('myClass');

In this example, we're adding the class myClass to the div


element with an id of myDiv using the classList property and the
add method. This will change the text color of the element to red,
as defined in the style tag.

Laurence Svekis https://basescripts.com/


13

You might also like