It all starts with the document, the root node
Open up the JS console and try these 4 lines:
document.URL;
document.head;
document.body;
document.links;
The document comes with a bunch of methods for selecting elements. We're going to learn about the following 5:
var tag = document.getElementById("highlight");
Takes a string argument and returns the one element with a matching ID
<body>
<h1>Hello</h1>
<h1>Goodbye</h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
</body>
var tags = document.getElementsByClassName("bolded");
console.log(tags[0]);
Takes a string argument and returns a list of elements that have a matching class
<body>
<h1>Hello</h1>
<h1>Goodbye</h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
</body>
var tags = document.getElementsByTagName("li");
console.log(tags[0]);
Returns a list of all elements of a given tag name, like <li> or <h1>
<body>
<h1>Hello</h1>
<h1>Goodbye</h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
</body>
var tags = document.getElementsByTagName("h1");
console.log(tags[0]);
Returns a list of all elements of a given tag name, like <li> or <h1>
<body>
<h1>Hello</h1>
<h1>Goodbye</h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
</body>
//select by ID
var tag = document.querySelector("#highlight");
Returns the first element that matches a given CSS-style selector
<body>
<h1>Hello</h1>
<h1>Goodbye</h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
</body>
//select by Class
var tag = document.querySelector(".bolded");
Returns the first element that matches a given CSS-style selector
<body>
<h1>Hello</h1>
<h1>Goodbye</h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
</body>
//select by tag
var tag = document.querySelector("h1");
Returns the first element that matches a given CSS-style selector
<body>
<h1>Hello</h1>
<h1>Goodbye</h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
</body>
//select by tag
var tags = document.querySelectorAll("h1");
Returns a list of elements that matches a given CSS-style selector
<body>
<h1>Hello</h1>
<h1>Goodbye</h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
</body>
//select by class
var tags = document.querySelectorAll(".bolded");
Returns a list of elements that matches a given CSS-style selector
<body>
<h1>Hello</h1>
<h1>Goodbye</h1>
<ul>
<li id="highlight">List Item 1</li>
<li class="bolded">List Item 2</li>
<li class="bolded">List Item 3</li>
</ul>
</body>
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>I am an h1!</h1>
<p id="first" class="special">Hello</p>
<p class="special">Goodbye</p>
<p>Hi Again</p>
<p id="last">Goodbye Again</p>
</body>
</html>
Come up with 4 different ways to select the first <p> tag