Taro小程序获取DOM元素 - Kaiqisan

拖更一个月，抱歉！（露出肚皮）
主要是过年+考研复习，最近没时间写博客
就分享下最近写的项目遇到的问题

观前提示：本篇文章所有内容基于Taro+React+typescript，我会尽量敲一遍ts代码再敲一遍js代码（快夸我贴心！快o(´^｀)o）,并且打包在小程序端，不讨论h5端的所有情况！！

最近碰到一个问题，是关于获取使用Taro来获取小程序中某元素的DOM节点的内容的，我尝试使用js原生的方法来获取

document.getElementsByClassName('demoDOM')

虽然获取的内容很全面

但是，这个方法还是原来的老毛病，太麻烦！而且无法获取其css样式

于是查了下官网，有了以下的新方案

官网链接

	let query = Taro.createSelectorQuery();
    query.select('.demoDOM').boundingClientRect((res) => {
    	console.log(res);
	}).exec()

如果写在生命周期函数中的话(vue和react的都要！)，需要添加一个200ms的延时定时器,否则会收获一个寂寞！

setTimeout(() => {
	let query = Taro.createSelectorQuery();
	query.select('.demoDOM').boundingClientRect((res) => {
		console.log(res);
	}).exec()
}, 200)

我获取的结果

有人肯定会问，哎这是什么玩玩，获取的就这么点东西，怎么能说是更好的解决方案呢？

且慢

仔细看里面的内容，这些都是无法使用上面的方法获取到的，在style属性中根本找不到！

而且，这些都是获取到的最基本的信息，我们可以也可以根据自己的需求返回我们想要的信息！

let query = Taro.createSelectorQuery();
query.select('.demoDOM').fields({
    computedStyle: ['margin', 'backgroundColor']
}, (res) => {
    console.log(res);
}).exec()

最后我们就会获得这个元素的外边距和背景颜色，这些都是实打实的样式，就算您把样式和类名或者id绑定，它都可以获取得到。
这里，如果您使用ts书写的话，如果您的属性不符合其要求或者属性名书写不规范的话，都会警告，记得盯紧这些细微的信息！

好了贴完代码了，如果您只是来cv搬砖的，今天的CSDN就看到这里吧！(bushi)接下来我们说下关键代码！

Taro.createSelectorQuery() : 返回一个 SelectorQuery 对象实例,也代表从这里开始寻找节点，建议使用参数来接收一下！

let ele = Taro.createSelectorQuery()

boundingClientRect((result) => void): 里面需要传入一个函数，返回所获取的所有结果，是个回调函数

Taro.createSelectorQuery().select('.demoDOM').boundingClientRect((res) => {
    console.log(res, 'ddd');
})

exec(): 此处开始执行寻找DOM

Taro.createSelectorQuery().select('.demoDOM').boundingClientRect((res) => {
    console.log(res, 'ddd');
}).exec()

fields(fields): 传入对象，里面填写所有想要搜寻的内容

let query = Taro.createSelectorQuery();
query.select('.demoDOM').fields({
    dataset: true,
    computedStyle: ['margin', 'backgroundColor', 'left', 'top', 'borderRadius'],
    properties: ['scrollX', 'scrollY'],
    scrollOffset: true,
    size: true,
    context: true 
}, (res) => {
    console.log(res);
}).exec()

所有合法参数见官网 官网–友情链接–直接打开，不要带犹豫，很快的！

如果您正在使用TS的话而且您的英语水平还算不错的话，建议跟着代码提示的脚步走

其他方法

context( (res) => void): 添加节点的 Context 对象查询请求。目前支持 VideoContext、CanvasContext、LivePlayerContext、EditorContext和 MapContext 的获取。以便执行这些特殊标签的特殊动作！

以一个视频标签为例

Taro.createSelectorQuery().select('.videoDemo').context(function (res) {
  console.log(res.context)
}).exec()

node( (res) => void): 获取当前元素的实例（只有canvas标签支持）

Taro.createSelectorQuery().select('.canvas').node(function(res){
  console.log(res.node)
}).exec()

selectAll(string) : 搜寻所有符合条件的节点，返回一个数组

Taro.createSelectorQuery().selectAll('.demoDOM').boundingClientRect((res) => {
    console.log(res, 'ddd');
}).exec()

selectViewport(string) 获取某个节点的滚动信息（前提是这个节点有滚轮（是ViewScroll组件））

这里不举例了，同上！

总结

英文名很长，记得熟记！切记不要使用原生的方法获取DOM，这样会很消耗性能！这里诚心推荐使用TS，代码提示超级顺畅！