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

子要素の数を取得する childElementCount
以下のような要素の中にたくさんのspanがある場合、 いくつあるのか数えるのはたいへんです。
<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秒後に、二つ目のブロックのアニメーションを開始させたい。
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等は以下を参照してください。
