.vue组件中获取DOM元素问题

一、问题引入

原项目把一块内容直接写在了模块中（浏览器显示的一整个页面），现在想把它提成一个单独组件，而且把其中使用 documentgetElementById('id') 改为 ref 获取元素的形式。

单独创建一个 vue 组件，通过绑定传值，触发页面变化从而触发 beforeUpdate 。

然后发现 beforeUpdate() 中根本获取不到此元素，用原生js获取也不行。

三、解决

1、 beforeUpdate() 生命周期函数中，在获取元素语句外套用 this$nextTick(function(){}) 。（ mounted 无效，原因待查明）

官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。即DOM真正加载完成。

只有在DOM元素被渲染了之后，才能获取元素实际的宽高。

换句话说，如果元素还未插入DOM树里，就不可能走到渲染这一步，更不可能拿到元素的宽和高。

综上所述，你只能通过在DOM中插入元素，之后再获取已经渲染好的元素的宽高。

js中有四种获取dom的方法：

根据ID获取对象：documentgetElementById(ID);

根据class获取对象数组：documentgetElementsByClassName("box");

根据tag获取对象数组：documentgetElementsByTagName("p");

根据name获取对象数组：documentgetElementsByName(NAME);

用jquery选择器就多得去了，一般都用jquery，js一大串代码用jquery几个符号搞定。

根据ID获取对象：$('#ID');

根据class获取对象数组：$("box");

根据tag获取对象数组：$("p");;

根据name获取对象数组：$('input[name="nw"]');

需求是这样的，一个聊天窗口，对话框你一句我一句，然后这个对方的回答可能很长，这个时候要检测对方的回答渲染上去后，对应的那条话dom高度有没有超出指定高度，如果超出，就给他多余部分隐藏，并且那条话显示查看更多的按钮，

一开始想的是每一句对话都用各自的ref，然后useEffect每次都去检测ref上的高度，但是其实这样不对，ref如果先绑上了，ref上的属性再变动，是不会触发重新render的也就没法检测到，

看到一个大佬的博客

>

以上就是关于.vue组件中获取DOM元素问题全部的内容，包括:.vue组件中获取DOM元素问题、jquery如何获取动态创建的且还没有放入dom的元素的宽度、如何在javascript中获取dom对象等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！