DOM要素のカウント

15528 ワード
JavaScript DOM テキストリンク

DOM要素の処理


質問元:Ellis 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 + " 개 입니다. ");
}
剣指OFFERの2つのスタックでキューを実現する(九度OJ 1512)
Chapter 3. Separate Chaining Hashing (2)