🤔 DOM요소란?
DOM(Document Object Model)은 HTML 요소들의 구조화된 표현으로, 객체에 해당합니다.
웹을 그리는 브라우저나 HTML을 동적으로 제어하는 Javascript 에게 태그로 이루어진 html은 그저 텍스트일 뿐이다. 따라서 브라우저와 Javascript가 이해할 수 있도록 HTML파서가 HTML을 트리구조의 객체 로 변환시키는데, 이 객체를 DOM이라고 한다.
🐰 Javascript에서 특정 DOM요소 찾기
javascipt에서 원하는 요소에 이벤트리스너를 추가하거나 해당 요소에 새로운 DOM요소를 자식으로 추가하는 등의 행위를 하기위해서는 우선 JS코드에서 원하는 DOM요소를 찾아와야 한다. 그 DOM요소를 찾는 방법은 다음과 같다.
🥕 ID로 선택
document.getElementById('아이디')
javascript에서 DOM요소를 가져올 때 주로 활용하는 방법이다.
id는 클래스나 html태그와 다르게 유일한 값을 가지므로 하나의 요소만 반환한다.
🥕 클래스명으로 선택
document.getElementsByClassName('클래스명')
클래스명으로 DOM요소를 가져오는 방법이다.
클래스명은 여러개의 요소가 가질 수 있으므로 해당 클래스명을 가진 여러 요소를 모두 반환하기 위해 배열로 반환한다.
🥕 html 태그로 선택
document.getElementsByTagName('태그')
div, ul, li 등 html태그로 요소를 가져오는 방법이다.
해당 태그를 가진 여러 요소를 반환하기 위해 배열로 반환한다.
🥕 CSS 선택자의 문법으로 선택
document.querySelector('css 선택자 문법')
document.querySelectorAll('css 선택자 문법')
querySelector는 찾은 요소들 중 첫번째 요소만을 반환하고,
querySelectorAll는 찾은 요소들을 배열로 반환한다.
선택자 문법으로 선택하기 때문에 css에서 요소를 찾을 때 활용하는 방법과 같이
.클래스명 을 넣은 경우 클래스명으로 검색,
#id 을 넣은 경우 id로 검색,
그냥 넣었을 경우에는 태그로 검색한다.
🐰 Javascript에서 DOM요소 생성해서 붙이기
🥕 요소 생성하기
document.createElement('태그')
태그에 해당하는 Dom요소를 생성해준다.
예를들어, document.createElement("p") 는<p></p> 요소를 생성한다.
document.createTextNode("요소에 추가할 Text요소")
메소드 명과 같이 텍스트요소를 생성한다.
위 코드는 "요소에 추가할 Text요소" 텍스트 노드가 생성된다.
// 텍스트요소를 추가해야하는 요소가 있다면 텍스트 노드를 생성하여 붙이지 않고 요소.innerText = "텍스트" 로 바로 추가할 수 있다.
DOM요소A.appendChild(DOM요소B)
위 코드는 DOM요소B를 DOM요소A의 자식 요소로 만든다.
createElement나 createTextNode를 하더라도, 해당 Dom요소가 실제 html의 Dom요소의 자식요소가 되지 않는다면 화면에 보여질 수 없다.
예시 ).
html은 다음과 같고
<body>
</body>js파일은 다음과 같을때
//dom요소 불러오기
const body = document.getElementsByTagName('body');
//dom요소 생성
let a = document.createElement('div');
let text = document.createTextNode("요소 생성하여 붙이기");
//dom요소 붙이기
a.appendChild(text);
body[0].appendChild(a);
이와 같이 화면에 보여진다.
만약 body[0].appendChild(a) 를 하지 않는다면 html의 유일한 요소인 body의 자식 요소가 없기 때문에 아무것도 보이지 않을 것이다.
🥕 요소 속성 추가하기
요소.setAttribute(속성, 값)
요소.setAttribute("href", "https://velog.io/@sukong");
요소.setAttribute("style", "color:red; border: 1px solid blue;");
와 같이 활용할 수 있다.
요소.getAttribute(속성)
요소의 해당속성을 반환한다.
요소.removeAttribute(속성)
요소의 해당속성을 제거한다.
🥕 요소 생성, 추가
1️⃣ 요소.innerHTML = "텍스트"
2️⃣ 요소.innerHTML = "<a href='https://velog.io/@sukong'> 이동! </a>"
1️⃣ 은 요소의 텍스트 요소가 추가되고,
2️⃣ 는 해당 요소의 자식 요소로 <a href='https://velog.io/@sukong'> 이동! </a> 가 추가된다.
