如何从HTML<a>标签提取Class、Codigo、Nombre等属性数据？

我需要从包含账户数据的网页提取信息，目前已成功获取ID属性与文本，但无法提取Class、Codigo、Nombre属性，当前代码中Class列返回Undefined。

现有JavaScript代码

var x = document.querySelectorAll("a");

var myarray = []
function isNumeric(str) {
  if (typeof str != "string") return false 
  return !isNaN(str) && 
         !isNaN(parseFloat(str)) 
}
for (var i=0; i<x.length; i++){
var nametext = x[i].textContent;
var cleantext = nametext.replace(/\s+/g, ' ').trim();
var cleanlink = x[i].id;
    if(isNumeric(cleanlink)){
        var classid = x[i].class
        myarray.push([cleantext,classid,cleanlink]);// lots of other stuff on page so only want 
    }                                               // items with numeric id
};
function make_table() {
    var table = '<table><thead><th>Name</th><th>Class</th><th>Id</th></thead><tbody>';
   for (var i=0; i<myarray.length; i++) {
            table += '<tr><td>'+ myarray[i][0] + '</td><td>'+ myarray[i][1]   +'</td><td>'+myarray[i][2]+'</td></tr>';
    };
 
    var w = window.open("");
w.document.write(table); 
}
make_table()

网页HTML示例

<tr style="display:none;">
     <td class="text-center" style="color:#116eff;font-size:11px;">
      <span class="glyphicon glyphicon-plus" onclick="PlanCuenta.toggleGrupo(this);" style="cursor:pointer;">
      </span>
     </td>
     <td class="pad-cuenta" style="padding-left:105px;font-weight: bold;">
      <a class="cuenta-group" codigo="1.1.4.3" nombre="Anticipo a Proveedores" data-placement="right" data-popover-content="#popover_content_wrapper" data-title="Menú Opciones" data-trigger="focus" desc="1.1.4.3 Anticipo a Proveedores" href="javascript:void(0);" id="619105" padre="619102" rel="" style="color:black;">
       1.1.4.3 Anticipo a Proveedores
      </a>
     </td>
     
     <td style="text-align:right;color:black;" width="160">
      $565.62
     </td>
     
    </tr>
    
    <tr style="display:none;">
     <td class="text-center" style="color:#116eff;font-size:11px;">
      <span class="" onclick="PlanCuenta.toggleGrupo(this);" style="">
      </span>
     </td>
     <td class="pad-cuenta" style="padding-left:140px;font-style: italic;">
      <a class="cuenta" codigo="1.1.4.3.1" nombre="Narvaez Maria, Antic." data-placement="right" data-popover-content="#popover_content_wrapper" data-title="Menú Opciones" data-trigger="focus" desc="1.1.4.3.1 Narvaez Maria, Antic." href="javascript:void(0);" id="903864" padre="619105" rel="" style="color:black;">
       1.1.4.3.1 Narvaez Maria, Antic.
      </a>
     </td>

问题根源 #

1. Class属性获取错误：class是JavaScript保留字，DOM元素的class属性需通过className（获取完整类字符串）或classList（类数组对象）访问，直接用.class会返回undefined。
2. 自定义属性读取错误：codigo、nombre是HTML自定义属性，不能直接通过.codigo/.nombre访问，必须用getAttribute()方法读取。

修改后的完整代码 #

var x = document.querySelectorAll("a");

var myarray = []
function isNumeric(str) {
  if (typeof str != "string") return false 
  return !isNaN(str) && 
         !isNaN(parseFloat(str)) 
}
for (var i=0; i<x.length; i++){
  var nametext = x[i].textContent;
  var cleantext = nametext.replace(/\s+/g, ' ').trim();
  var cleanlink = x[i].id;
  if(isNumeric(cleanlink)){
    // 正确获取class属性值
    var classid = x[i].className;
    // 读取自定义属性codigo和nombre
    var codigo = x[i].getAttribute('codigo');
    var nombre = x[i].getAttribute('nombre');
    // 将新属性加入数组
    myarray.push([cleantext, classid, cleanlink, codigo, nombre]);
  }                                           
};
function make_table() {
    // 更新表头，新增Codigo和Nombre列
    var table = '<table><thead><th>Name</th><th>Class</th><th>Id</th><th>Codigo</th><th>Nombre</th></thead><tbody>';
   for (var i=0; i<myarray.length; i++) {
            table += '<tr><td>'+ myarray[i][0] + '</td><td>'+ myarray[i][1] +'</td><td>'+myarray[i][2]+'</td><td>'+myarray[i][3]+'</td><td>'+myarray[i][4]+'</td></tr>';
    };
 
    var w = window.open("");
    w.document.write(table); 
}
make_table()

关键修改说明 #

• 替换x[i].class为x[i].className：直接获取元素的完整class字符串，若需单独操作某个类，可改用x[i].classList（如classList.item(0)取第一个类）。
• 使用getAttribute()读取自定义属性：所有非标准HTML属性都需通过该方法获取值，确保能正确拿到codigo和nombre的内容。
• 扩展数组和表格结构：新增Codigo、Nombre列，让提取的所有数据都能在生成的表格中展示。

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