获取或操作DOM元素特性的几种方式

1. 通过元素的属性

可以直接通过元素属性获取或操作特性,但是只有公认的特性(非自定义的特性),例如idtitlestylealignclassName等,注意,因为在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,最后才是第三种方式。

原文地址:https://www.cnblogs.com/su-feng/p/10038463.html