dom是一種文件物件模型，同時(shí)也是用於html程式設(shè)計(jì)的接口，透過(guò)dom來(lái)操作頁(yè)面中的元素。 DOM是HTML文件的記憶體中物件表示，它提供了使用JavaScript與網(wǎng)頁(yè)互動(dòng)的方式。 DOM是節(jié)點(diǎn)的層次結(jié)構(gòu)（或樹(shù)），其中document節(jié)點(diǎn)為根。

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

什麼是dom

dom是一種文檔物件模型，同時(shí)也是用於html程式設(shè)計(jì)的接口，透過(guò)dom來(lái)操作頁(yè)面中的元素。當(dāng)html頁(yè)面被實(shí)作載入的時(shí)候，瀏覽器會(huì)創(chuàng)建一個(gè)dom，給了文件一個(gè)新的邏輯結(jié)構(gòu)，並且可以改變內(nèi)容和結(jié)構(gòu)。

DOM稱(chēng)為檔案物件模型（DocumentObjectModel，簡(jiǎn)稱(chēng)DOM），是W3C組織推薦的處理可擴(kuò)充置標(biāo)語(yǔ)言的標(biāo)準(zhǔn)程式介面

DOM是HTML文件的記憶體中物件表示，它提供了使用JavaScript與網(wǎng)頁(yè)互動(dòng)的方式。 DOM是節(jié)點(diǎn)的層次結(jié)構(gòu)（或樹(shù)），其中document節(jié)點(diǎn)為根。

實(shí)際上DOM是以物件導(dǎo)向的方式來(lái)描述的文檔模型。 DOM定義了表示和修改文件所需的物件和這些物件的行為和屬性以及這些物件之間的關(guān)係。

透過(guò)JavaScript，我們可以重構(gòu)整個(gè)HTML文件。例如新增、移除、變更或重排頁(yè)面上的項(xiàng)目。

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

什麼是虛擬DOM

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

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

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

建立虛擬DOM就是為了更好將虛擬的節(jié)點(diǎn)渲染到頁(yè)面視圖中，所以虛擬DOM物件的節(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"
    }
})

觀(guān)察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))])])}})

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

Vue取得DOM的幾種方法?

#雖然Vue實(shí)作了MVVM模型，將資料和表現(xiàn)進(jìn)行了分離，我們只需要更新資料就能使DOM同步更新，但是某些情況下，還是需要取得DOM元素進(jìn)行操作（例如引入的某個(gè)庫(kù)要求傳入一個(gè)根dom元素作為根節(jié)點(diǎn)，或?qū)懸恍┳杂喼噶睿疚闹饕榻B幾種在Vue中取得DOM元素的方法。

使用DOM API直接找元素

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

這個(gè)方法夠簡(jiǎn)單直觀(guān)，Vue元件在patch階段結(jié)束時(shí)會(huì)把 this.$el賦值為掛載的根dom元素，我們可以直接使用$el的querySelector, querySelectorAll等方法來(lái)取得相符的元素。

refs

<template>
	<div ref="bar">{{ foo }}</div>
	<MyAvatar ref="avatar" />
	...
</template>
<script>
	...
	mounted () {
		let foo = this.$refs[&#39;bar&#39;] // 一個(gè)dom元素
		let avatar = this.$refs[&#39;avatar&#39;] // 一個(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è)陣列（就算動(dòng)態(tài)生成ref，也是陣列）：

<template>
	<div v-for="item in qlist" :key="item.id" ref="qitem">
		<h3>{{ item.title  }}</h3>
		<p ref="pinitem">{{ item.desc }}</p>
		<p :ref="&#39;contact&#39;+item.id">{{ item.contact }}</p>
	</div>
	...
</template>
<script>
	...
	data () {
		return {
			qlist: [
				{ id: 10032, title: &#39;abc&#39;, desc: &#39;aadfdcc&#39;, contact: 123 },
				{ id: 11031, title: &#39;def&#39;, desc: &#39;--*--&#39;, contact: 856 },
				{ id: 20332, title: &#39;ghi&#39;, desc: &#39;?/>,<{]&#39;, contact: 900 }
			]
		}
	},
	mounted () {
		let foo = this.$refs[&#39;qitem&#39;] // 一個(gè)包含dom元素的數(shù)組
		let ps = this.$refs[&#39;pinitem&#39;] // p元素是v-for的子元素，同樣是一個(gè)數(shù)組
		let contact1 = this.$refs[&#39;contact&#39; + 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如果沒(méi)有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)於自訂指令，在一些元件庫(kù)和事件上報(bào)等場(chǎng)景下非常有用。

【相關(guān)推薦：vuejs影片教學(xué)、web前端開(kāi)發(fā)】

以上是vue dom是什麼意思啊的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！