uni-app获取dom节点信息

uni-app获取dom节点信息,第1张

首先明白一点,uni-app提供的view、button、image、text通通都是组件,不是h5的标签,虽然用起来方便,但如果你想获取dom节点信息,尽管给组件绑定一个id选择器,用documentgetElementById()等这种传统的JS获取dom方式是没有任何效果。

因为他们是组件,除非你不用这些现成的组件,用回h5的标签。

所以你如果想获取uni-app提供组件的DOM元素,需要如下的方法

unicreateSelectorQuery()in(this);用于创建一个实例。

in(this)在这里是为了规范页面创建实例,避免获取不到实例报null,用上总没错

queryselect('#text')用于选择DOM节点

boundingClientRect()返回dom节点的相关信息

拿到的是一些元素本身的宽高信息、距离页面四边的距离。

使用unicreateSelectorQuery()创建dom实例,需要在这个mounted()生命周期里面进行,这个生命周期它代表组件已经创建完成,可以挂载实例,进而获取dom元素

如果不写在mounted生命周期里,你也可以写在methods方法定义里面,不过你需要这样来调用。

DOM全拼为DocumentObjectModel(文档对象模型)

是一种用于HTML和XML文档的编程接口,它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

楼层效果如上图所示:当点击左边的索引表会跳到对应的模块,同时在滚动模块的时候索引表也跟着变。

这个主要是要利用iScroll的iscroll方法,实时获取滚动的y轴数据,同时获取每个索引对应模块的offsetTop的值,保存到一个数组中,这里我是把这个方法放到watch里面的,监视数据是否有变化,同时这里因为我们要获取dom元素,所以要用$nextTick方法等待dom渲染好再获取每个索引对应模块的高度。

点击索引表,实现滚动到相应的模块就非常简单了。根据当前点击索引的索引,找到thisindexTopOffset里面的scrollTop值,然后利用iscroll里面的scrollTo方法滚动就可以了。

你好!

1、getElementsByTagName就是获得所有a元素的方法。

2、你可以通过父节点获得childNodes(n),如果要获得节点下的所有a元素。可以遍历childNodes所得数组,然后判断targetName属性的值。

如果对你有帮助,望采纳。

以上就是关于uni-app获取dom节点信息全部的内容,包括:uni-app获取dom节点信息、dom是什么属性、vue中楼层滚动实现原理解析等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9776940.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存