js 怎么通过dataset 获取dom

2024-09-02

javascript总结44: DOM对象的dataset属性方式

1 DOM设置属性的特殊方式: DOM对象的dataset属性方式获取data-xxx方式定义的属性由于我们经常需要在标签上自定义属性来存储数据或状态,但是如果用传统的方式操作起来比较繁琐,而且不熟悉html规范的人,很容易把自定义的属性和html规范的属性混淆.为了更加方便,高效的实现这个需求,我们可以使用dataset属性 2 使用DOM对象的dataset属性,操作自定义属性时要注意的三点问题: 1 在标签上定义属性时,要以data-为前缀 2 在js中获取/设置通过data-定义的属性

js点滴知识(1) -- 获取DOM对象和编码

在今天的工作中发现了一些小的问题,在网上查了一下,才知道自己的js才是冰山一角,以后要虚心向他人学习,要虚怀若谷. 发现一:js获取DOM对象与jquery的区别先前总以为,二者是一样的,最近才知道,二者是不同的: 前者使用var jsTab = document.getElementById("tab");//其中tab为所选择dom对象id的属性值. 后者var jqTab = $("#tab");//不仅需要id属性值,还需要加上#,这是jquery所规定的

原生JS通过类名(className)获取dom元素

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <h2 class="test">class="example" 的标题</h2> <script> document.querySelect

JS1 js获取dom元素方法

js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其中,domId为要选取元素的id属性值 2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素. 2.通过名称name选取元素(getElementsByName) 1)使用方法:document.getEle

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position().left: 原生写的话就是用获取节点,do while循环就可以了.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

js获取dom元素的子元素,父元素,兄弟元素小记

原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获取a的全部子节点: var c = a.parentNode; //获取a的父节点: var d = a.nextSibling; //获取a的下一个兄弟节点 var e = a.previousSibling; //获取a的上一个兄弟节点 var f = a.firstChild; //获取a的第一个子节点

关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深水坑我就不多赘述了. 2.问题引入: 当我通过Ajax从后端取到需要展示的数据,拿过来动态渲染到页面上,增加Dom元素是常有的事,这个时候就会报错说Echarts没有获取到元素id. 3.解决方案: 至于要在外面包一个延时器,当然我试了一下即使把延时时间改到0也是能够顺利加载的. 暂时就这么解决了这

JS获取DOM元素的八种方法

JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClassName) 获取html的方法(document.documentElement) 获取body的方法(document.body) 通过选择器获取一个元素(querySelector) 通过选择器获取一组元素(querySelectorAll) 1.通过ID获

js 获取DOM的style属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>计算元素样式</title>

js | javascript中获取dom元素的高度和宽度

javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.body.scrollWidth网页正文全文高: document.body.scrollH

Js怎么获取DOM及获取浏览器的宽高？

在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. DOM独立于具体的编程语言,通常通过Java

Vue自定义指令获取DOM元素

我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export default { data(){ return{ msg : 'oldMsg' } } methods : { changeMsg : function(){ this.msg = 'newMsg' } } } 当调用了changeMsg方法,msg被修改为 ' newMsg ' ,我们可以把这次修改理解为数据

vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤数据切换的动画过滤这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如下,自己体会吧: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .v-enter, .v-leav

document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸, 尤其是 document.getElementById 和 document.getElementsByClassName, 看看下面截图,用上面2种方法获取到元素并添加点击事件后,控制台会打印出什么呢? 可能有小伙伴晃眼一看,这么简单,不就是 1和2 吗,真的是这样吗?下面看看控制台的打印截图结果是只打出了1,为什么没有打印出2呢? 现在我们把2种获取DOM的方法打印出来,如下截图, console.log(

Vue获取dom和数据监听

Vue获取dom对象在js和jq中我们都能获取dom对象例如 // 获取id=1的div标签 <div id=d1>dom对象</div> // js语法 let ele = document.getElementById('d1') // jq语法 let ele = $('#d1') 那么在vue中也有实现该功能的语法,使用方法,在vue组件中,给目标标签添加上ref属性,然后在vue组件实例中调用方法去获取dom对象: <body> <div id='ap

vue的数据双向绑定和ref获取dom节点

vue是一个MVVM的框架业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template> <div id="app"> {{msg}} <br> <input type="text" v-model="msg" ref="inp"/> //ref属性,是为了在model重获

Vue系列之 => ref获取DOM元素和组件

可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA

html 跳转页面传参、点击获取DOM参数

虽然现在前端框架已经很多,尤其是几大流行框架,比如Vue,React,Angular 等,已经去DOM化,但是还是有很多公司仍在使用 HTML + CSS + JS . 这里记载一下用到的HTML传参问题. 一.页面之间传参: HTML 页面跳转可以直接通过,给 href 赋值 $(document).on('click', '.detail', function() { window.location.href = 'scorePage.html' }) ? 传参 $(document).o

React对比Vue（03 事件的对比，传递参数对比，事件对象，ref获取DOM节点，表单事件，键盘事件，约束非约束组件等)

import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) this.state={ name:'小兵' } //第二种改变this指向的方法 this.changeName2= this.changeName2.bind(this); } // 方法根render同级方法1 changeName1(){ console.log(this.state.nam

原生JS操作iframe里的dom

转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器. 相

vue 使用ref获取DOM元素和组件引用

在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type="text" value="input 的值" ref="myinput" /> <h3 id="h3" ref="myh3">这是H3 </h3> <hr> <com1

js 怎么通过dataset 获取dom

热门专题