Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
9 views

JavaScript Notes 3

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

JavaScript Notes 3

Uploaded by

gourabdas2128
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

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

You might also like