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

前言

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

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

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

要想得到ta的人，先知道ta家，再从家长开始
在JS开发中，官方给我们提供以下的方法

其中$element和$rootElement是获取dom的方法，获取dom还有一个$refs
$root、$parent和$child是获取vm实例（ps：个人觉得不推荐实际开发使用，太危险！！）
那么接下来，我们就开始挨个刺探ta相关的情况，争取早日抱回家 o->_<-O
我们测试的界面结构是以下图

获取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
    } 
}

我们得到一下输出结果，都很正常

就这样完了？怎么可能，给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元素

$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())
    } 
}

从上的结果中可以看出 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) )
    } 
}

从上面的结果中，我们可以分析出来，$ref["xxx"]和$ref.xxx都是可行的，但是，自定义组件不能通过$refs来获取dom，但是可以通过$elemnt添加id后获取到自定义组件的dom，而且在引入的自定义组件中的attr中是没有ref的。

后续

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