JavaScript 3주차(3) - DOM

박수지·2024년 10월 14일

DOM js 자바스크립트

TIL

목록 보기

8/9

💭DOM(Document Object Model)이란?

문서객체모델이라고 하며 HTML 혹은 XML문서를 구조화하여 계층적으로 표현된 각 요소를 객체로 표현

DOM의 특징

자바스크립트를 사용하여 DOM 구조에 접근하고 이를 동적으로 조작하여 문서 구조, 스타일, 내용 등을 추가, 삭제 하거나 변경 할 수 있음
DOM은 트리 구조(계층 구조)로 이루어져 있으며, 트리를 구성하는 각 객체들을 '노드(Node)'라고 부름
노드들 사이에는 부모(parent)와 자식(child)라는 계층관계가 정의됨
ex) parentNode, childNodes, firstChild, lastChild

📌DOM tree 예시

출처: https://poiemaweb.com/js-dom

<!DOCTYPE html>
<html>
    <body>
        <div>
            <h1>Color</h1>
            <ul>
                <li id="red" class="box">red</li>
                <li id="yellow" class="box">yellow</li>
                <li id="green" class="box">green</li>
                <li id="blue" class="box">blue</li>
            </ul>
        </div>
    </body>
</html>

문서 노드(Document Node)
document 객체를 말하며 DOM 트리에 접근하기 위한 시작점이자 최상위 노드
요소 노드(Element Node)
HTML 구성 요소 즉 태그를 의미하며 각각의 Element Node는 다시 Attribute Node와 Text Node를 가질 수 있음
어트리뷰트 노드(Attribute Node)
태그들의 속성을 객체화한 노드로 만일 특정 태그의 속성에 접근하려면 Attribute Node를 사용해야 함
텍스트 노드(Text Node)
태그의 텍스트를 객체화한 DOM 트리구조의 최종단 노드로 자식 노드를 가질 수 없음

💭DOM 요소 접근

1. 요소 노드 선택

1) querySelector(cssSelector)

CSS 선택자를 사용하여 요소 노드를 한 개 선택

복수개가 선택된 경우, 첫번째 요소노드만 반환

콤마(,)로 구분된 여러 셀렉터를 나열 할 수 있음

📌예시

const red = document.querySelector('#red');

console.log(red);  // li#red.box

2) querySelectorAll(selector)

CSS 선택자를 사용하여 해당 요소 노드를 모두 선택

NodeList를 반환

📌예시

const box = document.querySelectorAll(".box");

console.log(box);  
// NodeList(4) 
[li#red.box, li#yellow.box, li#green.box, li#blue.box]

3) getElementById(id)

id 속성값을 사용하여 요소 노드를 한 개 선택

복수개가 선택된 경우, 첫번째 요소만 반환

📌예시

const blue = document.getElementById('blue');

console.log(blue);  // li#blue.box

4) getElementsByClassName(class)

class 속성값을 사용하여 요소 노드를 모두 선택

공백으로 구분하여 여러 개의 class를 지정할 수 있음

HTML Collection을 반환

📌예시

const all_box = document.getElementsByClassName("box");

console.log(all_box);  
// HTMLCollection(4) 
[li#red.box, li#yellow.box, li#green.box, li#blue.box, 
red: li#red.box, yellow: li#yellow.box, green: li#green.box, blue: li#blue.box]

5) getElementsByTagName(tagName)

태그명을 사용하여 요소 노드를 모두 선택

HTML Collection을 반환

📌예시

const Li = document.getElementsByTagName('li');

console.log(Li);
// HTMLCollection(4) 
[li#red.box, li#yellow.box, li#green.box, li#blue.box, red: li#red.box, yellow: li#yellow.box, green: li#green.box, blue: li#blue.box]

2. 요소 노드 탐색

const element = document.querySelector('ul');

1) parentNode

부모 노드를 탐색

parentElement를 사용하면 요소 타입 부모 노드만 탐색

📌예시

const parentNode = element.parentNode;

console.log(parentNode);  // div

2) firstChild, lastChild

텍스트 노드를 포함한 모든 자식 노드 중에서 첫번째 자식과 마지막 자식 노드를 탐색

firstElementChild, lastElementChild를 사용하면 자식 노드 중에서 요소 타입 노드만을 탐색

📌예시

const firstChild = element.firstChild;
const lastChild = element.lastChild;

console.log(firstChild);  // #text
console.log(lastChild);  // #text


const firstelemChild = element.firstElementChild;
const lastelemChild = element.lastElementChild;

console.log(firstelemChild);  // li#red.box
console.log(lastelemChild);  // li#blue.box

3) childNodes

텍스트 노드를 포함한 모든 자식 노드를 탐색

자식 노드의 컬렉션 NodeList를 반환

children을 사용하면 자식 노드 중에서 요소 타입 노드만 탐색하고 자식 노드의 컬렉션 HTMLCollection을 반환

📌예시

const childNodes = element.childNodes;

console.log(childNodes);  
// NodeList(9) 
[text, li#red.box, text, li#yellow.box, text, li#green.box, text, li#blue.box, text]


const children = element.children;

console.log(children);  
// HTMLCollection(4) 
[li#red.box, li#yellow.box, li#green.box, li#blue.box, 
red: li#red.box, yellow: li#yellow.box, green: li#green.box, blue: li#blue.box]

4) previousSibling, nextSibling

텍스트 노드를 포함한 모든 형제 노드 중에서 이전 형제와 다음 형제 노드를 탐색

previousElementSibling, nextElementSibling를 사용하면 형제 노드 중에서 요소 타입 노드만을 탐색

📌예시

const nextSibling = firstChild.nextSibling;  
const preSibling = lastChild.previousSibling;  

console.log(nextSibling); // li#red.box
console.log(preSibling);  // li#blue.box


const nextElemSibling = firstelemChild.nextElementSibling;  
const preElemSibling = lastelemChild.previousElementSibling;  

console.log(nextElemSibling);  // li#yellow.box
console.log(preElemSibling);  // li#green.box

💭DOM 요소 조작

1. DOM 요소 생성

1) createElement(tagName)

태그이름을 인자로 전달하여 요소를 생성

📌예시

const newDiv = document.createElement('div');
const newUl = document.createElement('ul');
const newLi = document.createElement('li');

2) createTextNode(text)

텍스트를 인자로 전달하여 텍스트 노드를 생성

📌예시

const newText = document.createTextNode('content');

2. DOM 요소 추가

3) appendChild(Node)

인자로 전달한 노드를 마지막 자식 요소로 DOM 트리에 추가

📌예시

document.body.appendChild(newDiv); 
newDiv.appendChild(newUl);
newUl.appendChild(newLi);
newLi.appendChild(newText);

생성된 DOM tree 구조

<body>
  <div>
      <ul>
          <li>"content"</li>
      </ul>
  </div>
</body>

3. DOM 요소 제거

4) removeChild(Node)

인자로 전달한 노드를 DOM 트리에서 제거

📌예시

newDiv.removeChild(newUl);
// newDiv의 자식인 newUl요소를 DOM 트리에서 제거

💭DOM 요소의 속성 조작

<body>
  <input type="password" placeholder="비밀번호를 입력해주세요.">
  <button type="button" onclick="show()">비밀번호 보기</button>
  <button type="button" onclick="disable()">활성화/비활성화</button>
</body>

<script>
  const Input = document.querySelector('input');  
  const Btn = document.querySelector('button');
</script>

1) hasAttribute(attribute)

요소가 지정한 속성을 가지고 있는지 검사

속성의 존재 유무에 따라 Boolean 값을 반환(true / false)

📌예시

console.log(Input.hasAttribute('placeholder'));  //true
console.log(Input.hasAttribute('name'));  //false
console.log(Btn.hasAttribute('type'));  //true

2) getAttribute(attribute)

요소에서 지정한 속성의 값을 취득

속성이 존재하는 경우 속성값을 문자열로 반환하고, 존재하지 않는 경우에는 null 반환

📌예시

console.log(Input.getAttribute('type'));  //password
console.log(Input.getAttribute('value'));  //null
console.log(Btn.getAttribute('type'));  //button

3) setAttribute(attribute, value)

요소의 속성과 속성값을 설정

속성이 존재하는 경우 속성값이 업데이트되고, 존재하지 않는 경우에는 지정된 이름과 값으로 새 속성이 추가

📌예시

function show() {
    Input.setAttribute('type', 'text');
    // input 태그의 type 속성의 값을 password에서 text로 설정
}

4) removeAttribute(attribute)

요소에서 지정한 속성을 제거

📌예시

Input.removeAttribute('placeholder');
// input 태그의 type 속성을 제거

5) toggleAttribute(attribute)

요소에 속성이 존재하는 경우 제거하고, 존재하지 않는 경우에는 추가

📌예시

function disable() {
    Input.toggleAttribute('disabled');
    // input 태그의 disabled 속성을 추가 / 제거
}

6) classList

class 속성의 값을 취득 또는 변경

add, remove, toggle, contains, replace 메소드를 제공

📌예시

<style>
  .class_0 {font-weight: 400;}
  .class_1 {color: red;}
  .class_2 {font-size: 30px;}
  .class_3 {font-weight: 900;}
</style>

<body>
  <p id="text" class="class_0">Lorem ipsum</p>
</body>

<script>
  const Text = document.getElementById('text');
  
  Text.classList.add('class_1');  
  //class 속성을 추가하여 글자 색 변경
  Text.classList.remove('class_1');  
  //class 속성을 제거하여 글자 색 초기화
  Text.classList.toggle('class_2');  
  // class 속성이 존재하면 제거하고 존재하지 않으면 추가하여 글자 크기 변경
  console.log(Text.classList.contains('class_3'));  
  // class 속성을 가지고 있는지 검사 -> false
  Text.classList.replace('class_0', 'class_3');
  // class 속성을 교체하여 글자 두께 변경
</script>

💭DOM 요소의 텍스트 조작

<body>
  <div>
  	<h1 id="title">This is the Title</h1>
    <ul id="list">
        <li>textContent</li>
        <li>textContent</li>
        <li>textContent</li>
    </ul>
  </div>
</body>

<script>
  const Title = document.getElementById('title');
  const List = document.getElementById('list');
</script>

1) innerText

요소의 텍스트 콘텐츠에만 접근 및 조작

📌예시

console.log(Title.innerText);  // This is the Title

Title.innerText = "<div style='color:red;'>JavaScript</div>";
// -> 텍스트를 그대로 출력

2) innerHTML

해당 요소의 모든 자식 요소를 포함하는 콘텐츠를 하나의 문자열로 취득

문자열은 마크업을 포함

📌예시

console.log(List.innerHTML);  
/* <li>textContent</li>
   <li>textContent</li>
   <li>textContent</li> */

Title.innerHTML = "<div style='color:red;'>JavaScript</div>";
// -> 스타일이 적용된 상태로 출력

💭DOM 요소의 스타일 조작

<body>
  <p id="text">Lorem ipsum</p>
  <button onclick="change()">글자 색, 크기 변경</button>
  <button onclick="reset()">초기화</button>
</body>

style

inline 스타일 선언을 생성

'-'으로 구분되는 속성 이름은 카멜케이스로 변환하여 사용

📌예시

function change() {
    const Text = document.getElementById('text');
    Text.style.fontSize = '30px';
    Text.style.color = 'blue';
}

function reset() {
    const Text = document.getElementById('text');
    Text.style.fontSize = '16px';
    Text.style.color = 'black';
}

박수지

#html #css #javascript

이전 포스트

JavaScript 3주차(2) - 객체

다음 포스트

JavaScript 3주차(3) - DOM

TIL

💭DOM(Document Object Model)이란?

DOM의 특징

📌DOM tree 예시

💭DOM 요소 접근

1. 요소 노드 선택

1) querySelector(cssSelector)

📌예시

2) querySelectorAll(selector)

📌예시

3) getElementById(id)

📌예시

4) getElementsByClassName(class)

📌예시

5) getElementsByTagName(tagName)

📌예시

2. 요소 노드 탐색

1) parentNode

📌예시

2) firstChild, lastChild

📌예시

3) childNodes

📌예시

4) previousSibling, nextSibling

📌예시

💭DOM 요소 조작

1. DOM 요소 생성

1) createElement(tagName)

📌예시

2) createTextNode(text)

📌예시

2. DOM 요소 추가

3) appendChild(Node)

📌예시

생성된 DOM tree 구조

3. DOM 요소 제거

4) removeChild(Node)

📌예시

💭DOM 요소의 속성 조작

1) hasAttribute(attribute)

📌예시

2) getAttribute(attribute)

📌예시

3) setAttribute(attribute, value)

📌예시

4) removeAttribute(attribute)

📌예시

5) toggleAttribute(attribute)

📌예시

6) classList

📌예시

💭DOM 요소의 텍스트 조작

1) innerText

📌예시

2) innerHTML

📌예시

💭DOM 요소의 스타일 조작

style

📌예시

JavaScript 3주차(2) - 객체

JavaScript 3주차(4) - 이벤트

0개의 댓글

`1) querySelector(cssSelector)`

`2) querySelectorAll(selector)`

`3) getElementById(id)`

`4) getElementsByClassName(class)`

`5) getElementsByTagName(tagName)`

`1) parentNode`

`2) firstChild, lastChild`

`3) childNodes`

`4) previousSibling, nextSibling`

`1) createElement(tagName)`

`2) createTextNode(text)`

`3) appendChild(Node)`

`4) removeChild(Node)`

`1) hasAttribute(attribute)`

`2) getAttribute(attribute)`

`3) setAttribute(attribute, value)`

`4) removeAttribute(attribute)`

`5) toggleAttribute(attribute)`

`6) classList`

1) `innerText`

2) `innerHTML`

`style`