获取或操作DOM元素特性的几种方式
2024-10-19 03:39:25
1. 通过元素的属性
可以直接通过元素属性获取或操作特性,但是只有公认的特性(非自定义的特性),例如id
、title
、style
、align
、className
等,注意,因为在ECMAScript中,class
是保留字(在ES6中成了关键字),所以就不能再用class
这个属性名来表示元素的CSS类名了,只能换成className。
2. 通过getAttribute()、setAttribute()、removeAttribute()
也可以通过这三个DOM方法来操作DOM元素的特性,例如
let div = document.getElementById("my-div");
div.getAttribute("id"); // 获取id
div.getAttribute("title"); // 获取title
div.getAttribute("class"); // 获取元素的CSS类名,因为是传参数给getAttrbute函数,所以可以用class
div.getAttribute("dat-my-attribute"); // 获取自定义特性
div.setAttribute("id","anotherId"); // 设置id
div.removeAttribute("title"); // 删除title
从上面可以看出来,用这种方法,不仅可以获取到公认的特性,也可以获取自定义的特性。不过有两类特殊的特性,在通过属性获取和通过方法获取时获取到的却不一样,一类是style
,通过属性访问获取到的是一个对象,通过getAttribute
获取到的是CSS文本;另一类就是事件处理程序如onclick
,通过属性获取,得到的是一个函数,而通过getAttribute
获取得到的则是相应函数代码的字符串。
3. 通过元素的 attribute 属性
Element类型的DOM元素都有一个attributes
属性,如div.attributes
,这样获取到的是一个NamedNodeMap,是一个动态的集合,和数组类似,也有length
属性、可以通过下标访问遍历等,通常用途就是遍历元素特性,里面存放的是多个Att节点,每个节点的nodeName
就是特性名称,nodeValue
就是特性的值。它有一些方法,如下:
getNamedItem(name)
:返回nodeName
为name的节点setNamedItem(node)
:向集合中插入一个Attr节点removeNamedItem(name)
:删除集合中nodeName
为name的节点item(pos)
:返回位于数字pos位置的节点 例如要获取id,有如下代码
例如要获取id,有如下代码
let div = document.getElementById("my-div");
div.attributes.getNamedItem("id").nodeValue;
div.attributes["id"].nodeValue; //后两行代码都可以获取到id,下面为简写形式
从上面可以看出,这种方式最麻烦,所以平时基本不用,一般在遍历元素的特性时才会用到。
上面三种方式中,方式1是最常使用的,其次是2,最后才是第三种方式。
最新文章
- haha2
- silverlight 4.0 的oob模式下,调用com通过wmi重启自身进程 killself
- HDU 5038 Grade北京赛区网赛1005
- Linux IO实时监控iostat命令详解
- js:数据结构笔记5--链表
- Ruby用法总结
- 机房管理系统——vb与excel链接2
- BZOJ 1006: [HNOI2008]神奇的国度( MCS )
- python实现邮件发送完整代码(带附件发送方式)
- html 上传文件
- oracle中number类型最简单明了解释
- cocos2dx - 创建地图及玩家(伪)
- 《java.util.concurrent 包源码阅读》27 Phaser 第一部分
- linux svn up 中文显示乱码解决办法
- Linux下使用两个线程协作完成一个任务的简易实现
- Spring MVC扩展
- mybatis二级缓存详解
- Linux内核的整体架构简介
- python中lambda表达式中自由变量的坑,因为for循环结束了 变量还保存着,详见关于for循环的随笔
- WebSocket 客户端实例
热门文章
- view 的用法
- python 3.6练习题(仿购物车)
- docker官方文档笔记
- Android学习之APP点击功能闪退问题的处理一
- C语言程序设计II—第九周教学
- three.js - 动画 图形统计帧频 dat.GUI
- harbor Configuring Harbor with HTTPS Access
- Luogu4137 Rmq problem/mex 主席树
- 解决 HttpWebResponse.GetResponse()一直提示超时
- 用 Python 分析咪蒙1013篇文章,她凭什么会火?