/ Add an event listener of DOMContentLoaded to the whole document and call an anonymous function.
// You can then wrap your code in that function's brackets
// and it will execute once loading is complete.document.addEventListener('DOMContentLoaded', function () {// Our hawaiian greeting is displayed as soon as the page loads,console.log('Aloha');});

// We can use document.querySelector to get the first element that matches a certain criteria.
// It's only argument is a string containing one or more CSS selectors.var lochNess = document.querySelector(".monsters");console.log("It's from Scotland - " + lochNess.textContent);// We can also get all elements of a certain type or class by using document.querySelectorAll.
// This returns a NodeList of all the elements that fit our criteria.var scary = document.querySelectorAll(".monsters");console.log("Hide and seek champions: ");for (var i = 0; i < scary.length; i++) {console.log(scary[i].innerHTML);}

<ul><li class="monsters">Nessy</li><li class="monsters">Big foot</li><li class="monsters">La chupacabra</li></ul>

var btn = document.querySelectorAll("button"),list = document.querySelector("ul");// We call the addEventListener method on our desired event target(in this case a button).
// This will start a listener that will wait until a click is generated on the element.btn[0].addEventListener("click", function () {// When this button is clicked we want to enable zooming of our list.// To do this we add an event listener to our list itself,// so when the cursor hovers it, the enlarge function gets called.list.addEventListener("mouseover", enlarge);
});// To disable the zooming we can simply use removeEventListener.btn[1].addEventListener("click", function () {// Removing event listeners doesn't work on anonymous functions, so always use a named one.list.removeEventListener("mouseover", enlarge);
});// Let's create our enlarge function.var enlarge = function () {// Add class zoomed to the unordered list.list.classList.add("zoomed");// When the cursor leaves the list return to normal size by removing the class.list.addEventListener("mouseout", function () {list.classList.remove("zoomed")});};// Now we want to be able to color the names by clicking them.// When a 'click' is registered on one of the list entries it should change its color to green.
// Thanks to event delegation we can actually add an event listener to the whole parent object.
// This way we don't have to add separate event listeners to each <li>.list.addEventListener("click", function (e) {// Make the coloring happen only to the clicked element by taking the target of the event.e.target.classList.add('green');});

<button>Enable zoom</button><button>Disable zoom</button><br><br>Click on any of the names to color them green<ul><li>Chewbacca</li><li>Han Solo</li><li>Luke</li><li>Boba fett</li></ul>

.green {color: green;
}.zoomed {cursor: pointer;font-size: 23px;
}

var btn = document.querySelectorAll("button"),div = document.querySelector("#myDiv");btn[0].addEventListener("click", function () {// Get any attribute easily.console.log(div.id);
});// Element.classList stores all classes of the element in the form of a DOMTokenList.var classes = div.classList;btn[1].addEventListener("click", function () {console.log(classes);});btn[2].addEventListener("click", function () {// 可以增加和移除某个类名classes.add("red");});btn[3].addEventListener("click", function () {// 可以翻转某个类名classes.toggle("hidden");});

<div id='myDiv' class="square"></div><button>Display id</button><button>Display classes</button>
<button>Color red</button>
<button>Toggle visibility</button>

.square {width: 100px;height: 100px;margin-bottom: 20px;border: 1px solid grey;border-radius: 5px;
}.hidden {visibility: hidden;
}.red {background-color: red;
}

var myText = document.querySelector("#myParagraph"),btn = document.querySelectorAll("button");// We can easily get the text content of a node and all its descendants.var myContent = myText.textContent;console.log("textContent:  " + myContent);// When using textContent to alter the text of an element
// it deletes the old content and replaces it with new.btn[0].addEventListener('click', function () {myText.textContent = " Koalas are the best animals ";});// If we want to grab all the HTML in a node (including the tags) we can use innerHTML.var myHtml = myText.innerHTML;console.log("innerHTML:  " + myHtml);// To change the html simply supply new content.
// Of course we aren't limited to text only this time.btn[1].addEventListener('click', function () {myText.innerHTML = "<button> Penguins are the best animals </button>";});

<p id="myParagraph"><strong> Which are the best animals? </strong></p><button>Koalas</button><br><button>Penguins</button>

var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];// ForEach automatically iterates through an array.ninjaTurtles.forEach(function (entry) {console.log(entry);
});// The map method calls a function on every element of an array and creates a new array with the results.var lovesPizza = ninjaTurtles.map(function (entry) {return entry.concat(" loves pizza!");});console.log(lovesPizza);