#夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(中) 原创 精华

发布于 2022-7-25 08:56
浏览
1收藏

本文正在参加星光计划3.0–夏日挑战赛

前言

在上回,我们跟dom事件触发所返回的响应对象有了一次初步的交流,也初步了解到这小伙子一些相关的信息,相信未来我们能多多交流,争取早日带回家,回顾上文链接 -> OpenHarmony基于JS对某位dom元素的刺探(上)

对于openHarmony的dom元素有没有疑惑过?

那么我们先从如何获取到ta开始

要想得到ta的人,先知道ta家,再从家长开始
在JS开发中,官方给我们提供以下的方法
 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(中)-开源基础软件社区
其中$element$rootElement是获取dom的方法,获取dom还有一个$refs
$root$parent$child是获取vm实例(ps:个人觉得不推荐实际开发使用,太危险!!
那么接下来,我们就开始挨个刺探ta相关的情况,争取早日抱回家 o->_<-O
我们测试的界面结构是以下图
 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(中)-开源基础软件社区

获取dom元素

$element 参数 id :string

通过id来获取元素,当id为空时,默认获取根组件,这个根组件是当前页面的根组件,并非整个app的根组件
那么我们在test3组件界面测试,我们给根组件一个 id =test3Root,方便接下来辨别

<div class="container" id="test3Root">
    <div id="test3" > 
        <text>测试test3</text>
    </div>
    <text class="title">
        我是test3界面组件,test2的子组件
    </text>
</div>
export default {
    {...},
    onLayoutReady(){
        console.log('onLayoutReady')
        console.log( this.$element().attr.id) //获取根组件,输出id
        console.log(this.$element('test3Root').attr.id)//获取id为'test3Root'的组件,输入id
        console.log(this.$element('test3').attr.id) //输出test3的id
    } 
}

我们得到一下输出结果,都很正常
 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(中)-开源基础软件社区
就这样完了?怎么可能,给ta安排下其他组件的id试试,看能不能获取得到,看是不是全局的

export default { //当前是在test3界面的组件
    {...},
    onLayoutReady(){
        console.log('onLayoutReady')
        console.log( this.$element().attr.id) 
        console.log(this.$element('test3Root').attr.id)
        console.log(this.$element('test3').attr.id)
	console.log(this.$element('e')) //在test2界面,我们设置了一个元素的id为e
    } 
}

结果如下图,获取id为e的dom元素为undefined,也就是说$elment获取dom元素是只能获取当前页面的dom元素
 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(中)-开源基础软件社区

$rootElemnt 无参数

$rootElemnt() 可以获取当前页面组件的根组件,和$elemnt()无参数的效果一样,
也就是说在同一个页面组件下 this.$rootElment() == this.$elment()
->_O 光说有什么用 (雷某:拿货来卖啊!)
好,来货,还是拿上面的test3组件界面,hml代码同上,

export default { //当前是在test3界面的组件
    {...},
    onLayoutReady(){
        console.log('onLayoutReady')    //test3Root 是test3界面根组件的id
        console.log(this.$rootElement() === this.$element('test3Root')) 
        console.log(this.$rootElement() === this.$element())
    } 
}

 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(中)-开源基础软件社区
从上的结果中可以看出 this.$rootElement() 等价于 this.$element()两个效果一样,一个字符长,一个字符短,知道该用谁了吧。 手动滑稽).jpg

$refs

$refs也是获取dom的一种方法,具体用法需在需要获取的dom元素的标签上添加ref = “xxx”
xxx是自己定义的值,然后再通过 this.$refs["xxx"] this.$refs.xxx 使用
下面我们在test2组件界面测试
test3是自定义组件,从外部导进来的,在test3上我们添加了一个ref="test3",同时也添加了一个id="ww"
test2组件界面,我们在一个div上添加了ref="test2"

<element src="../index/test3/test3.hml" name="test3" > </element>
<div class="container" @click="dd" id="gg"  >
    <!-- 这里 ↓ -->
    <div   ref="test2"  id="e" style="height: 222px; height:300px ; 
     background-color: aqua;"  @click="c">
        <!-- 这里 ↓ -->
        <test3 ref="test3" id="ww">
        </test3>
      <text class="title" >
            test2 我是test2,test1的子组件
        </text>
    </div>
</div>
export default { //当前是在test2
    {...},
    onLayoutReady(){
        console.log('test2界面')    
        console.log(this.$refs['test2'].attr.ref)
        console.log(this.$refs.test2.attr.ref)
        console.log(this.$refs['test3'])
        console.log( JSON.stringify(this.$element('ww').attr) )
    } 
}

 #夏日挑战赛# OpenHarmony基于JS对某位dom元素的刺探(中)-开源基础软件社区
从上面的结果中,我们可以分析出来,$ref["xxx"]$ref.xxx都是可行的,但是,自定义组件不能通过$refs来获取dom,但是可以通过$elemnt添加id后获取到自定义组件的dom,而且在引入的自定义组件中的attr中是没有ref的。

后续

嗷嗷嗷,终于到这个环节了,一开始写dom系列我以为两篇应该就能搞定,但后面随着我翻文档测试后,我低估了,而且在这期间遇到一个比较好玩的东西,就是上面我说危险的那几个方法,我发现我测试后,决定要为他们单独开一篇,如果和这个获取dom一起写的话,可能没多少人看,毕竟写完后,文章应该很长,看到都懒得看了,下一篇,顺便用这方法解决一下,遇到的一个冒泡阻塞失效的问题

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-7-25 08:56:40修改
5
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐