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

 

 

 

 

DOM을 이용해서 자바스크립트, css, html을 이어준다

 

 

<script>
    // $는 관례 붙어있으면 태그가 저장되있다는거임
    // 프로퍼티에서 스타일조작하면 인라인으로 들어감 점수가 높다.
    const $banana = document.getElementById('banana');
    console.log($banana.textContent);


    $banana.textContent = '부네너';
    $banana.pet = '바나나원숭이';

    const $peach = document.getElementById('peach');
    $peach.style['font-style'] = 'italic';

    // id가 grape인 요소노드객체를 취득하여
    // 배경색상을 violet 색으로 조작하세요.
    const $grape = document.getElementById('grape');
    $grape.style.backgroundColor = 'violet';
    $grape.style.width = 'fit-content';
    $grape.style.color = 'yellow';

  </script>

 

 

 

 

 

 

css 선택자로 태그 가져오기.

<script>
    
    // const $grape = document.querySelector('.gp'); // .gp 점을 붙여서 선택자 문법 해줘야함
    // const $grape = document.querySelector('.f-item'); // 여러개의 경우 맨첫번째꺼로 잡힘
    // const $grape = document.querySelector('.f-item2'); // 요소노드가 존재하지않으면 nulld 반환
    // const $grape = document.querySelector('#fruits li:nth-child(3)');  // CSS선택자 다 써도 됨
    // const $grape = document.querySelector('.bn + li'); // CSS선택자 다 써도 됨
    const $grape = document.querySelector('#grape'); // CSS선택자 다 써도 됨
    // 굳이 id가 있으면 getElementById쓰는게 좋음 그게 빠름. 없으면 쿼리셀렉터!
    

    // console.log($grape);
    
    $grape.textContent = '맛있는 포도';

    const $fItemList = [...document.querySelectorAll('.f-item')]
    console.log($fItemList);
    console.log([1,2,3]);
    // for (const $f of $fItemList) {
    //   $f.style.color = 'red';
    // }

    $fItemList.forEach($f => {
      $f.style.color = 'blue';
    }); // 사실 이런 스타일 변경은 css 에서 해줘야함 자바스크립트는 "무엇을 하면 '어떻게'바뀐다 할때 사용"

    // $fItemList.pop();

    // 유사 배열: 객체 형태를 유지한 배열
    const foods = {
      0: '짜장면',
      1: '짬뽕',
      2: '볶음밥',
      length: 3,
      age: 30
    };
    console.log(foods[0]);
    console.log(foods.length);
    console.log(foods.age);

  </script>

 

 

 

 

자식 부모형제 노드 탐색 및 getElementById, querySelector

<script>
    // getElementById는 걍 #없이 아이디만 써도됨
    const $ul = document.getElementById('fruits');

    const $children = [...$ul.children];
    console.log($children);

    const $first = $ul.firstElementChild;
    console.log($first);

    const $last = $ul.lastElementChild;

    $first.style.fontSize = '2em';
    $last.style.color = 'violet';

    function hasChildren($tag) {
      // return $tag.children.length > 0;
      return !!$tag.children.length;
    }

    const $box = document.querySelector('.box');
    console.log($box.children);
    console.log(hasChildren($box));

  </script>

<script>
    const $ul = document.getElementById('fruits');

    const $wrap = $ul.parentElement;
    $wrap.style.background = 'orange';
    $wrap.style.height = '100px';
    $wrap.style.padding = '10px';

    const [$apple, $banana, $grape]
      // = [...$wrap.firstElementChild.children];
      = [...document.querySelectorAll('.fr')];

    $grape.style.color = 'violet';

    console.log($banana.nextElementSibling === $grape);
    console.log(
      $apple.nextElementSibling.nextElementSibling 
      === $grape);


    const $active = document.querySelector('.active');

    console.log($active  // a = 20
                  .parentElement // li
                  .parentElement // ul
                  .nextElementSibling // ul2
                  .lastElementChild // li3
                  .firstElementChild // a = 60
    );   

    // 기준태그로부터 위로 올라가면서 탐색하는 함수
    // closest('css selector');
    const $contentSect = $active.closest('section.contents');
    console.log($contentSect);

    // 아래방향 탐색은? 
    const $found 
      = $contentSect
          .querySelector('ul.list:nth-child(2)')
          .querySelector('li.item:last-child')
        ;
    console.log($found);

  </script>