前端的小玩意（12）替代jQuery的原生API（大部分需IE9及以上版本）

快来打我* 2022-07-16 03:57 75阅读 0赞

原文来自：http://ms.csdn.net/geek/105175

本文对其原文进行格式化编辑，部分增补

**（46）替代jQuery常用功能的原生JS代码**

①addEventListener

<table> 
 <tbody> 
  <tr> 
   <td> <p>命令</p> </td> 
   <td> <p>addEventListener</p> </td> 
  </tr> 
  <tr> 
   <td> <p>效果</p> </td> 
   <td> <p>添加响应事件</p> </td> 
  </tr> 
  <tr> 
   <td> <p>兼容性</p> </td> 
   <td> <p>IE9及以上</p> <p><a href="http://caniuse.com/#search=addEventListener" rel="nofollow">http://caniuse.com/#search=addEventListener</a></p> </td> 
  </tr> 
  <tr> 
   <td> <p>注：</p> </td> 
   <td> <p>同一个回调函数，多次添加不会重复触发</p> </td> 
  </tr> 
  <tr> 
   <td> <p>原型</p> </td> 
   <td> <p>dom. addEventListener("事件名", 回调函数, 是否在捕获阶段执行)</p> <p>第三个值默认为false（默认冒泡阶段执行），如果为true，则在捕获阶段执行。</p> </td> 
  </tr> 
 </tbody> 
</table>

范例：

<div id="test">
        abc
    </div>
    <script>
        var node = document.getElementById("test");
        console.log(node);
        node.addEventListener("click", function () {
            alert("click!");
        })
    </script>

②DOMContentLoaded

<table> 
 <tbody> 
  <tr> 
   <td> <p>命令</p> </td> 
   <td> <p>DOMContentLoaded</p> </td> 
  </tr> 
  <tr> 
   <td> <p>效果</p> </td> 
   <td> <p>页面加载完成后触发本事件</p> </td> 
  </tr> 
  <tr> 
   <td> <p>兼容性</p> </td> 
   <td> <p>IE9及以上</p> <p>http://caniuse.com/#search=DOMContentLoaded</p> </td> 
  </tr> 
 </tbody> 
</table>

范例：

注：

假如不加这个事件，那么输出结果是null

③querySelector、querySelectorAll      选择器

<table> 
 <tbody> 
  <tr> 
   <td> <p>命令</p> </td> 
   <td> <p>querySelector（单个，遇见的第一个）；</p> <p>querySelectorAll（全部符合的）</p> </td> 
  </tr> 
  <tr> 
   <td> <p>效果</p> </td> 
   <td> <p>DOM元素选择器，类似jQuery的选择器</p> </td> 
  </tr> 
  <tr> 
   <td> <p>兼容性</p> </td> 
   <td> <p>IE9及以上，IE8只有部分支持</p> <p><a href="http://caniuse.com/#search=DOMContentLoaded" rel="nofollow">http://caniuse.com/#search=DOMContentLoaded</a></p> </td> 
  </tr> 
  <tr> 
   <td> <p>关于IE8</p> </td> 
   <td> <p>IE8的支持，被限制在CSS2.1和CSS3的一小部分。另外，在IOS8.x里会有bug（id然后加元素会失效）。</p> <p>具体可以参见上面url里的说明</p> </td> 
  </tr> 
 </tbody> 
</table>

范例：

<body>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var node = document.querySelector('.container').querySelector('.test');
            console.log(node);
            var node = document.querySelector('body').querySelectorAll('.test');
            console.log(node);
        })
    </script>
    <div class="test">
        abcd
    </div>
    <div class="container">
        <div class="test">
            defg
        </div>
    </div>
    </body>

注：

【1】可以选择某一个DOM元素下的子元素（如第二个）；

【2】不加All的是选择第一个，返回结果是单个DOM元素；加了All返回的是一个数组（即使只有一个）；

④removeEventListener    移除事件

<table> 
 <tbody> 
  <tr> 
   <td> <p>命令</p> </td> 
   <td> <p>removeEventListener</p> </td> 
  </tr> 
  <tr> 
   <td> <p>效果</p> </td> 
   <td> <p>移除响应事件</p> </td> 
  </tr> 
  <tr> 
   <td> <p>兼容性</p> </td> 
   <td> <p>没有查到，但推测和addEventListener相同</p> </td> 
  </tr> 
  <tr> 
   <td> <p>注：</p> </td> 
   <td> <p>同一个回调函数，多次添加不会重复触发；</p> <p>删除已删除事件也不会报错。</p> </td> 
  </tr> 
 </tbody> 
</table>

⑤classList    类列表

<table> 
 <tbody> 
  <tr> 
   <td> <p>命令</p> </td> 
   <td> <p>DOM.classList</p> </td> 
  </tr> 
  <tr> 
   <td> <p>效果</p> </td> 
   <td> <p>类列表</p> </td> 
  </tr> 
  <tr> 
   <td> <p>兼容性</p> </td> 
   <td> <p>IE10及以上</p> <p>http://caniuse.com/#search=classList</p> </td> 
  </tr> 
  <tr> 
   <td> <p>注：</p> </td> 
   <td> <p>结果是一个对象，但可以像数组那样获取第N个类名；</p> </td> 
  </tr> 
  <tr> 
   <td> <p>常用方法</p> </td> 
   <td> <p>单独获取所有类名（以字符串形式）是classList.value</p> <p>添加类名是classList.add(类名)</p> <p>移除类名是classList.remove(类名)</p> <p>查看是否存在某个类classList.contains(类名)</p> <p>切换是否显示某个类classList.toggle(类名)</p> </td> 
  </tr> 
 </tbody> 
</table>

范例：

⑥textContent和innerHTML

<table> 
 <tbody> 
  <tr> 
   <td> <p>命令</p> </td> 
   <td> <p>textContent、innerHTML</p> </td> 
  </tr> 
  <tr> 
   <td> <p>效果</p> </td> 
   <td> <p>前者查看文本内容；</p> <p>后者查看html内容</p> </td> 
  </tr> 
  <tr> 
   <td> <p>兼容性</p> </td> 
   <td> <p>前者IE9及以上；</p> <p>后者IE8及以上</p> <p>http://caniuse.com/#search=textContent</p> <p>http://caniuse.com/#search=innerHTML</p> </td> 
  </tr> 
 </tbody> 
</table>

范例：

注：

可以直接对其属性进行修改；但修改textContent属性，如果内容有html标签，不会被解释为html标签；

但通过innerHTML修改的html标签会被解释。