[중앙정보처리학원] DOM* 2

 

 

 

 

 

텍스트, HTML 조작

<script>
      const $greet = document.getElementById("greet");
      console.log($greet.textContent.trim());

      $greet.innerHTML = 'hi <span class="highlight">java</span>'; // textContent 명령어쓰면 자식 태그 다사라질수도
      $greet.querySelector('.highlight').textContent = 'javascript!';

      const $foodList = document.getElementById('food-list');
      
      // $foodList.innerHTML = '<div>메롱</div>';

      // 자식태그 추가
      $foodList.innerHTML += '<li class ="food">짬뽕</li>';

      // 자식 태그 전체 삭제
      $foodList.innerHTML = '';
      
      const foods = ['연어회', '고등어찜', '오렌지', '딸기'];
      [
        {
          foodName: '연어회',
          price: 20000,
        }
      ]
      foods.forEach(f => {
        $foodList.innerHTML += `
        <li class="food">${f}</li>
      `;
    });
    </script>

 

 

 

 

 

 

태그 생성 및 추가

<script>
      // 태그 이름과 텍스트를 전달받으면 태그를 생성하는 함수
      function makeNewTag(tagName = "div", options = {}) {
        const $newTag = document.createElement(tagName);
        if (options.text) $newTag.textContent = options.text;
        return $newTag;
      }

      // 태그를 추가해주는 함수
      function append($parent, tagName, options) {
        $parent.appendChild(makeNewTag(tagName, options));
      }

      const $ul = document.getElementById("fruits");
      append($ul, "li", { text: "바나나", className: '', id: '' });
      append($ul, "li", { text: "망고" });
      append($ul, "li", { text: "오렌지" });
      append($ul, 'a', { href: ''});

      /*
    // 태그 생성: <li></li>
    const $newLi = document.createElement('li');
    console.log($newLi);

    // 텍스트 추가하기: <li>바나나</li>
    $newLi.textContent = '바나나';
    console.log($newLi);

    // ul에 자식노드로 붙이기
    const $ul = document.getElementById('fruits');
    $ul.appendChild($newLi); // 맨 마지막 위치에 추가
*/
    </script>

 

 

 

 

 

 

 

태그 중간 삽입하기

<script>
      const $fruits = document.getElementById('fruits');
      const [$apple, $banana, $grape] = [...$fruits.children];
      const $newLi = document.createElement('li');
      $newLi.textContent = '맹고';


      // 중간삽입 : insertBefore
      // $fruits.insertBefore($newLi, $grape);
      // $fruits.insertBefore($newLi, $fruits.firstElementChild);
      $fruits.insertBefore($newLi, document.querySelector('li:nth-child(2)'));
      
      // 노드 이동
      $fruits.appendChild($apple); // 원래 있던 애를 추가하면 뒤로
      $fruits.insertBefore($banana, null); // null 이면 맨뒤로 붙음
      
    </script>

 

 

 

 

 

 

태그 교체 및 삭제

<script>
      const $fruits = document.getElementById('fruits');
      const [$apple, $banana, $grape] = [...$fruits.children];
      
      // 새 노드 생성
      const $newDiv = document.createElement('div');
      $newDiv.textContent = '빡스';

      // 노드 교체 : replaceChild(new, old); child 니까 부모에
      $fruits.replaceChild($newDiv, $banana);

      // 노드 삭제 :
      // $fruits.removeChild($apple);

      // 자식노드 전체삭제
      // $fruits.innerHTML = '';
      // [...$fruits.children].forEach($f => {
      //   $fruits.removeChild($f);
      // });

      const children = [...$fruits.children];
      for (let i = 0; i < children.length; i++) {
        $fruits.removeChild(children[i]);
      }

    </script>