This is the fifth of six blog posts which are looking at the Microsoft 70-480 exam. Have no idea what this is all about? Click here. Are you doing the exam and want to start from the beginning? Click here. These blog posts are to be used as a companion to the videos produced by Microsoft and are the notes I have been taking from watching the training videos on the Microsoft Virtual Academy.
This blog post will look at using Javascript to manipulate the Document Object Model (DOM). In particular, I’ll look at querying the DOM, manipulating the DOM and responding to events.
If you’re going to use Javascript to modify your HTML, you’re going to first need to specify what bit of your document you want to edit. To do that, you’re going to have to query the DOM. This isn’t exactly hard. There are four Javascript functions that are mentioned on the training video.
These are generally used by creating a variable, and then assigning it the value that’s returned from the methods that are listed below. You’ll also need to invoke these methods by preceding them with a “document.”. You should have something that looks a bit like this.
var tagline = document.getElementById();
Easy enough stuff. So, those functions you should know…
getElementByID();
This basically sets the element that you’re going to modify based upon the id you gave it in the HTML markup. You put the ID name between the parentheses in speech marks, and you preface the ID name with a period.
getElementsByTagName();
This allows you to select all elements in your document based upon the kind of element it is. So, if you wanted to edit all list items, you’d pass the name of the element (li) in speech marks, minus the arrow signs.
querySelector();
Query Selector allows you to select the first element in your document that matches a criteria that you specify in the parentheses of the querySelector(); method.
querySelectorAll();
querySelectorAll() works like QuerySelector(), except with this you can select every single element that matches the criteria you specify.
With that all sorted, we can now move on to slightly more interesting stuff. Manipulating the document object model. So, let’s look at some simple manipulations. Say you’ve used a querySelector to select an ID, and you’ve assigned it to a variable called “thisID” and you then want to play around with that? Add some text and whatnot Easy.
Now, it’s worth noting that there are a lot of things you can do to manipulate your DOM with Javascript. I’m only going to mention a few choice functions.
thisID.innertext(“Changed”);
Here, you’re changing the text that is found between the start and close of the tags of the element you’re editing.
thisID.classname(“item”);
Here, you’re changing the class name of the item to something totally different. If you want to, you can also use this:
thisID.classlist.add(“item”);
A few other useful methods mentioned in the course videos are:
container.removeChild();
This method allows you to remove a child element from your HTML document.
document.createElement();
Here, you’re creating an element for you document. Specifying text content and IDs are sorted with the createTextNode and .id methods.
container.appendChild();
This method is rather useful. It basically allows you to insert a child element to the end of a node. This can be useful when you’re doing stuff like adding list items and stuff.
Finally, I’m briefly going to talk about responding to events. Javascript is an event driven language. This means that the running of the program is contingent on these things called “events”. These might be a click of the mouse or a press of a key on the keyboard.
So, this code might look a bit familiar:
<button id=”but” onclick=”handler();” > …
function handler() {
// do stuff
}
But that’s not really a good style. At least according to Jeremy Foster and Michael Palermo. They argue it’s best to use a programatic event handling style. So, what’s the difference? Have a look at this code.
<button id=”but”>
function handler() {
//do stuff
}
var b = document.querySelector(“#but”);
b.addEventListener(“click”, handler);
What we’ve done here is create a function that does what we want it to do when the event happens, but not used an onclick parameter in the HTML. Rather, we’ve added our event the Javascript way; By selecting the ID of the button, and then creating an event listener that calls the Handler function when a click is made on that button.
And that concludes this brief introduction to DOM manipulations using Javascript. I mention this a lot, but HTML, CSS and Javascript are huge technologies and there’s an awful lot of stuff I have likely missed. I’d honestly recommend you check out the Mozilla Developer Network for further reading.
Any comments? Feedback? Thoughts? Leave them in the box below.
The post The HTML5 Diaries – Part 5 – Manipulating the DOM appeared first on Matthew Hughes.
