本文正在参加星光计划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一起写的话，可能没多少人看，毕竟写完后，文章应该很长，看到都懒得看了，下一篇，顺便用这方法解决一下，遇到的一个冒泡阻塞失效的问题