DOM 요소들의 개수 세기

15432 단어 JavaScriptDOMDOM

DOM 요소 다루기

문제 출처 : 엘리스 SW 엔지니어 트랙 2기

HTML

<body style="border: solid #036635 4px">
  <p>치즈 그린 어니언 브레드</p>
  <p>바질 토마토 크림치즈 베이글</p>
  <p>마스카포네 티라미수 케이크</p>
  <p>오가닉 그릭 요거트 플레인</p>

  <div id="coldbrew" style="border: solid #996633  3px">
    <p>토피넛 콜드 브루</p>
    <p>나이트로 바닐라 크림</p>
    <p>나이트로 콜드 브루</p>
    <p>돌체 콜드 브루</p>

    <div id="espresso" style="border: solid #663300 3px">
      <p>카라멜 마키아또</p>
      <p>블론드 에스프레소 라떼</p>
      <p>에스프레소 콘 파나</p>
      <p>스파클링 시트러스 에스프레소</p>
    </div>
  </div>
  <div id="tea" style="border: solid #ffcc00 3px">
      <p>아이스 라임 패션 티</p>
      <p>별궁 오미자 유스베리 티</p>
      <p>아이스 유자 민트 티</p>
      <p>아이스 제주 유기 녹차</p>
      <p>히비스커스 블렌드 티</p>
     
    </div>
  <p>단호박 에그 샌드위치</p>
  <p>현미 크림 수프</p>

  <button onclick="getAllParaElems();">
    모든 메뉴 종류 확인</button><br />

  <button onclick="div1ParaElems();">
    커피 음료 종류 확인</button><br />

  <button onclick="div2ParaElems();">
    에스프레소 종류 확인</button>

</body>

Javascript

div 내부 모든 <p> 요소 세기

.getElementsByTagName() 로 모든 p 태그(메뉴)의 개수를 구한다

function getAllParaElems() {
  var num = document.getElementsByTagName('p').length;
  alert("전체 메뉴 종류는 " + num + " 개 입니다.");
}

특정 id 에 들어있는 <p> 요소 세기

coffee 변수에 .getElementById()를 이용해서 coldbrew id 를 담아주고 num 변수에 coldbrew id에 들어있는 모든 p 태그(메뉴)의 개수를 구한다

function div1ParaElems() {
  var coffee = document.getElementById('coldbrew')
  var num = coffee.getElementsByTagName('p').length;
  alert("커피 음료 종류는 " + num + " 개 입니다.");
}

위와 동일

function div2ParaElems() {
  var espresso = document.getElementById("espresso");
  var num = espresso.getElementsByTagName('p').length;
  alert("에스프레소 음료 종류는 " + num + " 개 입니다. ");
}
#1 스파르타 코딩클럽 둘쨋날
Chapter 3. Separate Chaining Hashing (2)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage