[ Dom元素基本操作 ]

发表评论
156 views

一. 获取DOM

在vue3 - 方式1

<template>
    <div ref="chen_ref">我是标签</div>
</template>

<script>
    import {ref} from '...vue'
    export default{
        setup(){
            ...
            const chen_ref = ref(null)
            const get_dom = () => {
                let dom = chen_ref.value
            }
            return {
                chen_ref
            }
        }
    }
<script>
  • 方式2.
<template>
    <div @click='get_dom($event)'>获取dom元素</div>
</template>

<script>
    ...
    ...
    setup(){
        const get_dom = (e) => {
            console.log(e.target)
        }
        return {
            get_dom
        }
    }
</script>

二. 获取dom的附近元素

  • 获取父节点
e.target.parentNode
  • 获取所有子节点
e.target.childNodes
  • 获取第一个子节点
e.target.firstChild

三. dom节点里的操作

  • 获取class列表
# 判断是否包含
e.target.classList.contains('notebook_select')

# 添加
e.target.classList.add('notebook_select')

# 删除
e.target.classList.remove('notebook_select')

四. 创建dom元素

# 创建
let li_dom = document.createElement('li')
let a_dom = document,createElement('a')

# 设置当前dom下面html的内容
li_dom.innerHTML='<a>新分区</a>'

# 插入元素到dom元素的子节点
li_dom.appendChild(a_dom)

# 给当前dom 元素添加点击事件
li_dom.onclick=function() {
    consolo.log('你好')
}