DOM 요소 접근 및 속성 가져오기

'접근한다' : 웹 문서에서 원하는 요소를 찾아가는 것

선택자(selector) : class, id, tag 등을 이르는 말

---

 

 

εїз DOM 요소 접근

1. id 선택자로 접근하는 getElementById()

→ id 속성 : HTML 요소가 문서 안에서 중복되지 않도록 사용하는 CSS 선택자

 

요소명.getElementById("id명");

 

 

 

2. class 값으로 접근하는 getElementsByClassName()

→ class 선택자는 웹 문서 안에서 여러 요소들이 사용할 수 있으므로 반환하는 요소가 2개 이상일 수 있음

→ 반환 요소가 2개 이상 있을 수 있으므로 HTMLCollection 형태로 저장

 

요소명.getElementsByClassName("class명");

 

 

 

 

3. tag 이름으로 접근하는 getElementsByTagName() 

→ class, id를 지정하지 않은 DOM요소에 접근하기 위해 사용

→ 반환 요소가 2개 이상 있을 수 있으므로 HTMLCollection 형태로 저장

 

요소명.getElementsByTagName("tag명");

 

 

 

 

4. 다양한 방법으로 접근하는 querySelector(), querySelectorAll()

→ 앞의 방법들은 반환값이 HTMLCollection 객체임

→ DOM트리의 텍스트, 속성 노드까지 자유롭게 접근하기 위해서 사용

→ 반환값이 하나(id)라면 querySeletor()를 사용, 여러 값이 한꺼번에 반환되는 경우(class, tag)에는 querySelectorAll()를 사용

 

✓ 선택자
id → #id명
class → .class명
tag → tag명

 

노드.querySelector(선택자)

 

 

 

 

 

εїз  웹 요소의 내용 수정

1. innerText : 테스트 내용 표시

2. innerHTML : html 태그까지 반영하여 표시

 

요소명.innerText = 내용
요소명.innerHTML = 내용

 

 

 

 

 

 

 

εїз  속성 관련 메서드

1. getAttribute() : 속성에 접근

2. setAttribute() : 접근한 속성의 값 바꾸기

 

getAttribute("속성명");
setAttribute("속성명", "값");