▲TOPへ戻る

【javascript】子要素の数を取得する方法 childElementCount

childElementCount
サイト内検索

子要素の数を取得する childElementCount

以下のような要素の中にたくさんのspanがある場合、 いくつあるのか数えるのはたいへんです。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  <div class="span-wrapper">  <!-- 親要素 -->>
    <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span
    ><span>6</span><span>7</span><span>8</span><span>9</span
    ><span>10</span><span>11</span><span>12</span><span>13</span
    ><span>14</span><span>15</span><span>16</span><span>17</span
    ><span>18</span><span>19</span><span>20</span><span>21</span
    ><span>22</span><span>23</span><span>24</span><span>25</span
    ><span>26</span><span>27</span><span>28</span><span>29</span
    ><span>30</span><span>31</span><span>32</span><span>33</span
    ><span>34</span><span>35</span><span>36</span><span>37</span
    ><span>38</span><span>39</span><span>40</span><span>41</span
    ><span>42</span><span>43</span><span>44</span><span>45</span
    ><span>46</span><span>47</span><span>48</span><span>49</span
    ><span>50</span><span>51</span><span>52</span><span>53</span
    ><span>54</span><span>55</span><span>56</span><span>57</span
    ><span>58</span><span>59</span><span>60</span><span>61</span
    ><span>62</span><span>63</span><span>64</span><span>65</span
    ><span>66</span><span>67</span><span>68</span><span>69</span
    ><span>70</span><span>71</span><span>72</span><span>73</span
    ><span>74</span><span>75</span><span>76</span><span>77</span
    ><span>78</span><span>79</span><span>80</span><span>81</span
    ><span>82</span><span>83</span><span>84</span><span>85</span
    ><span>86</span><span>87</span><span>88</span><span>89</span
    ><span>90</span><span>91</span><span>92</span><span>93</span
    ><span>94</span><span>95</span><span>96</span><span>97</span
    ><span>98</span><span>99</span><span>100</span>
  </div>

そんな時、childElementCountを使えば簡単です。

  const span = document.querySelector(".span-wrapper"); //  親要素
  console.log(span.childElementCount);
  //  結果=>  100

応用

以下のように、一つ目のブロックの文字がすべて表示されたら二つ目がスタートするようにしたい。

一文字ずつspanに格納されており、animation-delay で0.1秒ずつ遅らせているので、一つ目のブロックのspanの数÷10秒後に、二つ目のブロックのアニメーションを開始させたい。

子要素の数を取得したい。
そんな時は、childElementCountが使える!
  const content = document.querySelectorAll(".content");
  let textCount = 0;

  for (let i = 0; i < content.length; i++) {
    const element = content[i];
    const texts = element.textContent;
    textsArray = [];

    for (let j = 0; j < texts.split("").length; j++) {
      const textT = texts.split("")[j];
      if (textT === " ") {
        textsArray.push(" ");
      } else {
        textsArray.push(
          '<span><span style="animation-delay:' +
            (j * 0.1 + 0.2 + textCount / 10) +    //  ここでのポイント!
            's;">' +
            textT +
            "</span></span>"
        );
      }
    }
    element.textContent = "";
    for (let k = 0; k < textsArray.length; k++) {
      content[i].innerHTML += textsArray[k];
    }
    textCount += element.childElementCount; //  ここでのポイント!
  }

参考

1文字ずつのアニメーションに関するCSS等は以下を参照してください。

js
【CSS】【javascript】テキストを1文字ずつアニメーションさせる方法

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

サイト内検索👇