If you are using VS code then you can use this command shift + 1 and enter to
auto-populate HTML Doctype in HTML or PHP.
Code for Grocery List
<html>
<body>
<div id="page">
<hl id="header">List</hl>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<script src="js/list.js "></script>
</div>
</body>
</html>
Output
DOM1.html
<html>
<head>
</head>
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<script src="js/list.js "></script>
</div>
</body>
</html>
List.js
// get elements by ID
var h_one = document.getElementById('one');
document.write('element with id one : ' + h_one.textContent + '<br>');
// get elements by class name
var h_class = document.getElementsByClassName('hot');// this is a list of
elements
var h_len = h_class.length
document.write('<br> elements with class hot <br>');
for (i = 0; i < h_len; i++) {
document.write(h_class[i].textContent + '<br>');
}
// get elements by tag
var h_tag = document.getElementsByTagName('li');
document.write('<br> elements with tag "li" <br>');
for (i = 0; i < h_tag.length; i++) {
document.write(h_tag[i].textContent + '<br>');
}
document.write("<br>querySelector<br>")
document.write(document.querySelector('#one').textContent);
document.write('<br>');
document.write("<br>querySelectorAll for class hot <br>")
var query_all_li = document.querySelectorAll('.hot')
for (i = 0; i < query_all_li.length; i++) {
document.write(query_all_li[i].textContent + '<br>');
}
list.css
h1 {
color: blueviolet;
}
li{
background-color: green;
border: 3px;
border-style: inset;
padding: 10px;
margin: 10px;
font-size: large;
}
.hot {
background-color: brown;
border: 3px;
border-style: inset;
padding: 10px;
margin: 10px;
}
SELECTING AN ELEMENT FROM A NODELIST
There are two ways to select an element from a Nodelist:
The item() method and array syntax.
Both require the index number of the element you want.
THE item() METHOD
if(h_class.length>=1){
document.write("printing 1st item from class hot <br>")
document.write(h_class.item(0));
document.write(h_class.item(0).textContent);
}
Till Page 200 of Book
