안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 당담하게 된 박브레드입니다.

오늘은 열일곱 번째 날로, 자바스크립트 공부 여덟 번째 날입니다!

이제 얼마 안 남았으니, 힘을 내서 공부 시작해 볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

 

🏃 공부할 내용(456~486p)

1. 문서 객체 모델 이해하기

2. 노드 선택하기

3. 노드 조작하기

4. 노드 추가/삭제하기

 

1. 문서 객체 모델 이해하기

먼저, 문서 객체 모델에 대해서 이해해 볼 거예요.

웹 브라우저는 HTML 문서의 구성 요소를 모두 객체로 이해합니다.

 

1.1 문서 객체 모델이 생성되는 방식

문서 객체 모델은 웹 브라우저가 HTML 문서를 해석하고,

해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성돼요.

 

문서 객체 모델은 다음 그림처럼 나무를 뒤집어 놓은 형태의 자료구조인 트리 구조를 가집니다.

이를 가리켜 DOM 트리라고 해요!

 

DOM 트리는 document 객체 하위에 HTML 태그 요소, 속성, 텍스트, 주석 등이 트리 형태로 구성되어 있는데 이를 각각 노드라고 합니다! 그리고 DOM 트리의 가장 꼭대기에 있는 노드르 루트 노드라고 해요.

 

그리고 각 노드는 부모, 자식, 형제 관계가 형성됩니다. 

다음과 같이 노드에 관련된 용어를 한 번 읽어보세요!

 

- 루트 노드(root node): 부모가 없는 노드, 트리는 하나의 루트 노드만을 가진다.
- 단말 노드(leaf node): 자식이 없는 노드, ‘말단 노드’ 또는 ‘잎 노드’라고도 부른다.
- 내부(internal) 노드: 단말 노드가 아닌 노드
- 간선(edge): 노드를 연결하는 선 (link, branch라고도 부름)
- 형제(sibling): 같은 부모를 가지는 노드
- 노드의 크기(size): 자신을 포함한 모든 자손 노드의 개수
- 노드의 깊이(depth): 루트에서 어떤 노드에 도달하기 위해 거쳐야 하는 간선의 수
- 노드의 레벨(level): 트리의 특정 깊이를 가지는 노드의 집합
- 노드의 차수(degree): 하위 트리 개수 / 간선 수 (degree) = 각 노드가 지닌 가지의 수
- 트리의 차수(degree of tree): 트리의 최대 차수
- 트리의 높이(height): 루트 노드에서 가장 깊숙이 있는 노드의 깊이

 

2. 노드 선택하기

2.1 속성으로 노드 선택하기

문서 객체 모델은 노드와 노드가 연결된 틀리 구조예요.

그래서 document 객체는 트리를 탐색하면서 원하는 노드를 선택할 수 있는 속성을 제공합니다!

 

노드 탐색 속성은 모든 노드 탐색과 요소 노드 탐색으로 구분지어 볼 수 있는데,

다양한 속성들에 대해선 표 12-2를 참고해 보세요!

 

예시로, 노드 탐색 속성 몇 개를 실습해 볼게요.

예를 들어, document 객체로 접근할 수 이쓴 html 노드로 이동하고 싶다면 firstChild 속성을 사용하고, 첫 번째 자식 요소 노드로 이동하고 싶다면 firstElementChild 속성을 사용하면 됩니다!

 

 

2.2 메서드로 노드 선택하기

노드 탐색 속성으로 노드를 선택하는 방법은 노드의 타입을 가리지 않고 모든 노드를 이동하며 선택할 수 있어요. 하지만, DOM 트리가 복잡할수록 원하는 노드를 찾아가기 어렵다는 단점이 있습니다.

 

그래서 일반적으로 요소 노드를 바로 선택할 수 있는 메서드를 이요한 노드 선택 방법과 적절하게 조합해서 사용해요!

그럼, 메서드에 대해서 알아볼까요?

 

✅ 속성값과 태그명 사용하기 - get 메서드

먼저, 메서드에 대한 실습을 해보겠습니다.

다음과 같이 getElementById(<id 속성값>) 를 사용하면 id 속성값과 일치하는 요소 노드를 1개만 선택합니다.

getElementsByClassName(<class 속성값>)을 사용하면 class 속성값과 일치하는 요소 노드를 모두 선택합니다.

getElementsByTagName(<태그명>)을 사용하면 태그명과 일치하는 요소 노드를 모두 선택합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <h1 id="title">title</h1>
    <p class="text">text-1</p>
    <p class="text">text-2</p>
    <script>
      // id 속성값이 title인 요소 노드 1개 선택하기
      const el = document.getElementById("title");
      console.log(el);
      // class 속성값이 text인 요소 노드 모두 선택하기
      const classEl = document.getElementsByClassName("text");
      console.log(classEl);
      // p 태그에 해당하는 요소 노드 모두 선택하기
      const tagEls = document.getElementsByName("p");
      console.log(tagEls);
    </script>
  </body>
</html>

다음과 같이 실행 결과가 나와요!

 

✅ CSS 선택자 사용하기 - query 메서드

다음으로, query 메서드에 대해서 알아볼게요.

document 객체의 메서드 중에는 매개변수로 CSS 선택자를 전달받아 노드를 선택하는 메서드도 있어요!

 

실습을 해보겠습니다.

다음과 같이 HTML 문서가 있을 때 class 속성값이 box-1인 요소 노드를 선택하려면 어떻게 해야 될까요?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div class="box-1">
      <p class="text">text-1</p>
      <p class="text">text-2</p>
    </div>
    <div class="box-2">
      <p class="text">text-3</p>
      <p class="text">text-4</p>
    </div>
  </body>
</html>

다음 코드를 추가해 주시면 됩니다.

querySeletor(<CSS 선택자>)를 사용하시면 매개 변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택해요.

    <script>
      const el = document.querySelector(".box-1");
    </script>

다음으로 class 속성값이 box-1인 요소의 하위에 있는 p 태그를 가져와볼까요?

먼저, 아까 활용했던 get메서드를 활용해 getElementsByClassName() 메서드로 작성해 줍니다.

    <script>
      const el = document.queryElementByClassName("box-1")[0].children;
      console.log(el);
    </script>

다음으로, CSS 선택자를 사용하는 querySelectorAll() 메서드로 작성해 보겠습니다.

    <script>
      const el = document.querySelectorAll(".box-1 .text");
      console.log(el);
    </script>

그럼 다음과 같은 결과가 나오는 것을 확인할 수 있어요!

3. 노드 조작하기

3.1 콘텐츠 조작하기

선택한 노드의 타입이 요소 노드라면 다음 속성을 사용해 콘텐츠를 조작할 수 있어요!

 

textContent 요소 노드의 모든 텍스트에 접근

innerText 요소 노드의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근

innerHTML 요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근

 

많이 사용하게 되니, 책의 실습을 통해 꼭 코드를 따라 쳐보세요!

💡 멘토 TIP

속성들의 특징이 비슷해서 헷갈리실 수 있는데 다음 블로그를 한 번 참고해 보세요!

 

[Javascript] innerHTML, innerText, textContent 차이점

innerHTML, innerText, textContent 속성은 node나 element의 텍스트값을 읽어오고 설정할 수 있다는 점에서 비슷합니다. innerHTML과 innerText의 차이점은 지난 포스팅에서 살펴보았습니다. [Javascript] innerText와 in

hianna.tistory.com

 

3.2 스타일 조작하기

선택된 노드의 타입이 요소 노드라면 다음과 같이 style 속성으로 요소에 스타일을 지정할 수 있어요!

  <body>
    <p id="text">text</p>
    <script>
      const pEl = document.querySelector("p");
      pEl.style.color = "red";
    </script>
  </body>

 

3.3 클래스 속성 조작하기

저번에 앞서 배웠던 class 기억나시죠?

지정해야 되는 스타일이 명확하다면 자바스크립트로 속성을 하나씩 지정하지 않고,

class 속성을 추가하고 클래스 선택자로 지정하는 편이 훨씬 더 깔끔합니다.

<노드>.classList.add("class 속성값") // 추가 
<노드>.classList.remove("class 속성값") // 삭제 
<노드>.classList.toggle("class 속성값") // 추가와 삭제 반복

 

3.5 메서드로 속성 조작하기

지금까지 document 객체의 속성으로 HTML 요소에 접근해 일부 속성을 조작할 수 있었는데요.

다음 메서드를 사용하면 모든 속성을 전체적으로 조작할 수도 있습니다!

<노드>.getAttribute("속성명") // 속성값을 가져온다.
<노드>.setAttribute("속성명", "속성값") // 속성값을 설정한다.
<노드>.removeAttribute("속성명") // 속성을 삭제한다.

 

4. 노드 추가/삭제하기

4.1 노드 추가하기

4.2 노드 삭제하기

 

노드 추가하기와 삭제하기는 책의 실습을 참고하셔서

추가와 삭제 둘 다 직접 코드를 따라 쳐보세요!

 

내일부터는 폼 조작하기를 공부할 예정이라,

노드에 대해서 익숙해져야 됩니다!

 

제가 공부한 내용을 보고 궁금한 점이 있으면 댓글을 남겨 주세요.
확인하고 답변해 드리겠습니다. 
그럼 내일 다시 만나요!

 

✅ 정리

1. 문서 객체 모델 이해하기

2. 노드 선택하기

3. 노드 조작하기

4. 노드 추가/삭제하기

저작자표시

'🍞 대외활동 > 길벗 블로깅 멘토' 카테고리의 다른 글

[HTML+CSS+자바스크립트] 12장 문서 객체 모델과 이벤트 다루기 (~522p)  (0) 2023.03.14
[HTML+CSS+자바스크립트] 11장 자바스크립트 객체 다루기 (~453p)  (0) 2023.03.13
[HTML+CSS+자바스크립트] 11장 자바스크립트 객체 다루기 (~432p)  (0) 2023.03.10
[HTML+CSS+자바스크립트] 10장 자바스크립트 함수 다루기 (~417p)  (0) 2023.03.09
[HTML+CSS+자바스크립트] 10장 자바스크립트 함수 다루기 (~405p)  (0) 2023.03.05

티스토리툴바