本文正在參加星光計劃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一起寫的話，可能沒多少人看，畢竟寫完後，文章應該很長，看到都懶得看了，下一篇，順便用這方法解決一下，遇到的一個冒泡阻塞失效的問題