How to select an element and manipulate it

This is just a simple example I made today that shows how I was able to manipulate the h2 tag on this page.

As you can see it selects the h2 and changes the color to white then black every 1 second.

I’m sure you won’t stay for longer than 2 seconds on this page.

See if you can try manipulating anything on this page yourself by opening the console

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The DOM - teachMeJavascript</title>
</head>
<body>
<h2>How to select an element and manipulate it</h2>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
var h2 = document.querySelector("h2"); //Select
var isWhite = false;
setInterval(function(){
if (isWhite){
h2.style.color = "white";
}else {
h2.style.color = "black";
}
isWhite = !isWhite;
}, 1000)

DOM Selectors

The Document interface has a huge list you can use to do all kinds of things, this is just a list of the one’s I learned how to use.

I can see how they can be used pretty commonly.

Common Methods of DOM

1
2
3
4
5
document.getElementById()
document.getElementByClass()
document.getElementByTag()
document.querySelector()
document.querySelectorAll()

To learn more about DOM check out: