如何提取所有属性的值？

Question

创建一个html元素

var div = document.createElement('DIV');
div.innerHTML = '<img src="images/test0.jpg" class="first" class="img0" alt="">';
ele = div.firstChild;

现在对这个元素解析，获取class的值

console.log(ele.getAttribute("class"));

输出 first ，不能得到第二个img0?
为了使用classList,发现必须这样写才行

var div = document.createElement('DIV');
div.innerHTML = '<img src="images/test0.jpg" class="first  img0" alt="">';
ele = div.firstChild;

提取
ele.classList[0] ele.classList[1]
写成
div.innerHTML = '<img src="images/test0.jpg" class="first" class="img0" alt="">'
无法使用classList

Answer 1

属性具有“唯一性”，写100个也只会有一个生效，从哪学的class="first" class="img0" 这样设置属性的？

Answer 2

HTML 的属性不能分拆开来写，分拆开只有一个会生效，所以

< ... class="first" class="img0"> 是错的，应该写成 < ... class="first img0" >

这样改过之后，ele.getAttribute("class") 就可以得到 "first img0"，使用 classList 也能拿到类列表：[...ele.classList]

你看，声明了多个 class 属性，取出来也只有一个

var div = document.createElement('DIV');
div.innerHTML = '<img src="images/test0.jpg" class="first" class="img0" class="xxx" alt="">';
ele = div.firstChild;
attrs = [...ele.attributes].map(it => it.name);
console.log(attrs);
// ["src", "class", "alt"]

Answer 3

classList用一下