자바스크립트와 DOM

DOM 요소의 선택

// HTML 요소를 선택
var selectedItem = document.getElementsByTagName("li");

// 아이디가 "id"인 요소를 선택
var selectedItem = document.getElementsById("id");

// 클래스가 "odd"인 요소를 선택
var selectedItem = document.getElementsByClassName("odd");

// name 속성값이 "first"인 요소를 선택
var selectedItem = document.getElementsByName("first");

DOM 요소의 스타일 변경

// 아이디가 "even"인 요소를 선택
var selectedItem = document.getElementsById("even");

// 선택된 요소의 텍스트 색상을 변경
selectedItem.style.color = "red";

DOM 요소의 내용 변경

// 아이디가 "text"인 요소를 선택
var str = document.getElementsById("text");

// 선택된 요소의 내용을 변경
str.innerHTML = "요소의 내용을 바꿉니다.";

DOM 요소 선택하기

자바스크립트에서 html 요소를 선택하는 메소드는 다음과 같다

// 해당 아이디의 요소를 선택
document.getElementById()

// 해당 선택자로 선택되는 요소를 1개 선택
document.querySelector()

다음은 요소를 모두 선택하여 배열로 반환합니다.

//해당 클래스에 속한 요소를 모두 선택
document.getElementsByClassName()

//해당 name 속성값을 가지는 요소를 모두 선택
document.getElementsByName()

//해당 선택자로 선택되는 요소를 모두 선택
document.querySelectorAll()