精华内容
下载资源
问答
  • 获取dom元素
    千次阅读
    2022-03-28 11:35:35

    1、querySelector()

    注意:querySelector()方法括号中的值是元素的选择器,此方法直接返回DOM对象本身。

    document.querySelector('选择器')

    2、querySelectorAll()

    注意:querySelector()和querySelectorAll()方法括号中的取值都是选择器,但两个方法是有区别的。当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class的元素,而querySelectorAll()获取到了所有class相等的元素集合。

    document.querySelectorAll('选择器')

    3、getElementById() 返回匹配指定选择器的第一个元素(获取不到为 null)

    注意:getElementById()括号中的不需要在前面加“#”,因为方法就决定了括号中的值是一个元素的id值。该方法返回一个DOM对象。

    document.querySelectorAll('id名')

    4、getElementsByClassName 返回匹配指定选择器的第一个元素(获取不到为null)

    注意:getElementsByClassName()括号中的不需要在前面加 “.” ,因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件,需要获取到集合中的某一个元素,然后再为元素绑定事件。

    document.getElementsByClassName('类名')

    5、getElementsByName

    注意:只有含有name属性的元素(表单元素)才能通过name属性获取

    document.getElementsByClassName('name名称')

    6.getElementsByTagName 

    注意:getElementsByTagName()返回的是一个集合

    document.getElementsByTagName('标签名')

    总结:
    1、所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返               回的DOM对象本身,可直接为其绑定事件。
    2、getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体        的DOM元素,需要加索引,如:document.getElementsByClassName(“div”)[0] =>获取class为   box的所有元素中的第一个DOM元素。
    3、querySelector()与querySelectorAll()两者的联系与区别:
          联系: 两者括号中的取值都是选择器
          区别: 当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class的元           素,而querySelectorAll()获取到了所有class相等的元素集合。

    更多相关内容
  • 下面小编就为大家带来一篇vue获取DOM元素并设置属性的两种实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本篇文章主要介绍了在vue中获取dom元素内容的方法,可以通过给标签加ref属性,这里整理了详细的代码,有兴趣的可以了解一下
  • 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕; 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后...
  • 本篇文章主要介绍了详解在Vue中通过自定义指令获取dom元素 ,具有一定的参考价值,有兴趣的可以了解一下。
  • 一、获取dom元素节点 为元素添加一个ref属性 该属性的值可任取 以作为该节点的引用名 ref即为reference(引用)的前三个字母 This is title This is content 用Vue实例中的自带的$refs属性获取元素 用预先定义好的...
  • 主要介绍了JavaScript获取DOM元素的11种方法总结,本文用分4大类11个方法总结如何获取DOM元素,需要的朋友可以参考下
  • 本篇文章主要介绍了Vue获取DOM元素样式和样式更改示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue3之获取DOM元素

    千次阅读 2022-06-07 13:56:59
    简介 我们一般用ref函数来获取DOM元素 使用步骤 使用ref函数创建容器 在需要获取的dom元素上写ref dom元素保存在容器的value属性上 代码 <script setup> import {ref,onMounted} from "vue" const inputRef = ref() ...

    简介

    • 我们一般用ref函数来获取DOM元素

    使用步骤

    1. 使用ref函数创建容器
    2. 在需要获取的dom元素上写ref
    3. dom元素保存在容器的value属性上

    代码

    <script setup>
    import {ref,onMounted} from "vue"
    
    const inputRef = ref()
    onMounted(() => {
        console.log(inputRef);
        inputRef.value && inputRef.value.focus() // 聚焦
    })
    </script>
    
    <template>
    <input ref="inputRef">
    </template>
    

    ref返回的对象
    在这里插入图片描述

    展开全文
  • JavaScript【DOM-获取DOM元素、修改属性】

    DOM-获取DOM元素、修改属性
    目标: 能获取DOM元素并修改元素属性,具备利用定时器制作焦点图切换的能力
    webApi的基本认知
    作用: 就是使用JS去操作html和浏览器
    分类
    DOM
    操作html和css
    BOM
    操作浏览器
    DOM 树
    HTML DOM 定义了访问和操作 HTML 文档的标准方法
    DOM 以树结构表达 HTML 文档

    DOM对象(重要)
    浏览器根据html标签生成的JS对象
    所有的标签属性都可以在这个对象上面找到
    修改这个对象的属性会自动映射到标签身上
    操作dom对象本质上就是在操作页面元素
    获取DOM对象的方式
    document.querySelector
    获取的是满足条件的第一个 一定只有一个
    获取的是dom元素,可以直接操作
    如果没有获取到,就返回null
    Cannot read properties of null (reading ‘style’):不能使用null读取属性style
    document.querySelectorAll
    获取的是满足条件的所有DOM对象 返回的是一个集合-NodeList–伪数组
    获取的是伪数组,无法直接操作,必须通过下标才能操作,所以我们对伪数组进行遍历
    for
    forEach

    就算没有获取到元素也返回一个伪数组–对象
    其他了解的
    document.getElementById()
    document.getElementsByTagName()
    document.getElementsByClassName()
    设置/修改元素内容
    DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象.
    就是操作对象使用的点语法
    为标签设置标签之间的内容
    针对于双标签而言
    innerText
    只关注内容, 不关注标签

    innerHTML
    可以解析标签

    如果要解析标签内容,就使用innerHTML
    动态渲染
    富文本框
    使用: 不明确数据的安全性的情况下, 使用innerText
    设置/修改元素属性
    设置/修改常用(内置)属性
    href、title、src
    综合案例
    图片更换案例
    案例: 随机点名案例-名字渲染到页面已经有的标签里面
    设置/修改元素样式属性
    style操作css
    每一个DOM对象都有一个style属性,style属性的值是一个对象,里面存储了所有行内样式对应的键值对。
    如果样式的名字带了-,比如background-color,到了style对象中,变成了驼峰命名法,backgroundColor(因为-在js中-会被解析成减号
    style属性只能获取和设置行内样式,在类样式中定义的样式通过style获取不到。
    案例: 随机背景案例
    操作类名(className)
    由于class是关键字, 所以使用className去代替
    className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
    classList
    添加:add(class1, class2, …)
    删除:remove(class1, class2, …)
    切换:toggle(class)
    是否包含:contains(class),包含返回true,不包含返回false
    对比className和style、classList的区别
    修改大量样式的更方便
    修改不多样式的时候方便
    classList 是追加和删除不影响以前类名

    设置/修改表单属性
    正常的有属性有取值的 跟其他的标签属性没有任何区别
    获取: DOM对象.属性名
    设置: DOM对象.属性名 = 新值
    表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性
    常见表单属性
    value、disabled、checked、selected

    全选案例
    定时器-间歇函数
    间隔一段时间之后重新执行对应的代码
    let timerId = setInterval(回调函数, 间隔时间)
    清除定时器
    clearInterval(timerId)
    注意点
    定时器也是需要等待, 所以后面的代码先执行
    每一次调用定时器,都会产生一个新的定时器

    展开全文
  • js获取dom元素宽高

    千次阅读 2022-04-21 13:12:45
    1.对于css盒子模型,我们使用width和height等来定义dom元素的宽高,而有时我们需要在js中获取元素的宽高进行一些操作。 2.dom操作提供了相应的属性来实现这一点 二,clientWidth和clientHeight 1.clientWidth和...

    一,前言

    1.对于css盒子模型,我们使用widthheight等来定义dom元素的宽高,而有时我们需要js中获取元素的宽高进行一些操作

    2.dom操作提供了相应的属性来实现这一点

    二,clientWidthclientHeight

    1.clientWidthclientHeight用于获取元素的视口宽高,不包含bordermargin,还要滚动条。
    在这里插入图片描述

    三,offsetWidthoffsetHeight

    1.元素的实际宽高,包含滚动条和border,不包含margin
    在这里插入图片描述

    四,scrollHeightscrollWidth

    1.当一个元素出现滚动时,这个元素的clientWidthclientHeight表示了元素的视口宽高,而scrollHeightscrollWidth用于表示该元素的滚动的实际宽高。

    2,如图红色元素的scrollHeight的值是黑色线段的长度。

    3.也可以看出此时蓝色元素的offsetHeight = 红色元素的scrollHeight
    在这里插入图片描述

    五,scrollTop

    1.出现滚动条的元素,滚动距离上边界的距离。

    2.如下图,红色的元素的scrollTop 等于绿色线段的长度。

    3.scrollTop是可以修改的,修改时蓝色元素移动到相应位置
    在这里插入图片描述

    展开全文
  • 主要介绍了vue获取dom元素注意事项及vue获取dom元素的内容,需要的朋友可以参考下
  • 在react中获取dom元素

    千次阅读 2021-09-22 23:23:39
    1、ref获取dom元素 <div ref={el => this.nodeEle = el}> ====> this.nodeEle即为获取到的元素 2、根据id获取dom元素 document.getElementById(“idName”) 3、通过类名获取dom元素 document....
  • js中获取dom元素高度

    千次阅读 2021-05-18 11:31:22
    javascript中获取dom元素高度和宽度的方法如下: 网页可视区域宽: document.body.clientWidth 网页可视区域高: document.body.clientHeight网页可视区域宽: document.body.offsetWidth (包括边线的宽)网页可视...
  • uni-app获取DOM元素

    千次阅读 2021-11-24 13:48:43
    uni-app获取DOM元素 uni.createSelectorQuery().select('#reasonSelf') uni.createSelectorQuery().select('.class类名') 如果有许多相同类名的 let doms=uni.createSelectorQuery().selectAll(‘.class1’) ...
  • vue3中获取dom元素和操作

    万次阅读 2022-02-09 14:32:20
    直接举例子来说明吧,我想要做的是,遍历这几个菜单,获取他们的dom元素的宽度。当文字dom元素宽度太长的话,需要滚动显示文本。 二,实现思路 对应的html: <div class="icon-box" ref="menu_item"> <div...
  • vue获取dom元素高度的方法

    千次阅读 2021-09-03 16:17:41
    要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mounted() { let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度...
  • 简记vue点击获取dom元素
  • vue3之vue3.2获取dom元素的宽高

    千次阅读 2022-07-01 10:54:10
    vue3.2获取dom元素的宽高
  • JS中获取DOM元素的方法 JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法...
  • vue获取dom元素内容

    千次阅读 2020-12-19 16:54:35
    通过ref来获取dom元素在vue官网上对ref的解释ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向...
  • 本篇文章,小编为大家介绍关于用JavaScript获取DOM元素位置和尺寸大小的方法,有需要的朋友可以参考一下
  • 获取Dom元素的几种方式的详细解读

    千次阅读 2022-01-21 19:57:29
    JS获取DOM元素的8种方法 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法(document.documentElement) ...
  • angular获取DOM元素的三种方式

    千次阅读 2021-06-26 12:12:51
    获取DOM元素 通过模板变量名获取单个DOM元素 @ViewChild 通过模板变量名获取DOM元素 ViewChild是属性装饰器,用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在...
  • 使用angular.element和$event获取dom <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 262,164
精华内容 104,865
关键字:

获取dom元素