TIL_17_221122

17일 차 회고

오늘의 개발일지.

1. 30분 일찍 도착해 JS 문법 을 읽어 보는 스터디?를 만들었다.
   오늘 시작해서 꾸준히 할지 는 모르겠지만 꾸준히 하기 위해 노력 할것이다!
2. 알고리즘 문제 풀기
   알고리즘 문제를 하루에 쉬운레벨 5개 풀기가 목표 였는데 프로젝트를 시작 한다고 소홀 해진 것 같아 다시 도전 하기로 했다.
3. 프로젝트 개발.
   할건 많고 프로젝트도 진행해야 해서 마음은 조급하지만 이렇게 와다다다 진행하다 보면 언젠간 쑥쑥 성장 해 있지 않을까 생각이 든다!!🤔

자바스크립트 DOM

document.getElementByID

<div id="elem">
  <div id="elem-content">Element</div>
</div>

<script>
  // 요소 얻기
  let elem = document.getElementById('elem');

  // 배경색 변경하기
  elem.style.background = 'red';
</script>

document.querySelectorAll()

• css 선택자를 활용할 수 있다.
• 가상 클래스도 사용 할 수 있다. document.querySelectorAll(':hover')

<ul>
  <li>1-1</li>
  <li>1-2</li>
</ul>
<ul>
  <li>2-1</li>
  <li>2-2</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "1-2", "2-2"
  }
</script>

querySelector

• 주어진 css 선택자에 대응하는 요소 중 첫 번째 요소를 반환한다.

matches

• elem 이 주어진 css 선택자와 일치 하는지 여부를 판단해준다.(true,false)

<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>

<script>
  // document.body.children가 아니더라도 컬렉션이라면 이 메서드를 적용할 수 있다.
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("주어진 CSS 선택자와 일치하는 요소: " + elem.href );
    }
  }
</script>

closest

• elem 자기 자신을 포함하여 css 선택자와 일치하는 가장가까운 조상 요소를 찾을 수 있게 도와 준다.

<h1>목차</h1>

<div class="contents">
  <ul class="book">
    <li class="chapter">1장</li>
    <li class="chapter">2장</li>
  </ul>
</div>

<script>
  let chapter = document.querySelector('.chapter'); // LI

  alert(chapter.closest('.book')); // UL
  alert(chapter.closest('.contents')); // DIV

  alert(chapter.closest('h1')); // null(h1은 li의 조상 요소가 아님)
</script>

getElementsBy

• elem.getElementsByTagName(tag) - tag 검색/ * ->모든태그 검색
• elem.getElementsByClassName(className) - class 검색
• document.getElementsByName(Name) - 색 기준은 name 속성값이고, 이 메서드 역시 검색 결과를 담은 컬렉션을 반환

<form name="my-form">
  <div class="article">글</div>
  <div class="long article">내용이 긴 글</div>
</form>

<script>
  // name 속성을 이용해 검색
  let form = document.getElementsByName('my-form')[0];

  // form 내에서 클래스 이름을 이용해 검색
  let articles = form.getElementsByClassName('article');
  alert(articles.length); // 2. 클래스 속성값이 'article'인 요소는 2개입니다.
</script>

elemA.contain(elemB)

elemA.contains(elemB)는 elemB가 elemA에 속하거나(elemB가 elemA의 후손인 경우) elemA==elemB일 때, 참을 반환

출처