JavaScript获取<a>标签class及自定义属性值无效问题求解

你无法读取对应属性值核心是两个写法错误：

• 只有HTML标准属性会直接映射为DOM元素对象的属性，支持元素.属性名的读取方式，你用到的codigo、nombre、padre都属于自定义属性，这种写法自然拿不到值
• class是JavaScript保留字，不能通过x[i].class直接读取，要么用标准映射属性className，要么和自定义属性用统一方法读取

不管是标准属性还是自定义属性，都可以通过原生DOM提供的getAttribute('属性名')方法读取，无兼容问题，是最通用的属性读取方案。

var linkList = document.querySelectorAll("a");
var resultArray = [];
for (var i = 0; i < linkList.length; i++) {
  var currentLink = linkList[i];
  // 读取并清理文本内容
  var cleanText = currentLink.textContent.replace(/\s+/g, ' ').trim();
  // 读取所有需要的属性
  var idVal = currentLink.id;
  var classVal = currentLink.getAttribute('class');
  var codigoVal = currentLink.getAttribute('codigo');
  var nombreVal = currentLink.getAttribute('nombre');
  var padreVal = currentLink.getAttribute('padre');
  // 按顺序存入结果数组
  resultArray.push([idVal, cleanText, classVal, codigoVal, nombreVal, padreVal]);
}

function make_table() {
  // 表头同步新增对应字段列
  var table = '<table border="1" cellpadding="4" cellspacing="0"><thead><tr><th>idno</th><th>nametext</th><th>class</th><th>codigo</th><th>nombre</th><th>padre</th></tr></thead><tbody>';
  for (var i = 0; i < resultArray.length; i++) {
    table += '<tr><td>'+ resultArray[i][0] + '</td><td>'+resultArray[i][1]+'</td><td>'+resultArray[i][2]+'</td><td>'+resultArray[i][3]+'</td><td>'+resultArray[i][4]+'</td><td>'+resultArray[i][5]+'</td></tr>';
  }
  table += '</tbody></table>';
  var w = window.open("");
  w.document.write(table); 
}
make_table()

• 你原代码里写的var allcontent = x[i].elements是无效代码，DOM元素不存在elements属性，直接删除即可
• 如果后续需要读取data-开头的自定义属性，除了getAttribute方法外，还可以通过元素.dataset.驼峰格式属性名读取，比如data-placement对应currentLink.dataset.placement
• 代码里给表格加的边框、内边距属性只是为了方便查看内容，不需要可以直接删掉

内容的提问来源于stack exchange，提问作者Zygmunt