DOM is a document object model and an interface for HTML programming. Elements in the page are manipulated through DOM. The DOM is an in-memory object representation of an HTML document, and it provides a way to interact with web pages using JavaScript. The DOM is a hierarchy (or tree) of nodes with the document node as the root.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

What is dom

dom is a document object model and an interface for HTML programming. The page is operated through dom Elements. When an HTML page is loaded, the browser creates a DOM, which provides a new logical structure to the document and can change the content and structure.

DOM is called the Document Object Model (DOM for short), which is a standard programming interface recommended by the W3C organization for processing extensible markup languages.

DOM is an in-memory object representation of an HTML document. It provides a way to interact with web pages using JavaScript. The DOM is a hierarchy (or tree) of nodes with the document node as the root.

In fact, DOM is a document model described in an object-oriented way. The DOM defines the objects required to represent and modify a document, the behaviors and properties of these objects, and the relationships between these objects.

Through JavaScript, we can reconstruct the entire HTML document. Such as adding, removing, changing or rearranging items on the page.

To change something on the page, JavaScript needs to gain access to all elements in the HTML document. This entry, along with the methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model.

What is virtual DOM

I believe everyone is familiar with the concept of virtual DOM. From React to Vue, virtual DOM is Both frameworks bring cross-platform capabilities (React-Native and Weex)

In fact, it is just a layer of abstraction of the real DOM, with JavaScript objects (VNode nodes) as the base tree, using The attributes of the object are used to describe the nodes, and finally the tree can be mapped to the real environment through a series of operations

In the Javascript object, the virtual DOM is represented as an Object object. And it contains at least three attributes: tag name (tag), attributes (attrs) and child element objects (children). Different frameworks may have different names for these three attributes.

Creating a virtual DOM is just for better Render virtual nodes into the page view, so the nodes of the virtual DOM object correspond to the properties of the real DOM one by one.

Virtual DOM technology is also used in vue

Define the real DOM

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

Instantiate vue

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

Observe the render of render, we can get the virtual DOM

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

Through VNode, vue can create nodes, delete nodes and modify the abstract tree For node operations, some minimum units that need to be modified are obtained through the diff algorithm, and then the view is updated, which reduces DOM operations and improves performance.

Several methods for Vue to obtain DOM

Although Vue implements the MVVM model and separates data and performance, we only need to update The data can update the DOM synchronously, but in some cases, you still need to obtain DOM elements for operation (for example, a library introduced requires passing in a root dom element as the root node, or writing some custom instructions). This article mainly introduces Several ways to get DOM elements in Vue.

Use the DOM API to find elements directly

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

This method is simple and intuitive enough. The Vue component will This.$el is assigned the value of the mounted root dom element. We can directly use the $el's querySelector, querySelectorAll and other methods to obtain matching elements.

refs

<template>
	<div ref="bar">{{ foo }}</div>
	<MyAvatar ref="avatar" />
	...
</template>
<script>
	...
	mounted () {
		let foo = this.$refs[&#39;bar&#39;] // 一個dom元素
		let avatar = this.$refs[&#39;avatar&#39;] // 一個組件實例對象
	}
</script>

Use the $refs of the component instance to get the componentrefThe element corresponding to the attribute.
If the ref attribute is added to a component, then what you get is the instance of this component, otherwise what you get is the dom element.

It is worth noting that when the v-for loop template directive is included, the ref attribute on the loop element and sub-element corresponds to an array (even if it is dynamically generated ref, also an array):

<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;] // 一個包含dom元素的數組
		let ps = this.$refs[&#39;pinitem&#39;] // p元素是v-for的子元素，同樣是一個數組
		let contact1 = this.$refs[&#39;contact&#39; + this.qlist[0].id] // 還是個數組
	}
</script>

The reason for this can be obtained from Vue’s part of the code on ref processing:

function registerRef (vnode, isRemoval) {
  var key = vnode.data.ref;
  if (!isDef(key)) { return }

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

Use custom instructions

Vue provides custom instructions. The official documentation gives the following usage methods, where el is the reference to the dom element

Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 在模板中
<template>
	<input v-model="name" v-focus />
</template>

Regarding custom instructions, It is very useful in scenarios such as component libraries and event reporting.

[Related recommendations: vuejs video tutorial, web front-end development]

The above is the detailed content of What does vue dom mean?. For more information, please follow other related articles on the PHP Chinese website!