[JavaScript] DOM 요소의 선택과 변경

 

 

DOM 요소의 선택

document.getElementsBy~() 사용하여 변수에 저장

// HTML <li> 요소
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 요소의 스타일 변경

변수.style.~ 접근해서 변경

// 텍스트 색상 변경
selectedItem.style.color = "blue";

 

DOM 요소의 내용 변경

// 아이디가 "text"인 요소의 내용 변경
var str = document.getElementById("text");
str.innerHTML = "요소의 내용 변경";