js原生获取dom元素方法
时间: 2023-12-07 16:05:16 浏览: 35
可以使用以下方法获取 DOM 元素:
1. document.getElementById(id):根据元素的 id 属性获取元素。
2. document.getElementsByTagName(tagName):根据元素的标签名获取元素,返回一个 HTMLCollection 对象。
3. document.getElementsByClassName(className):根据元素的 class 属性获取元素,返回一个 HTMLCollection 对象。
4. document.querySelector(selector):根据 CSS 选择器获取第一个匹配的元素。
5. document.querySelectorAll(selector):根据 CSS 选择器获取所有匹配的元素,返回一个 NodeList 对象。
相关问题
vue3获取原生dom元素
在Vue 3中,可以使用`ref`来获取原生DOM元素。具体步骤如下:
1. 在`setup`函数中使用`ref`来创建一个引用:
```javascript
import {ref} from 'vue';
export default {
setup() {
const myElement = ref(null);
return { myElement };
}
}
```
2. 在模板中使用`ref`来绑定这个引用并获取原生DOM元素:
```html
<template>
<div ref="myElement">这是一个原生DOM元素</div>
</template>
```
3. 可以在组件的`methods`或`setup`函数中使用这个引用来访问原生DOM元素的属性和方法:
```javascript
import {ref} from 'vue';
export default {
setup() {
const myElement = ref(null);
const handleClick = () => {
myElement.value.innerHTML = '点击后修改了DOM元素的内容';
};
return { myElement, handleClick };
}
}
```
```html
<template>
<div ref="myElement" @click="handleClick">这是一个原生DOM元素</div>
</template>
```
在上面的例子中,我们通过`ref`来获取了一个原生DOM元素,并在`handleClick`函数中修改了它的内容。
uniapp获取dom元素的方法
在UniApp中,可以使用以下方法获取DOM元素:
1. 使用 `this.$refs`:在template模板中,给目标元素添加 `ref` 属性,然后可以使用 `this.$refs` 访问该元素。示例如下:
```html
<template>
<div ref="myDiv">Hello, UniApp!</div>
</template>
```
```javascript
export default {
mounted() {
const myDiv = this.$refs.myDiv;
console.log(myDiv); // 获取到目标元素
}
}
```
2. 使用 `uni.createSelectorQuery()`:通过创建选择器查询对象,可以使用类似于原生JavaScript的 `querySelector()` 方法来选择和操作DOM元素。示例如下:
```javascript
export default {
mounted() {
uni.createSelectorQuery().select('.my-class').boundingClientRect(data => {
console.log(data); // 获取到目标元素的信息
}).exec();
}
}
```
其中,`.my-class` 是要选中的元素的类名。
请注意,在使用上述方法之前,需要确保DOM元素已经被渲染到页面上,可以在 `mounted()` 生命周期钩子函数中进行操作。