原生JS获取操作元素

操作元素自定义属性

h5方法
设置语法<p data-自定义属性名 = ‘自定义属性值‘></p>
属性名想叫什么就叫什么,可以用多个 -连接 <p data-名称-名称 = ‘自定义属性值‘></p> 获取语法**:element.dataset.自定义属性名如果属性名用多个-连接 ,获取时应将属性名以-为分割符,驼峰方式获取 无兼容性方法 设置语法**:属性名想叫什么就叫什么,可以用多个 -连接
操作元素所有(标准、自定义)属性
获取元素属性
语法element.getAttribute(‘属性名‘)
参数
类型:字符串
值:属性名
返回
类型:字符串
值:某个元素的某个属性值
设置元素属性
语法element.setAttribute(‘属性名‘,‘属性值‘)
参数
类型:字符串
值:属性名 属性值
删除元素某个属性
语法element.removeAttribute(‘属性名‘)
参数
类型:字符串
值:属性名
获取元素(CSS选择器方式)
获取符合CSS选择器的第一个元素
语法element.querySelector(‘css选择器‘)
参数
类型:字符串
值: CSS选择器
返回
类型:对象
值:得到element元素中,符合CSS选择器要求的第一个元素
获取符合CSS选择器的所有元素
语法element.querySelectorAll(‘css选择器‘)
参数
类型:字符串
值:css选择器
返回
类型:伪数组
值:得到element元素中,符合CSS选择器要求的所有元素
事件高级
注册事件两种方式
DOM0级事件(on)
语法element.on+事件类型 = 函数名/匿名函数
特点:同一个元素只能注册一次某个类型的事件,多次注册,只有最后一次添加的事件有效
DOM2级事件** (addEventListener)
语法element.addEventListener(‘事件类型‘,函数名/匿名函数)
参数
第一个:字符串 事件类型 不加on
第二个:匿名函数/函数名(事件执行程序)
特点:同一个元素能注册多个某种类型的事件,多次注册,事件触发时,会按照注册的先后顺序依次执行
解除事件的两种方式
DOM0级事件解除方式(on)
语法element.on+事件类型 = null
DOM2级事件解除方式(removeListener)
语法element.removeListener(‘事件类型‘,函数名)
注意想要解除某个事件,前提是这个事件注册时添加的事件处理函数是命名函数

原文地址:https://www.cnblogs.com/itxcr/p/11600146.html

时间: 2024-10-07 10:33:26

原生JS获取操作元素的相关文章

原生js获取Html元素的实际宽度高度

第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度. 小结,因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性.注意如果不是写在行内styl

原生js获取子元素、给元素增加div

//鼠标移入移出动画 window.onload = function () { var el = document.createElement('div'); el.className = "bg"; var obj_lis = document.getElementById("list").getElementsByTagName("a"); for (i = 0; i < obj_lis.length; i++) { obj_lis[

JS获取DOM元素的八种方法

什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准.我们用JavaScript对网页进行的所有操作都是通过DOM进行的. 这篇文章不做深入研究,只把各种用法和坑做一个总结. JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getE

原生js获取元素的class属性(获取class的所有元素)以及改变或添加calssName

今天在工作中,用到了设置className,因此查阅了一下资料,总结一下. 一.如何用原生js获取class属性 1 <div class = "dom'> 2 </div> 元素JS实现方法: 1 function $class(domclass) 2 { 3 var odiv = document.getElementsByTagName("*"); 4 var aResult = []; //定义一个空数组,用来存放与目标className相同的

原生JS获取元素宽高实践详解

开篇的话 任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排查出是获取元素高度那里出了问题,这个问题记忆在书上或视频中看到过,许久没用,用的时候就想当然了.遂决定深入剖析用法,增加记忆,记录发表出来,也能给各位前端同行.求学者增加印象. 出错之处 秉承结构.样式.行为分离的宗旨,每次不管大小案例都是分开写html.css.js.这也算抛砖引出了我犯错的玉. 原css

隐藏元素的宽高无法通过原生js获取的问题

1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页面的宽高计算它的绝对定位的left和top 2.用js获取该元素的宽高,结果都是0,该元素的css代码如下,因为display:none隐藏元素不占位置,所以宽高都为0,而用jQuery$("#loadImg").height()能获取到,通过网上查资料,是说jquery的这种获取方式是通

原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

原生javascript获取dom元素简单介绍

原生javascript获取dom元素简单介绍: 使用jQuery可以各种方式获取元素,比如id选择器,类选择器,元素选择器等等,非常的方便. 下面就介绍一下如何利用原生的js实现获取dom元素的功能. 一.通过id获取元素: 最方便的那就是使用document.getElementById()函数. 具体可以参阅document.getElementById()一章节. 二.通过标签获取元素: 使用document.getElementsByTagName()函数. 具体可以参阅documen

原生js获取css中class的方法

function getByClass( className, context) { var context = context || document; if( context.getElementsByClassName) { return context.getElementsByClassName(className); } var nodes = context.getElementsByTagName("*"); ret=[]; for( var i=0; i<nod