Skip to content

Latest commit

 

History

History
89 lines (56 loc) · 2.6 KB

2019-01-24-dom.md

File metadata and controls

89 lines (56 loc) · 2.6 KB

DOM

DOM(Document Object Model), 문서객체모델은 HTML문서나 XML문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

DOM 요소 선택

  • tag name을 이용한 선택

getElementsByTagName : tagname을 이용해 HTML요소 선택

var selectedItem = document.getElementsByTagName("li"); //<li> 요소 선택
for(var i=0;i<selectedItem.length;i++){
  selectedItem.item(i).style.color="red";
}

item() 메소드는 해당 HTML 객체 집합에서 전달받은 인덱스에 해당하는 요소를 반환한다.

HTML 요소의 style property를 이용하면, 해당 요소의 CSS 스타일을 변경할 수 있다.

  • id를 이용한 선택

getElementById() : 아이디를 이용하여 HTML 요소를 선택

var selectedItem = document.getElementById("even");
selectedItem.styel.color = "red";

이때 해당 아이디를 가지고 있는 요소 중에서 첫 번째 요소 단 하나만을 선택한다. 그러므로 여러 요소를 선택하고 싶을 때는 tagname이나 class와 같은 다른 방법을 사용해야한다.

  • Class를 이용한 선택

getElementByClassName :  클래스 이름을 이용하여 HTML 요소 선택

var selectedItem = document.getElementByClassName("odd");
for(var i=0;i<selectedItem.length;i++){
  selectedItem.item(i).style.color="red";
}
  • CSS selector를 이용한 선택

querySelectorAll() : CSS 선택자(아이디, 클래스, 속성, 속성값 등)를 이용하여 HTML요소 선택

var selectedItem = document.querySelectorAll("li.odd");
for(var i=0;i<selectedItem.length;i++){
  selectedItem.item(i).style.color="red";
}
  • HTML 객체 집합(object collection)을 이용한 선택
var title = document.title; // <title> 요소를 선택함.

document.write(title);

DOM 요소 내용 변경

DOM을 이용하여 DOM 요소의 내용(content)나 속성 값을 손쉽게 변경할 수 있다.

DOM 요소의 내용을 바꾸는 가장 쉬운 방법은 innerHTML property 이용하는 것이다. 또한, DOM 요소의 속성 이름을 이용하면 속성값을 바로 변경할 수 있다.

var str = document.getElementById("text");
str.innerHTML = "문장바꾸기";

HTML 요소의 속성 이름을 이용하여 속성값을 변경할 수 있다.

var link = document.getElementById("link");
str.href = "/javascript/intro";
link.innerHTML = "해당 요소의 내용 변경하기";

DOM API