dom是一種文檔對(duì)象模型，同時(shí)也是用于html編程的接口，通過dom來操作頁面中的元素。DOM是HTML文檔的內(nèi)存中對(duì)象表示，它提供了使用JavaScript與網(wǎng)頁交互的方式。DOM是節(jié)點(diǎn)的層次結(jié)構(gòu)（或樹），其中document節(jié)點(diǎn)作為根。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

什么是dom

dom是一種文檔對(duì)象模型，同時(shí)也是用于html編程的接口，通過dom來操作頁面中的元素。當(dāng)html頁面被實(shí)現(xiàn)加載的時(shí)候，瀏覽器會(huì)創(chuàng)建一個(gè)dom，給文檔提供了一種新的邏輯結(jié)構(gòu)，并且可以改變內(nèi)容和結(jié)構(gòu)。

DOM稱為文件對(duì)象模型（DocumentObjectModel，簡(jiǎn)稱DOM），是W3C組織推薦的處理可擴(kuò)展置標(biāo)語言的標(biāo)準(zhǔn)編程接口

DOM是HTML文檔的內(nèi)存中對(duì)象表示，它提供了使用JavaScript與網(wǎng)頁交互的方式。DOM是節(jié)點(diǎn)的層次結(jié)構(gòu)（或樹），其中document節(jié)點(diǎn)作為根。

實(shí)際上DOM是以面向?qū)ο蟮姆绞絹砻枋龅奈臋n模型。DOM定義了表示和修改文檔所需的對(duì)象和這些對(duì)象的行為和屬性以及這些對(duì)象之間的關(guān)系。

通過JavaScript，我們可以重構(gòu)整個(gè)HTML文檔。比如添加、移除、改變或重排頁面上的項(xiàng)目。

要改變頁面上的某個(gè)東西，JavaScript就需要獲得對(duì)HTML文檔中所有元素進(jìn)行訪問的入口。這個(gè)入口，連同對(duì)HTML元素進(jìn)行添加、移動(dòng)、改變或移除的方法和屬性，都是通過文檔對(duì)象模型來獲得的。

什么是虛擬DOM

虛擬 DOM （Virtual DOM ）這個(gè)概念相信大家都不陌生，從 React 到 Vue ，虛擬 DOM 為這兩個(gè)框架都帶來了跨平臺(tái)的能力（React-Native 和 Weex）

實(shí)際上它只是一層對(duì)真實(shí)DOM的抽象，以JavaScript 對(duì)象 (VNode 節(jié)點(diǎn)) 作為基礎(chǔ)的樹，用對(duì)象的屬性來描述節(jié)點(diǎn)，最終可以通過一系列操作使這棵樹映射到真實(shí)環(huán)境上

在Javascript對(duì)象中，虛擬DOM 表現(xiàn)為一個(gè) Object對(duì)象。并且最少包含標(biāo)簽名 (tag)、屬性 (attrs) 和子元素對(duì)象 (children) 三個(gè)屬性，不同框架對(duì)這三個(gè)屬性的名命可能會(huì)有差別

創(chuàng)建虛擬DOM就是為了更好將虛擬的節(jié)點(diǎn)渲染到頁面視圖中，所以虛擬DOM對(duì)象的節(jié)點(diǎn)與真實(shí)DOM的屬性一一照應(yīng)

在vue中同樣使用到了虛擬DOM技術(shù)

定義真實(shí)DOM

<div id="app">     <p class="p">節(jié)點(diǎn)內(nèi)容</p>     <h3>{{ foo }}</h3> </div>

實(shí)例化vue

const app = new Vue({     el:"#app",     data:{         foo:"foo"     } })

觀察render的render，我們能得到虛擬DOM

(function anonymous( ) { 	with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"}, 					  [_v("節(jié)點(diǎn)內(nèi)容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})

通過VNode，vue可以對(duì)這顆抽象樹進(jìn)行創(chuàng)建節(jié)點(diǎn),刪除節(jié)點(diǎn)以及修改節(jié)點(diǎn)的操作， 經(jīng)過diff算法得出一些需要修改的最小單位,再更新視圖，減少了dom操作，提高了性能。

Vue獲取DOM的幾種方法

雖然Vue實(shí)現(xiàn)了MVVM模型，將數(shù)據(jù)和表現(xiàn)進(jìn)行了分離，我們只需要更新數(shù)據(jù)就能使DOM同步更新，但是某些情況下，還是需要獲取DOM元素進(jìn)行操作（比如引入的某個(gè)庫要求傳入一個(gè)根dom元素作為根節(jié)點(diǎn)，或者寫一些自定義指令），本文主要介紹幾種在Vue中獲取DOM元素的方法。

使用DOM API直接找元素

<script> 	... 	mounted () { 		let elm = this.$el.querySelector('#id') 	} </script>

這種方法足夠簡(jiǎn)單直觀，Vue組件在patch階段結(jié)束時(shí)會(huì)把this.$el賦值為掛載的根dom元素，我們可以直接使用$el的querySelector, querySelectorAll等方法獲取匹配的元素。

refs

<template> 	<div ref="bar">{{ foo }}</div> 	<MyAvatar ref="avatar" /> 	... </template> <script> 	... 	mounted () { 		let foo = this.$refs['bar'] // 一個(gè)dom元素 		let avatar = this.$refs['avatar'] // 一個(gè)組件實(shí)例對(duì)象 	} </script>

使用組件實(shí)例的$refs即可拿到組件上ref屬性對(duì)應(yīng)的元素。
如果ref屬性加在一個(gè)組件上，那么拿到的是這個(gè)組件的實(shí)例，否則拿到的就是dom元素了。

值得注意的是包含v-for循環(huán)模板指令的情況，其循環(huán)元素和子元素上ref屬性對(duì)應(yīng)的都是一個(gè)數(shù)組（就算動(dòng)態(tài)生成ref，也是數(shù)組）：

<template> 	<div v-for="item in qlist" :key="item.id" ref="qitem"> 		<h3>{{ item.title  }}</h3> 		<p ref="pinitem">{{ item.desc }}</p> 		<p :ref="'contact'+item.id">{{ item.contact }}</p> 	</div> 	... </template> <script> 	... 	data () { 		return { 			qlist: [ 				{ id: 10032, title: 'abc', desc: 'aadfdcc', contact: 123 }, 				{ id: 11031, title: 'def', desc: '--*--', contact: 856 }, 				{ id: 20332, title: 'ghi', desc: '?/>,<{]', contact: 900 } 			] 		} 	}, 	mounted () { 		let foo = this.$refs['qitem'] // 一個(gè)包含dom元素的數(shù)組 		let ps = this.$refs['pinitem'] // p元素是v-for的子元素，同樣是一個(gè)數(shù)組 		let contact1 = this.$refs['contact' + this.qlist[0].id] // 還是個(gè)數(shù)組 	} </script>

關(guān)于這個(gè)的原因，可以從Vue關(guān)于ref處理的部分代碼得到：

function registerRef (vnode, isRemoval) {   var key = vnode.data.ref;   if (!isDef(key)) { return }    var vm = vnode.context;   // vnode如果有componentInstance表明是一個(gè)組件vnode，它的componentInstance屬性是其真實(shí)的根元素vm   // vnode如果沒有componentInstance則不是組件vnode，是實(shí)際元素vnode，直接取其根元素   var ref = vnode.componentInstance || vnode.elm;   var refs = vm.$refs;   if (isRemoval) {     ...   } else {   	// refInFor是模板編譯階段生成的，它是一個(gè)布爾值，為true表明此vnode在v-for中     if (vnode.data.refInFor) {       if (!Array.isArray(refs[key])) {         refs[key] = [ref]; // 就算元素唯一，也會(huì)被處理成數(shù)組       } else if (refs[key].indexOf(ref) < 0) {         // $flow-disable-line         refs[key].push(ref);       }     } else {       refs[key] = ref;     }   } }

使用自定義指令

Vue提供了自定義指令，官方文檔給出了如下的使用方法，其中el就是dom元素的引用

Vue.directive('focus', {   // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……   inserted: function (el) {     // 聚焦元素     el.focus()   } })  // 在模板中 <template> 	<input v-model="name" v-focus /> </template>

關(guān)于自定義指令，在一些組件庫和事件上報(bào)等場(chǎng)景下非常有用。

【