JavaScript Introduction | Document Object Model | DOM Elements

Selecting DOM Elements

To work with HTML elements, you must first select the relevant element. In JavaScript, specific HTML elements can be selected in the following ways.

1. Selecting by HTML tag name
2. Selecting by id
3. Selecting by class
4. Selecting by name attribute
5. Selecting by CSS selector
6. Selecting by HTML object collection

The getElementsByTagName() method selects HTML elements by using an HTML tag name.

var selectedItem = document.getElementsByTagName("li"); // Selects all <li> elements.
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // Changes the text color of all selected elements.
}

The item() method returns the element at the given index from the corresponding HTML object collection.
By using the style property of an HTML element, you can change the CSS style of that element.

Selecting by id

The getElementById() method selects an HTML element by using its id.

var selectedItem = document.getElementById("even"); // Selects the element whose id is "even".
selectedItem.style.color = "red"; // Changes the text color of the selected element.

In JavaScript, selection by id selects only the first element among the elements that have that id.
Therefore, when you want to select multiple elements, you should use another method such as tag name or class.

Selecting by class

The getElementsByClassName() method selects HTML elements by using a class name.

var selectedItem = document.getElementsByClassName("odd"); // Selects all elements whose class is "odd".
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // Changes the text color of all selected elements.
}

Selecting by name Attribute

The getElementByName() method selects HTML elements by using the name attribute of HTML elements.

var selectedItem = document.getElementsByName("first"); // Selects all elements whose name attribute value is "first".
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // Changes the text color of all selected elements.
}

Selecting by CSS Selector

The querySelectorAll() method selects HTML elements by using CSS selectors such as id, class, attribute, and attribute value.

var selectedItem = document.querySelectorAll("li.odd"); // Selects only <li> elements whose class is "odd".
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // Changes the text color of all selected elements.
}

The querySelectorAll() method is not supported in Internet Explorer 8 and earlier.

Selecting by HTML Object Collection

You can select HTML elements by using the object collections provided by the HTML DOM.

var title = document.title; // Selects the <title> element.
document.write(title);

Changing the Content of DOM Elements

By using the HTML DOM, you can easily change the content or attribute values of HTML elements.

The easiest way to change the content of an HTML element is to use the innerHTML property.

var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다!";

Attribute values can also be changed by using the attribute names of HTML elements.

var link = document.getElementById("link");          // Selects the element whose id is "link".
link.href = "/javascript/intro"; // Changes the href attribute value of that element.
link.innerHTML = "자바스크립트 수업 바로 가기!";     // Changes the content of that element.

Changing the Style of DOM Elements

By using the HTML DOM, you can also easily change the style of HTML elements.

Use the style property to apply CSS styles to an HTML element.

var str = document.getElementById("text");                 // Selects the element whose id is "str".
function changeRedColor() { str.style.color = "red"; }     // Changes the text color of that element to red.
function changeBlackColor() { str.style.color = "black"; } // Changes the text color of that element to black.