如何用JavaScript获取input checkbox标签的所有默认CSS属性？

嘿，我来帮你捋捋这个调试问题！你尝试用console.log(document.getElementsByTagName('input')[0].attributes[0])却没成功，大概率是下面几个常见原因导致的，咱们逐个解决：

• DOM元素还没加载完成就执行了代码
  如果你的脚本放在页面的<head>标签里，浏览器会先执行脚本，这时候页面的<input>元素还没被渲染出来，document.getElementsByTagName('input')返回的是一个空集合，访问索引[0]自然会报错。
  解决办法：
  要么把脚本放到<body>标签的最末尾，等DOM都渲染完再执行；要么用DOMContentLoaded事件包裹代码，确保DOM加载完成后再操作：

  document.addEventListener('DOMContentLoaded', function() {
    const firstInput = document.getElementsByTagName('input')[0];
    if (firstInput) {
      console.log(firstInput.attributes[0]);
    } else {
      console.log('页面中找不到任何<input>元素哦');
    }
  });
  

• 目标元素没有任何属性
  如果页面里确实有元素，但它是像<input>这样完全没有属性的标签，attributes集合的长度就是0，访问索引[0]会得到undefined，看起来就像“没成功”。
  这时候可以先判断属性集合的长度：

  const firstInput = document.getElementsByTagName('input')[0];
  if (firstInput) {
    if (firstInput.attributes.length > 0) {
      console.log(firstInput.attributes[0]);
    } else {
      console.log('这个<input>元素没有设置任何属性');
    }
  }
  

• 直接打印NamedNodeMap不够直观
  attributes返回的是NamedNodeMap类型的对象，直接用console.log打印可能显示的是对象结构，不是你预期的属性内容。你可以直接打印属性的名称和值，更清晰：

  const firstInput = document.getElementsByTagName('input')[0];
  if (firstInput && firstInput.attributes.length > 0) {
    const attr = firstInput.attributes[0];
    console.log(`第一个属性：名称=${attr.name}，值=${attr.value}`);
  }
  

你可以按照上面的步骤排查，应该就能找到问题所在啦！

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