vue3 如何通过 ref 获取 DOM 节点

在 vue2 中，我们通过 ref 为节点添加一个名称，然后用 this$refs['节点名称'] 就可以获取到DOM节点，

例：

在 vue3 中，我们一样可以通过为节点添加一个 ref 名称 ，但是接下来的步骤和 vue2 有些区别

1为节点添加一个 ref 名称

2创建 ref 响应式常量并且与 DOM 节点名称一致 ，且值为 null

3在 mounted 之后通过 常量的 value 即可获取到 DOM 节点

例：

OK，今天就写这么多~！

Vue 26版本以后

子组件dom节点 通过this$refscontentchildren[0] 获取

Vue 26版本以前：

子组件dom节点 通过this$slotscontent[0]elm

注意：通过ref直接拿slot的节点 永远为undefined

    1nodenodeName：查看节点名称（元素节点返回标签名（大写），文本节点返回 #text）

    2nodenodeType：查看节点类型（元素节点返回1，属性节点返回2，文本节点返回3）

    3nodenodeValue：查看节点的值（元素节点返回null，文本节点返回文本值）

    DOM对象集合了HTML标签中能被解析的属性（标准属性）作为DOM对象的属性

    查询到的input节点包含了type、name、value等属性，其他未设置值的属性也包含在节点对象中

    1nodeoffsetLeft：元素在页面中的水平坐标值

    2nodeoffsetTop：元素在页面中的垂直坐标值

    3nodeclientWidth：元素在页面视口区域占据的宽度(不含边框)

    4nodeclientHeight：元素在页面视口区域占据的高度(不含边框)

    5nodeoffsetWidth：元素在页面区域占据的宽度(含边框)

    6offsetHeight：元素在页面区域占据的高度(含边框)

    7scrollLeft：窗口或者容器内容水平滚动的距离

    8scrollTop：窗口或者容器内容垂直滚动的距离

融在第三点最后了

    1方法名innerHTML（包含了此方法对应的对象内所有空白文本以及标签在内的所有内容）

    2方法名innerText（包含了此方法对应的对象内文本内容且空白文本除外）

    1nodegetAttribute()：读取节点的属性值

    2nodesetAttribute（）：设置节点属性值

    3noderemoveAttribute（）：删除节点的属性

    4nodehasAttribute（）：检测节点是否存在某属性

    1方法名querySelector（选择器）：按CSS样式查询，返回第一个节点

    2nodequerySelectorAll(选择器)：按CSS样式查询，返回所有节点集合

    3nodegetElementsByTagName(tname)：查询node下面所有标签名为tname的元素集合

    4nodegetElementsByClassName(cname)：查询node下面所有类名为cname的元素集合

    1往父节点插入子节点并指定所有元素的后面

        父级方法名appendChild（插入的元素）  

    2往父节点插入子节点并指定在某个子元素的前面

        父级方法名insertBefore（插入的元素，插入的元素后的一个元素名）

    注意：在dom中插入节点都是基于父节点来完成的

    1 父级方法名removeChild（子级元素）：删除父级元素中的子级节点

    1父级方法名replaceChild（new，old）：将父级元素中的old节点替换成一个新的new节点

    1浅复制：nodecloneNode()：只复制此元素不包含子元素

    2深复制：nodecloneNode(true)：复制此元素且包含子元素

    1父级元素hasChildNodes() ：检测节点是否含有子节点，包括空白节点    

    1nodeparentNode：node的父节点

    2nodechildNodes ：node所有子节点

    3nodechildren：node所有子元素 

    4nodefirstChild：node的第一个子节点

    5nodefirstElementChild：node的第一个子元素 

    6nodelastChild ：node的最后一个节点

    7nodelastElementChild：的最后一个元素

    8nodenextSibling：node的下一个兄弟节点

    9nodenextElementSibling：node的下一个兄弟元素

    10nodepreviousSibling：node的前一个兄弟节点

    11nodepreviousElementSibling：node前一个兄弟元素

十四、节点样式 *** 作

    1html标签中集合了style的标准属性因此可以使用 DOMstyle访问样式， 注意 它只能访问使用style定义的内联样式，而不能访问内部和外链样式，且访问样式需要使用驼峰替代" - "

    2当CSS样式较多时，可以使用DOMcssText来重置。

    3windowgetComputedStyle()：返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后，报告元素的所有CSS属性的值

以上就是关于vue3 如何通过 ref 获取 DOM 节点全部的内容，包括:vue3 如何通过 ref 获取 DOM 节点、Vue 中怎样获取具名 slot 的 DOM 节点、Dom对象-节点对象等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！