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

最新推荐文章于 2019-12-16 15:07:24 发布

qq20004604

最新推荐文章于 2019-12-16 15:07:24 发布

阅读量1.7k

点赞数

分类专栏：前端的小玩意原生JavaScript系列前端的小玩意文章标签：替代jQuery的原生API

本文链接：https://blog.csdn.net/qq20004604/article/details/52725909

版权

前端的小玩意同时被 3 个专栏收录

49 篇文章 2 订阅

订阅专栏

前端的小玩意

37 篇文章 26 订阅

订阅专栏

原生JavaScript系列

3 篇文章 0 订阅

订阅专栏

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

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

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

①addEventListener

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

范例：

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

②DOMContentLoaded

命令

DOMContentLoaded

效果

页面加载完成后触发本事件

兼容性

IE9及以上

http://caniuse.com/#search=DOMContentLoaded

范例：

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

注：

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

③querySelector、querySelectorAll 选择器

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

范例：

<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 移除事件

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

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var event = function () {
            alert("event happened!");
        }
        var node = document.querySelector('.test');
        var add = document.querySelector('.add');
        var remove = document.querySelector('.remove');
        add.addEventListener("click", function () {
            node.addEventListener("click", event);
        })
        remove.addEventListener("click", function () {
            node.removeEventListener("click", event);
        })
    })
</script>
<div class="test">
    事件触发器（点击触发）
</div>
<button class="add">添加事件</button>
<button class="remove">移除事件</button>

⑤classList 类列表

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

范例：

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var node = document.querySelector('.test');
        var list = node.classList;
        console.log(list);
        var add = document.querySelector('.add');
        var remove = document.querySelector('.remove');
        add.addEventListener("click", function () {
            list.add("anotherClass")
        })
        remove.addEventListener("click", function () {
            list.remove("anotherClass")
        })
    })
</script>
<div class="test">
    事件触发器（点击触发）
</div>
<button class="add">添加</button>
<button class="remove">移除</button>

⑥textContent和innerHTML

命令

textContent、innerHTML

效果

前者查看文本内容；

后者查看html内容

兼容性

前者IE9及以上；

后者IE8及以上

http://caniuse.com/#search=textContent

http://caniuse.com/#search=innerHTML

范例：

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var node = document.querySelector('.test');
        var add = document.querySelector('.add');
        var remove = document.querySelector('.remove');
        add.addEventListener("click", function () {
            console.log(node.textContent);
        })
        remove.addEventListener("click", function () {
            console.log(node.innerHTML);
        })
    })
</script>
<div class="test">
    <span>事件触发器（点击触发）</span>
</div>
<button class="add">查看textContent内容</button>
<button class="remove">查看innerHTML内容</button>

注：

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

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

qq20004604

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的小玩意（12）替代jQuery的原生API（大部分需IE9及以上版本）

原文来自：http://ms.csdn.net/geek/105175本文对其原文进行格式化编辑，部分增补（46）替代jQuery常用功能的原生JS代码①addEventListener命令addEventListener效果添加响应事件兼容性IE9及以上http:/
复制链接

扫一扫