• Choose a category
• All
• Classic-Fiction

There's another method of removing DOM nodes, that you'll probably find useful on occasion. That's replaceChild. Predictably, you hand it the new node and the node you want to replace, and it will swap in the new one while destroying the old one.

Example 5.10

//

var container = document.getElementById("container"),

old_element = document.getElementById("remove_me"),

new_element = document.createElement("p");

new_element.appendChild(document.createTextNode("new element"));

container.replaceChild(new_element, old_element);

Modifying a DOM Element

Now that you're familiar with creating, adding, and removing DOM nodes, let's talk about modifying nodes. After all, there are three main actions you can perform on an individual node:

You can change the attributes.

You can change the styling.

You can add and remove event handlers.

Let's start with attributes. If you're not sure what I'm talking about, check this out:

Attributes are the key="value" part of your HTML elements. Here, I'm using id, class, type, name, and value, but there are many more.

There are a couple of ways to work with attributes, but I'm just going to show you what the best, most cross-browser way to do it is. That way is using the methods setAttribute and getAttribute. They work as follows:

Example 5.11

//

var elem = document.getElementById("container");

elem.setAttribute("class", "modal");

alert( elem.getAttribute("class") ); // "modal"

As you can see, we pass two parameters to the first method: the name of the attribute we want to set, and the value for the attribute. When we're getting the attribute, we just have to pass the attribute name to the getAttribute method. Obviously, there are methods of an element node.

This should work with any attribute you want to set on your element—even the new HTML5 data-* attributes. However, there's an easier way set and get some common attributes.

If you're working with the id or class, you can just do this:

elem.id = "content";

elem.id; // "content"

elem.className = "module";

elem.className; // "module";

This shorthand notation is the go-to way of setting styling on elements. Watch this:

Example 5.12

//

var elem = document.getElementById("container");

elem.style.border = "1px solid red";

elem.style.backgroundColor = "green";

Yup; it's all the CSS properties that you already know and love, right in your JavaScript. The key thing to note it this: JavaScript property names can't have dashes in them, like they do in CSS. Therefore, use camelCase for those, capitalizing every letter after a dash and removing the dashes. This way, border-bottom-width becomes borderBottomWidth, and so on.

Another important thing to note is that all the style properties are strings; this makes sense if you think about it, because even numerical values like borderBottomWidth need to be suffixed with a unit (px). So, it's all strings here.

One more thing: when you're using element.style, you're working with the inline style attribute on the element. When you set a styling property, that gets added to the style attribute. The logical following of this is that you can't get a style attribute that isn't in the inline style attribute (either coded into the HTML or previously set in your JavaScript).

Events

While events could be considered a part of modifying DOM elements, they deserve a section of their own. But first, what are events?

Events, put simply, are things that happen to elements in the DOM. Some examples of this might be as follows:

The page loaded.

An element was clicked.

The mouse moved over an element.

When something like this happens, you may often want to do something. For example, run this script when the page loads. Or, execute this function when an element is clicked.

So, exactly what events