[JS] 자바스크립트와 DOM, HTML 요소 메소드

목차

1. DOM이란
2. 자바스크립트와 DOM

---

01. DOM 이란?

문서 객체 모델(Document Object Model)

문서객체모델(Document Object Model) : 객체지향 모델로써 구조화된 문서를 표현하는 형식

DOM은 프로그래밍 언어와 독립적이다. 주로 자바스크립트를 사용하지만, DOM의 구현은 어떠한 언어에서도 가능하다.

HTML 문서에 대한 인터페이스

DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스

DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함

DOM의 종류

• Core DOM : 모든 문서 타입을 위한 DOM 모델
• HTML DOM : HTML 문서를 위한 DOM 모델. 가장 많이 사용
• HTML 문서를 조작하고 접근하는 표준화된 방법 모든 HTML 요소는 HTML DOM을 통해 접근 가능
• XML DOM : 문서를 위한 DOM 모델
• XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의 모든 XML 요소는 XML DOM을 통해 접근 가능

Document 객체

Document 객체는 웹 페이지를 의미

웹페이지에 존재하는 HTML 요소에 접근하고자 할 떄는 반드시 Document 객체부터 시작해야 함!

Document 메소드

HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공

• HTML 요소의 선택
• HTML 요소의 생성
• HTML 이벤트 핸들러 추가
• HTML 객체의 선택

HTML 요소를 선택

새로운 HTML 요소를 선택하기 위해 제공되는 메소드

메소드	설명
.getElementById()	해당 아이디의 요소를 선택
.getElementsByClassName()	해당 클래스에 속한 요소를 모두 선택
.getElementsByName()	해당 name 속성값을 가지는 요소를 모두 선택
.querySelectorAll()	해당 선택자로 선택되는 요소들을 모두 선택
.querySelector()	해당 선택자로 선택되느 요소를 1개 선택

<div class="myDivClass" id="myDivId">Hello</div>

document.getElementById("myDivId")
document.getElementByClass("myDivClass")[0];
document.querySelector(".myDivClass") // class
document.querySelector("#myDivClass") // id

getElementsByClassName 같이 element 뒤에 s가 붙어 복수인 경우, console 창에 target을 찍어보면 Collection 즉, 배열타입으로 받게된다는 것을 알 수 있음. 그렇기 때문에 보통 맨 뒤에 [0]을 붙여 사용한다.

HTML 요소 생성 삭제(DOM 제어)

새로운 HTML 요소를 생성 및 삭제하기 위해 제공되는 메소드 (HTML DOM)

메서드/속성	설명
appendChild(append할 Element)	선택한 Element의 자식 Element 마지막에 추가
remove()	선택된 Element 삭제
removeChild(삭제할 Element)	선택된 Element의 자식 Element 삭제
createElement(만들 Element)	Element 생성, 그 후 appendChild()로 추가해줘야 함
firstChild/lastChild	first면 첫번째, last면 마지막 자식 Element 반환

function myFunction() {
  let para = document.createElement("P");
  para.innerHTML = "이것이 추가될 문장입니다.";
  document.getElementById("myDIV").appendChild(para);
}

HTML 이벤트 핸들러 추가

HTML 요소에 이벤트 핸들러를 추가하기 위해 제공되는 속성

요소.onclick = function(){} // 마우스 클릭 이벤트와 연결될 이벤트 핸들러

 

[JS] 이벤트(Event)와 이벤트 핸들러(Event Handle)

---

 

02. 자바스크립트와 DOM

DOM 요소의 선택

// HTML <li> 요소를 선택
var selectedItem = document.getElementsByTagName("li");
// 아이디가 “id"인 요소를 선택
var selectedItem = document.getElementById(“id");
// 클래스가 "odd"인 모든 요소를 선택
var selectedItem = document.getElementsByClassName("odd");
// name 속성값이 "first"인 모든 요소를 선택
var selectedItem = document.getElementsByName("first");

DOM 요소의 스타일 변경

// 아이디가 "even"인 요소를 선택
var selectedItem = document.getElementById("even");
// 선택된 요소의 텍스트 색상을 변경
selectedItem.style.color = "red";

DOM 요소의 내용 변경

textContent

• 텍스트만 가져온다
• 스타일은 무시한다

innerText

• 마크업 언어가 적용된 상태로 읽어온다
• 스타일 또한 적용된 상태로 읽기 때문에 display: none; 한 값은 가져오지 못한다

innerHTML

• HTML 요소를 반환하거나 변경할 수 있다
• XSS 공격에 취약하니 주의

// 아이디가 "text"인 요소를 선택
var str = document.getElementById("text");
// 선택된 요소의 내용을 변경
str.innerHTML = ＂요소의 내용을 바꿉니다";