getElementsByTagName、getElementsByClassName与querySelectorAll的区别
getElementsByTagName、getElementsByClassName 获取的节点集合是动态的。
querySelectorAll 获取的节点集合是该函数调用时的节点集合快照。
getElementsByTagName 当你删除节点的时候，该方法返回的对象也会同时改变。
querySelectorAll 当你删除节点的时候，该方法返回的对象也不会改变。
下面的示例展示的它们的差异
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.wrap{
width: 300px;
height: 300px;
background-color: orange;
overflow-y: scroll;
}
</style>
<div class="wrap">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
<p>21</p>
<p>22</p>
<p>23</p>
<p>24</p>
<p>25</p>
<p>26</p>
<p>27</p>
<p>28</p>
<p>29</p>
<p>30</p>
<p>31</p>
<p>32</p>
<p>33</p>
<p>34</p>
<p>35</p>
<p>36</p>
<p>37</p>
<p>38</p>
<p>39</p>
<p>40</p>
<p>41</p>
<p>42</p>
<p>43</p>
<p>44</p>
<p>45</p>
<p>46</p>
<p>47</p>
<p>48</p>
<p>49</p>
<p>50</p>
<p>51</p>
<p>52</p>
<p>53</p>
<p>54</p>
<p>55</p>
<p>56</p>
<p>57</p>
<p>58</p>
<p>59</p>
<p>60</p>
<p>61</p>
<p>62</p>
<p>63</p>
<p>64</p>
<p>65</p>
<p>66</p>
<p>67</p>
<p>68</p>
<p>69</p>
<p>70</p>
<p>71</p>
<p>72</p>
<p>73</p>
<p>74</p>
<p>75</p>
<p>76</p>
<p>77</p>
<p>78</p>
<p>79</p>
<p>80</p>
<p>81</p>
<p>82</p>
<p>83</p>
<p>84</p>
<p>85</p>
<p>86</p>
<p>87</p>
<p>88</p>
<p>89</p>
<p>90</p>
<p>91</p>
<p>92</p>
<p>93</p>
<p>94</p>
<p>95</p>
<p>96</p>
<p>97</p>
<p>98</p>
<p>99</p>
<p>100</p>
</div>
<button id="delete-10p">delete-10p</button>
<script>
const delete10p = document.querySelector('#delete-10p')
const wrap = document.querySelector('.wrap')
delete10p.addEventListener('click',handle_delete10p)
function handle_delete10p(){
// debugger
// const all_p_el = document.querySelectorAll('p')
const all_p_el = document.getElementsByTagName('p')
let times = 0
for(let i =0,len=all_p_el.length;i<len;i++){
if(times===10){
return
}
times++
wrap.removeChild(all_p_el[i])
}
}
</script>
</body>
</html>
