Target the DOM

 
<html>
<head>
   <title>Practice JavaScript</title>
   
   
   <script type="text/javascript">
   
     function doThis()
     {
     
     
     
     }   
   
   </script>
   
</head>
<body>
<h1 id="heading">Learn to target the DOM</h1>
 
<ul>
  <li id="one">Larry</li>
  <li id="two">Moe</li>
  <li id="three">Curly</li>
  </ul>
  
  <br>
  <input type="button" value="Press me" onclick="doThis()">  
  
</body>
</html>

 
 
alert("bingo");
 
 
 
var i = document.getElementById("heading");
alert("Name: " + i.nodeName);
 
 
 
 
 
 
var i = document.getElementById("heading");
alert(i.hasChildNodes());
 
 
 
 
 
var i = document.getElementById("heading");
alert(i.childNodes.length);
 
 
 
 
 
var i = document.getElementById("heading");
alert(i.firstChild.nodeName);
 
 
 
 
var i = document.getElementById("heading");
alert(i.firstChild.nodeValue);
 
 
 
 
var nodeList = document.getElementsByTagName("li");
alert(nodeList.length);
 
 
 
 
var nodeList = document.getElementsByTagName("li");
for (var j = 0; j < nodeList.length; j++)
  {
    alert(nodeList[j].nodeName);
  }
 
 
 
var nodeList = document.getElementsByTagName("li");
for (var j = 0; j < nodeList.length; j++)
  {
    alert(nodeList[j].firstChild.nodeValue);
  }
 
 
 
var nodeList = document.getElementsByTagName("li");
nodeList[1].firstChild.nodeValue = "Terry";
 
 
 
 
var nodeList = document.getElementsByTagName("li");
 
var newAttr = document.createAttribute("style");
newAttr.nodeValue = "font-family: Vivaldi; font-size: xx-large;";
 
nodeList[1].setAttributeNode(newAttr);
 
 
 
 
 
var nodeList = document.getElementsByTagName("ul");
for (var j = 0; j < nodeList.length; j++)
{
  if (nodeList[j].hasChildNodes())
  {
	for( var k = 0; k < nodeList[j].childNodes.length; k++)
	{
	   alert(nodeList[j].childNodes[k].nodeName);
	}
  }
}
 
 
 
 
var nodeList = document.getElementsByTagName("ul");
for (var j = 0; j < nodeList.length; j++)
{
  if (nodeList[j].hasChildNodes())
  {
	for( var k = 0; k < nodeList[j].childNodes.length; k++)
	{
	   if (nodeList[j].childNodes[k].nodeName == "LI")
	   {
			alert(nodeList[j].childNodes[k].firstChild.nodeValue);
	   }
	}
  }
}
 
 
 
 
var nodeList = document.getElementsByTagName("ul");
for (var j = 0; j < nodeList.length; j++)
{
  if (nodeList[j].hasChildNodes())
  {
	for( var k = 0; k < nodeList[j].childNodes.length; k++)
	{
	   if (nodeList[j].childNodes[k].nodeName == "LI")
	   {
			
			var newPurpleGold = document.createAttribute("style");
			newPurpleGold.nodeValue = "color: purple; background-color: gold";
			nodeList[j].childNodes[k].setAttributeNode(newPurpleGold);
			
	   }
	}
  }
}
 
 
 
var childText = document.createTextNode("Amazon");
var amazonNode = document.createElement("A");
amazonNode.appendChild(childText);
amazonNode.setAttribute("href", "http://amazon.com");
 
var nodeList = document.getElementsByTagName("ul");
nodeList[0].appendChild(amazonNode);
 
 
 
var childText = document.createTextNode("Amazon");
var amazonNode = document.createElement("A");
amazonNode.appendChild(childText);
amazonNode.setAttribute("href", "http://amazon.com");
 
var amazonLInode = document.createElement("LI");
amazonLInode.appendChild(amazonNode);
 
var nodeList = document.getElementsByTagName("ul");
 
nodeList[0].insertBefore(amazonLInode, nodeList[0].childNodes[0]);