Search

与我们合作

我们专注:网站策划设计、网络多媒体传播、网站优化及网站营销、品牌策略与设计
主营业务:网站建设、移动端微信小程序开发、VI设计、网络运营、云产品·运维解决方案

有一个品牌项目想和我们谈谈吗?

您可以填写右边的表格,让我们了解您的项目需求,这是一个良好的开始,我们将会尽快与您取得联系。当然也欢迎您给我们写信或是打电话,让我们听到您的声音

您也可通过下列途径与我们取得联系:

地 址: 深圳.龙岗区大运软件小镇11栋3楼

电 话: 138 2888 4598 / 138 0880 9053

网 址: http://www.appvx.cn

快速提交您的需求 ↓

如何优雅地在单页应用中操作DOM?

时间:2018-10-22 浏览:3889 编辑:深正互联 来源:互联网

以前的项目是jquery独行天下,但是随着单页应用的流行,很多公司放弃了jquery的使用,主要因为项目中dom操作较少,一般都是数据改变dom,但是假如项目中难免的操作一些dom的时候,我们可以完全用js的一些写法,完全没有必要小小的操作来引进一个那么庞大的jquery。 

但是话说回来了,jquery用习惯了,$(),这种选择器已经深入人心。 虽然谷歌浏览器已经支持$$("body")的写法

$$('a') 等价于 document.querySelectorAll(“a”)

$$ 目前用的人毕竟很少,后期维护等也不是很方便。

document.querySelectorAll自定义缩写

为啥我们不把 document.querySelectorAll,直接定义为$ 呢?

这样就可以像写jquey一样选择dom了?

网站

因此我们如下写:

var $ = document.querySelectorAll;

$("body")

但是报错了!


VM343:2 Uncaught TypeError: Illegal invocation

    at <anonymous>:2:1

想了一下,原因如下:

querySelectorAll 所需的执行上下文必需是 document,而我们赋值到 $ 调用后上下文变成了全局 window。


因此,我们手动绑定一下:

var $ = document.querySelectorAll.bind(document);

这次对了

var $ = document.querySelectorAll.bind(document);

$("body")

NodeList [body.pace-done]

但是有个问题,$("body")方法返回的要么是单个 Node 节点,要么是 NodeList 而 NodeLis 是类数组的对象,但并不是真正的数组,所以拿到之后不能直接使用 map,forEach 等方法。


因此:

Array.prototype.map.call($('button'),function(element,index){

    element.onclick = function(){

    }

})

或者


[].slice.call($('button')


Array.from($('button')

类数组转为数组的方式转换一下!

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
GO 欣赏案例
查看经典案例
在线咨询
电话咨询
0755-36630177
返回顶部
在线咨询 获取报价 电话咨询
获取报价
您的称呼:

*

您的电话:

*

您的邮箱:

*

提交 重置
重要的事情,电话里聊

接通客服

不方便的时候线上咨询,在线等哦