vue中ref获取不到dom问题解决，关于this.$nextTick的使用

注意：本篇没有干货

ref有以下用法用法：

1、ref 加在普通的元素上，用thisrefname 获取到的是dom元素

2、ref 加在子组件上，用thisrefname 获取到的是组件实例，可以使用组件的所有方法。

3、利用 v-for 和 ref 获取一组数组或者dom 节点

效果图：

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this$nextTick(()=>{}) 中调用。

vue 问题笔记 ref获取不到指定的DOM节点问题解决

一、react中获取dom有以下提供三种方法：

2react原生函数findDOMNode获取dom

3通过ref来定位一个组件，切记ref要全局唯一（类似id）

ref Callback 属性

React支持一种非常特殊的属性，你可以附加到任何的组件上。 ref 属性可以是一个回调函数，这个回调函数会在组件被挂载后立即执行。被引用的组件会被作为参数传递，回调函数可以用立即使用这个组件，或者保存引用以后使用（或者二者皆是）。

二、转发 Refs

通过这种方式，使用 FancyButton 的组件可以获得底层 button DOM 节点的引用并在必要时访问它 - 就像他们直接使用 DOM button 一样。

以下是对上述示例中发生情况逐步的说明：

DOM： Document Object Model，文档对象模型；js提供了丰富的api来 *** 作文档内容。

DOM树： html文档中的内容是以树形结构排布，html是DOM树根，html下只有两个子标签head、body

节点： DOM将所有的分支端都成为节点。节点有很多类型，常见的节点类型有：文本节点、元素节点。

可以通过 nodeType查看节点类型 ： 1元素节点、3文本节点

特殊的元素节点：

1、html元素

2、body元素

3、head元素

节点 *** 作的api（属性和方法）

1、nodeName：只读属性，可以读取节点名称

2、nodeType：只读属性，读取节点类型

3、 hasChildNodes()：判断调用方法的节点是否存在子节点，存在返回true，不存在返回false。

主流浏览器会将换行符、制表符、空格当做文本节点处理，IE9以下会忽略它们。

4、childNodes：只读属性，获得节点的子节点集合，子节点集合是一个类数组结构，有数组特点无数组方法

5、firstChild：获得节点的第一个子节点

6、lastChild：获得节点的最后一个子节点

7、querySelector()：

参数：string类型，css选择器

作用：获得文档中第一个符合选择器条件的节点

兼容：在IE9以下不支持

8、 querySelectorAll()： // 获得的都是静态集合

参数：string类型，css选择器

作用：获得文档中所有符合选择器条件的节点集合（类数组结构）

兼容：在IE9以下不支持

注意： querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling：获取节点的前一个兄弟节点

10、nextSibling：获取节点的后一个兄弟节点

11、parentNode：获得节点的父节点（父节点一定是元素节点）

12、removeChild()：节点删除它的指定子节点

DOM *** 作元素：暂时不用的隐藏、一定不用的删除。

13、cloneNode()：克隆一个节点

参数：boolean类型，true深克隆，false浅克隆，默认浅克隆

深克隆：不仅克隆节点和节点的属性，还会克隆节点的子节点

浅克隆：只克隆节点和节点的属性，不会克隆节点的子节点

14、areplaceChild(b,c)：用b替换c

其中a是c的父节点，c是文档上已经存在的节点，b可以是节点也可以是已存在节点，被替换的节点会从文档结构中删除。

15、areplaceWith(b)：用b替换a

a已存在的节点，b可以是新节点也可以是已存在节点，被替换的节点从DOM树删除。

16、ainsertBefore(b,c)：在c前面插入b

其中，a是c的父节点，c是已经存在的节点，b是新节点

17、aappendChild(b)：在a末尾追加b

a是父节点，b是a的子节点, c是子节点

元素节点的相关api

1、getElementsByTagName()：根据标签名获得元素集合（类数组结构）

区别：HTMLCollection 是动态集合，NodeList 是静态集合。

2、createElement()：根据标签名创建新元素

3、id：读写属性，可以读取或设置元素的id值

4、className：读写属性，可以读取或设置元素的class值

5、classList：读取标签的类名集合（类数组结构）

add()：为元素新增类名，如果类名已存在不会重复添加

remove()：删除元素指定类名，如果类名不存在不会执行 *** 作

元素的属性分为两类：

一类是元素本里就拥有的属性，例如：id、class、style、src、herf、target、alt、title、type、value等等，这些属性可以在js中直接通过语法读取或设置。

再一类是我们为了解决问题给元素添加的自定义属性，这些属性在js中无法直接通过语法读取，需要通过 *** 作方法访问。

6、setAttribute(name,value)

参数：name表示要设置的属性名，value要为属性设置的值

无返回值

7、getAttribute(name)

参数：name表示要读取的属性名

返回值：返回属性的值，如果属性不存在会返回null

8、removeAttribute(name)

参数：name表示要删除的属性名

无返回值

说明：setAttribute()、getAttribute()、removeAttribute()都可以 *** 作元素的本地属性和自定义属性。

element拓展：

兼容：以下属性、方法在IE9以下不支持。

1、children：读取元素的所有元素子节点集合（类数组）

2、parentElement：读取元素的父元素节点

3、previousElementSibling：读取前一个元素兄弟节点

4、nextElementSibling：读取后一个元素兄弟节点

5、firstElementChild：读取第一个元素子节点

6、lastElementChild：读取最后一个元素子节点

7、remove(): 将调用方法的元素从DOM结构中删除

使用场景，牌匾文字上的公司名要根据字数多少自动变大变小，要先拿到文字内容

html：

<div class="head-h1" ref="company_name" >{{datascompany_name}}</div>

js：当页面刚加载完，通过接口获取{{datascompany_name}}的值，要对里面的值编辑时

this$refscompany_name  拿不到值

解决办法：

接口响应完，this$nextTick()方法里面 *** 作DOM，它才能接收到DOM更新的值

官方解释：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

this$nextTick(_=>{

        。。。。

            this$refs company_name

})

React提供的获取DOM元素的方法有两种，一是react-dom中的findDOMNode()，二是refs。

findDOMNode通常用于React组件的引用，其语法如下：

当组件被渲染到DOM中后，findDOMNode会返回该组件实例对应的DOM节点。

示例：

注：如果render()中返回null，那么findDOMNode()也返回null。findDOMNode只对已经挂载的组件有效。

refs多用于React组件内子组件的引用。使用ref获取DOM节点有两种情况：

（1）子组件为原生DOM组件：获取到的就是这个DOM节点。如下例，thisinput就获取到了当前 <input /> 节点。

通过thismyInput，我就可以对 <input /> 进行一系列 *** 作，比如让输入框聚焦：

注：refs也支持字符串格式：

通过thisrefsmyInput获取到节点。

（2）子组件为React组件，比如 <MyInput/> ：获得的就是 <MyInput/> 的实例，因此就可以调用 <MyInput/> 的实例方法。

示例：

注：调用 <Comp /> 实例方法的方式：thisrefsmyCompmethod()，但并不建议这种调用方式。

HTML 中 id与name 区别:

一个name可以同时对应多个控件，比如checkbox和radio

而id必须是全文档中唯一的

id的用途

1） id是HTML元素的Identity，主要是在客户端脚本里用。

2） label与form控件的关联，如

<label for="MyInput">My Input</label>

<input id="MyInput" type="text">

for属性指定与label关联的元素的id，不可用name替代

3）脚本中获得对象：IE支持在脚本中直接以id（而不是name）引用该id标识的对象。

例如上面的input，要在脚本中获得输入的内容，可以直接以 MyInputvalue来获得。如果用DOM的话，则用documentgetElementById("MyInput")value；

如果要用name的话，通常先得到包含控件的form，例如documentforms[0]，然后从form再引用name，注意这样得到的是经过计算后将发送给服务器的值

name的用途

1）主要是用于获取提交表单的某表单域信息， 作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、框架元素(iframe、frame、 window的名字，用于在其他frame或window指定target )和button等，这些元素都与表单(框架元素作用于form的target)提交有关，浏览器会根据name来设定发送到服务器的request， 在表单的接收页面只接收有name的元素, 所以赋ID的元素通过表单是接收不到值的。 我们可以在服务器端根据其Name通过RequestParams取得元素提交的值。在form里面，如果不指定name，就不会发送到服务器端。

2）HTML元素Input type='radio'分组，我们知道radio button控件在同一个分组类，check *** 作是mutex的，同一时间只能选中一个radio，这个分组就是根据相同的name属性来实现的。

3）建立页面中的锚点，我们知道<a href="URL">link</a>是获得一个页面超级链接，如果不用href属性，而改用name，如：<a name="PageBottom"></a>，我们就获得了一个页面锚点，如<strong><a name="1" id="1"></a>Experience (XP)</strong>，详见 示例

4）作为对象的Identity，如Applet、Object、Embed等元素。比如在Applet对象实例中，我们将使用其name来引用该对象。

5）在IMG元素和MAP元素之间关联的时候，如果要定义IMG的热点区域，需要使用其属性usemap，使usemap="#name"(被关联的MAP元素的Name)。

6）某些特定元素的属性，如attribute，meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Dave Raggett">。

当然HTML元素的name属性在页面中也可以起那么一点ID的作用，因为在DHTML对象树中，我们可以使用documentgetElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题，当我们动态创建可包含Name属性的元素时，不能简单的使用赋值elementname = ""来添加其Name，而必须在创建Element时，使用documentcreateElement('<element name = "myName"></element>')为元素添加Name属性。这是什么意思啊？看下面的例子就明白了。

< script language ="JavaScript" >

var input = documentcreateElement('INPUT');

inputid = 'myId';

inputname = 'myName';

alert(inputouterHTML);

</ script >

消息框里显示的结果是：<INPUT id=myId>

< script language ="JavaScript" >

var input = documentcreateElement(' < INPUT name = " myName " > ');

inputid = 'myId';

alert(inputouterHTML);

</ script >

消息框里显示的结果是：<INPUT id=myId name=myName>

name与id 区别

id要符合标识的要求，比如大小写敏感，最好不要包含下划线（因为不兼容CSS）。而name基本上没有什么要求，甚至可以用数字。table、tr、td、div、p、span、h1、li等元素一般用id。与表单相关的元素也可以赋ID值, 但为这些元素赋ID值的时候引用这些元素的方法就要变一下了，具体的如下：

赋name时，引用元素的方式: documentformNameinputName 或 documentframes("frameName")

赋id时，引用元素的方式: documentallinputID 或 documentallframeID

除去与表单相关的元素，只能赋id不能赋name，这些元素有body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b等等

以上就是关于vue中ref获取不到dom问题解决，关于this.$nextTick的使用全部的内容，包括:vue中ref获取不到dom问题解决，关于this.$nextTick的使用、react中获取dom以及使用ref、JS之DOM *** 作等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！