티스토리 뷰

Frontend/JavaScript

[생활코딩][웹브라우저JS]- 문자열로 노드 제어

blueprint-12 2022. 2. 9. 18:37

이전까지 노드 변경 API 에서는 여러 메소드를 이용해서 노드를 제어하는 방법에 대해서 알아봤다. 

그 전의 방식들이 조금 장황한 편이라서 비교적 편리하게 노드를 조작하는 방법을 알아보자. 

  • 예시로 엘리먼트에 content를 추가할 때 createTextNode() 메소드를 이용하여 텍스트 노드를 생성한 뒤 추가하는 등 번잡함이 있다. appendChild()도 마찬가지

 

문자열로 노드 제어

 

▶innerHTML

innerHTML은 문자열로 자식 노드를 만들 수 있는 기능(set)을 제공하며 자식 노드의 값을 읽어올 수도 있다(get).

<body>
    <ul id="target">
      <li>HTML</li>
      <li>CSS</li>
    </ul>
    <input type="button" onclick="get();" value="get" />
    <input type="button" onclick="set();" value="set" />
    <script>
      function get() {
        // innerHTML을 통해 해당엘리먼트의 하위 엘리먼트(자식 노드)를 전부 읽어올 수 있다.
        const target = document.getElementById("target");
        alert(target.innerHTML);
      }
      function set() {
        //innerHTML의 값을 문자열(HTML코드)로 세팅해서 자식 노드를 새롭게 바꿀 수 있다.
        const target = document.getElementById("target");
        target.innerHTML = "<li>JavaScript Core</li><li>BOM</li><li>DOM</li>";
      }
    </script>
  </body>

▶outerHTML

innerHTML과 차이점: outerHTML은 자기 자신도 포함한다. innerHTML의 경우 하위 엘리먼트만 해당

위의 예시에서 target.innerHTML 의 경우 자식 노드만 변경하지만 outerHTML을 하면 target에 해당하는 자기자신(ul엘리먼트)도 포함하여 변경하는 것

 

 

▶innerText, outerText

innerHTML, outerHTML 과 다르게 이 API들은 값을 읽을 때 HTML 코드를 제외한 문자열만을 리턴하고, 값을 변경할 때는 HTML의 코드를 그대로 추가한다. 

e.g.) target.innerText = "<li>JavaScript Core</li> 를 하면 HTML코드(li태그)가 아니라 문자 그대로가 반영된다.

->HTML코드가 그 코드에 해당하게 파싱돼서 나오는 것이 아니라 문자열 자체가 삽입된다. 

alert(target.innerText); 를 통해 값을 읽어올 때에도 HTML 코드는 제외하고 문자열만 리턴한다.  

  • 참고로 innerText, outerText, textContent는 동일한 값이 나옵니다만 속도는 textContent>innerText >outerText 순으로 빠르게 나옵니다. 또한, textContent 는 여러 줄일 경우, 내부 개행(</br>이 아닌 것)은 모두 한 줄 처리되지만 innerText, outerText는 개행되어 표시됩니다. 

 

▶insertAdjacentHTML(position, text)

좀 더 정교하게 문자열을 이용해서 노드를 변경하고 싶을 때 사용합니다.

// insertAdjacentHTML(삽입할 위치,삽입할 텍스트)

  • position에는 4가지 유형이 들어갈 수 있습니다. 
    1. beforebegin //요소 자체 앞(즉, 요소의 이전 형제 뒤)
    2. afterbegin //요소 바로 내부, 첫 번째 자식 앞에 있습니다.
    3. beforeend //요소 바로 내부, 마지막 자식 뒤.
    4. afterend // 요소 자체 뒤(즉, 요소의 다음 형제 이전)
  • text : HTML 또는 XML로 구문 분석되고 트리에 삽입될 문자열
<body>
    <ul id="target">
      <li>CSS</li>
    </ul>
    <input type="button" onclick="beforebegin();" value="beforebegin" />
    <input type="button" onclick="afterbegin();" value="afterbegin" />
    <input type="button" onclick="beforeend();" value="beforeend" />
    <input type="button" onclick="afterend();" value="afterend" />
    <script>
      //insertAdjacentHTML(삽입할 위치,삽입할 텍스트)
      //시작 직전 즉, 해당 엘리먼트의 위쪽에 삽입된다.
      const target = document.getElementById("target");
      function beforebegin() {
        target.insertAdjacentHTML("beforebegin", "<h1>Client Side</h1>");
      }
      //엘리먼트가 시작한 후 맨앞쪽(첫번째 자식)
      function afterbegin() {
        target.insertAdjacentHTML("afterbegin", "<li>HTML</li>");
      }
      //엘리먼트가 끝나기 직전(마지막 자식)
      function beforeend() {
        target.insertAdjacentHTML("beforeend", "<li>JavaScript</li>");
      }
      //엘리먼트가 끝난 직후(닫히는 태그 바로 아래에 생긴다)
      function afterend() {
        target.insertAdjacentHTML("afterend", "<h1>Server Side</h1>");
      }
    </script>
  </body>

'Frontend > JavaScript' 카테고리의 다른 글

[생활코딩][웹브라우저JS] - 문서의 기하학적 특성  (0) 2022.02.12
[생활코딩][웹브라우저JS] - Document 객체, Text 객체  (0) 2022.02.09
[생활코딩][웹브라우저JS]- Node 객체, Node객체 API  (0) 2022.02.06
[생활코딩][웹브라우저JS]- Element객체, 관련 API  (0) 2022.02.03
[생활코딩]-JS Execute context & closure  (0) 2022.02.02
댓글