<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]);