본문 바로가기
Frontend/JavaScript

[JavaScript] document-2 (노드 조작/추가,삭제)

by 희디 2023. 7. 30.

노드 조작하기

 

1. 콘텐츠 조작하기 

속성 설명
textContent 요소 노드의 모든 텍스트에 접근한다.
innerText 요소 노드의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근한다.
innerHTML 요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근한다.  
<body>
    <p id="title">hello, <span style="display:none;">javascript</span></p>
    <script>
        const txt = document.getElementById("title").textContent;
        const innTxt = document.getElementById("title").innerText;
        const htmlTxt = document.getElementById("title").innerHTML;
        console.log(txt);
        console.log(innTxt);
        console.log(htmlTxt);
    </script>

javascript 텍스트를 display:none으로 한 것은 웹 브라우저에 표시되는 텍스트인지 아닌지 구분하기 위해서!

위처럼 접근할 수 있고, 속성에 값을 할당하면 각 노드의 콘텐츠를 바꿀수도 있다. 

 

<body>
    <p id="title">hello, javascript</p>
    <p id="js">hello this is javascript</p>
    <p id="html">hello this is html</p>
    <script>
        document.querySelector("#title").textContent = "<h4>내용 테스트</h4>";
        document.querySelector("#js").innerText = "hello this is edited context";
        document.querySelector("#html").innerHTML = "<a href='#'> link </a>";
    </script>
</body>

textContent와 innerText 속성은 단순히 텍스트로 취급해서 값을 그대로 노드의 콘텐츠에 넣는다. 

innerHTML 속성에 값을 할당하면 태그로 인식해 노드의 콘텐츠에 적용한다. 

 

 

스타일 조작하기 

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

더보기

<노드>.style.<css 속성명> = <속성값>;

background-color처럼 대시(-)가 있는 속성은 자바스크립트가 빼기 연산자로 인식하므로, 카멜표기법으로 해야한다. 

 

 

클래스 속성 조작하기 

 

위와 같이 style 속성으로 스타일을 조작하면 속성을 하나씩 적어야해서 불편하다.

그래서 확실한 스타일이 있다면, 해당 태그에 class 속성을 추가하고 클래스 선택자로 지정하는 것이 더 좋음

왼쪽은 하나씩, 오른쪽은 클래스 속성으로 바꾼것이다.

실행결과는 위와 같다. 

 

추가적으로, 자바스크립트로 class 속성을 조작해 스타일을 적용할 수 있다. 

classList 속성의 add(), remove(), toggle() 메서드를 사용한다. 

add() remove() toggle()
class 속성값을 추가 class 속성값을 삭제 add()와 remove() 메서드를 반복해서 호출 
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .js{
            font-size:50px;
        }
        .blue-color{
            color:aqua;
        }
        .yellowBack{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <p class="js">hello this is javascript</p>
    <script>
        const el = document.querySelector("p");
        el.classList.add("blue-color");
        el.classList.add("yellowBack");
    </script>
</body>
</html>

클래스 속성자를 style 태그 안에 만들고 classList.add()로 el에 적용하면 아래와 같이 정상작동한다. 

클래스 속성을 만들고!! 나서 해당 querySelector로 선택한 곳에 add 해주는것!

좀 더 추가해서 아래와 같이 만들면

 

이 상태에서 remove()로 글씨 색깔을 지워보겠다. 

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .js{
            font-size:50px;
        }
        .blue-color{
            color:aqua;
        }
        .yellowBack{
            background-color: bisque;
        }
        .bold{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="js">hello this is javascript</p>
    <script>
        const el = document.querySelector("p");
        el.classList.add("blue-color", "yellowBack", "bold");
        el.classList.remove("blue-color");
    </script>
</body>
</html>

그럼 깔끔하게 지워진다. 

 

마지막 toggle은 아래와 같은 형태로 초(1000이 1초)와 같이 써준다. 

 

<body>
    <p class="js">hello this is javascript</p>
    <script>
        const el = document.querySelector("p");
        el.classList.add("blue-color", "yellowBack", "bold");
        el.classList.remove("blue-color");

        setInterval(function(){
            el.classList.toggle("yellowBack");
        }, 1000);
    </script

자바스크립트에 내장된 함수로 setInterval 함수가 있으며, 첫번째 인자로는 함수, 두번째는 간격(1초가 1000)을 작성해줌.

1초간걱으로 배경이 있다가 없어진다. 

 

 

데이터 속성 조작하기 

dataset속성을 이용해서 사용할 수 있다. 

data-* 속성(사용자 정의) 사용 가능 

여기서 노드의 속성을 지정할 때, data-* 형태로 지정해야한다. 

실제로 속성으로 있다.

<button data-count="10">가방 구매</button>
<button data-count="5">신발 구매</button>
    <script>
        const btn = document.querySelectorAll("button");
        btn.forEach((k) => {
            console.log(k.dataset);
        })
    </script>

forEach()는 각 노드에 접근에 data-count의 속성정보를 가져와 출력한다. 

DOMStringMap 객체에 담겨 반환된다. 

 

두 개 이상의 data-속성이 있으면 원하는것만 출력도 가능하다. 

변경도 가능함! = 연산자로 가능. 

<button data-count="10" data-color="green">가방 구매</button>
<button data-count="5" data-color="blue">신발 구매</button>
    <script>
        const btn = document.querySelectorAll("button");
        btn.forEach((k) => {
            console.log(k.dataset.color);
        })
    </script>

 

 

메서드로 속성 조작하기

 

아래 메서드를 사용하면 모든 속성을 전체적으로 조작 가능 

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

 

속성값 가져오기 (여기선 href 속성을 가져옴)

<a href="https://www.naver.com">네이버</a>
<script>
  const aEl = document.querySelector("a");
  const href = aEl.getAttribute("href");
  console.log(href);
</script>

출력 결과 : https://www.naver.com

 

속성값 설정하기

<a href="https://www.gilbut.co.kr">길벗</a>
<script>
  const aEl = document.querySelector("a");
  const href = aEl.getAttribute("href");
  aE1.setAttribute("href", "https://daywnme.tistory.com/");
  aE1.innerText = "My Blog";
</script>

출력 결과 : My Blog

 

get/setAttribute()는 모든 속성의 상위 메소드라서 classList 속성이나 dataset속성으로 하는 조작을 전부 할 수 있다. 

++) 교재에 있는 다른 예제코드도 그대로 삽입하겠다. 

 

새창으로 열리게 하기 위해서 target 속성도 set해줬다. 

<a href="https://www.gilbut.co.kr">길벗</a>
<script>
  const aEl = document.querySelector("a");
  const href = aEl.getAttribute("href");
  aEl.setAttribute("href", "https://www.sucoding.kr");
  aEl.innerText = "수코딩";
  aEl.setAttribute("target", "_blank");
</script>

 

<style>
  .red-color{
    color:red;
  }
</style>
(중략)
<a href="https://www.gilbut.co.kr" data-link="길벗">길벗</a>
<script>
  const aEl = document.querySelector("a");
  aEl.setAttribute("data-link", "이지톡");
  aEl.setAttribute("class", "red-color");
</script>

 

removeAttribute() 메서드 활용 예제

<a href="https://www.gilbut.co.kr" class="red-color">길벗</a>
<script>
  const aEl = document.querySelector("a");
  aEl.removeAttribute("class"); // class 속성 삭제
</script>

 

classList 속성과 setAttribute() 메서드 

: classList 속성으로 class 속성값을 추가하거나 삭제해도 기존의 요소는 보존되는 한편, setAttribute()는 아예 속성값을 새로 설정하는 것이어서 기존 class 속성값을 보존하지 않음. 

 

 

노드 추가/삭제하기 

 

 

DOM 트리에서 새로운 노드를 생성하고, 생성한 노드를 기존 DOM 트리와 연결하면 동적으로 새로운 요소를 화면에 추가할 수 있다. 

 

노드를 추가할 때 사용하는 메서드는 아래와 같다. 

createAttribute()를 하고나서, 그 해당 속성의 값을 설정하기 위해서, 속성명식별자.value = "~~~"; 이렇게 설정해준다. 

const hrefAttr = document.createAttribute("href");
hrefAttr.value = "https://www.gilbut.co.kr";
document.querySelector("a").setAttributeNode(hrefAttr);

 

노드 삭제하기 

<부모 노드>.removeChild(<자식 노드>);

parentNode라는 속성도 있다. 

아래는 교재에 삽입된 코드이다. 

<body>
  <p>text 1</p>
  <a href="https://www.gilbut.co.kr">길벗</a>
  <a href="https://www.sucoding.kr">수코딩</a>
  <script>
    const pEl = document.querySelector("p");
    pEl.parentNode.removeChild(pEl);
  </script>
</body>

p 요소 노드를 찾아서 삭제하는 코드

<body>
  <p>text 1</p>
  <a href="https://www.gilbut.co.kr">길벗</a>
  <a href="https://www.sucoding.kr">수코딩</a>
  <script>
    const childNodes = document.body.childNodes; 
    childNodes.forEach((node) => {
      if(node.nodeName === "a") 
        node.parentNode.removeChild(node);
    })
  </script>
</body>

DOM트리를 순회하면서 a 태그에 해당하는 요소를 모두 삭제하는 코드 

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

[JavaScript] 이벤트 다루기, this 객체  (1) 2023.08.01
[JavaScript] 폼 조작하기  (0) 2023.07.31
[JavaScript] 문서 객체 모델 이해하기 (document편-1)  (0) 2023.07.29
[JavaScript] 브라우저 객체 모델 사용하기 (Window편)  (1) 2023.07.29
[JavaScript] 표준 내장 객체 사용하기  (1) 2023.07.29

관련글

티스토리툴바