如何获取div元素的所有属性值？使用getElementById报错求指导

先排查你示例代码的错误 #

你的代码title=document.getElementById('1').getAttribute("title");报错，大概率是以下两个原因：

1. 脚本执行时机过早：如果脚本写在<head>标签里，此时DOM还没渲染完成，getElementById('1')会返回null，调用getAttribute就会触发Cannot read properties of null错误。
2. 变量未声明：直接赋值给未声明的title，在严格模式下会抛出ReferenceError，应该用let/const声明变量。

单个属性的正确获取方式 #

先确保DOM加载完成，再获取元素和属性：

// 等待DOM完全加载
document.addEventListener('DOMContentLoaded', function() {
  const targetDiv = document.getElementById('1');
  // 获取单个属性
  const title = targetDiv.getAttribute('title');
  const description = targetDiv.getAttribute('description');
  const activityNote = targetDiv.getAttribute('activity-note');
  const groupedAs = targetDiv.getAttribute('grouped-as');
  
  console.log('单个属性值：', title, description, activityNote, groupedAs);
});

获取元素的所有属性值 #

如果要批量获取每个div的所有已设置属性，可以遍历元素的attributes集合：

document.addEventListener('DOMContentLoaded', function() {
  // 获取页面中所有div元素
  const allDivs = document.querySelectorAll('div');
  
  allDivs.forEach(div => {
    console.log(`--- 元素ID: ${div.id} ---`);
    // 将attributes转换为数组后遍历
    Array.from(div.attributes).forEach(attr => {
      console.log(`${attr.name}: ${attr.value}`);
    });
  });
});

attributes是DOM元素自带的NamedNodeMap对象，包含了元素上所有已设置的属性，每个属性项包含name（属性名）和value（属性值）两个字段。

额外提示：自定义属性规范 #

你的代码里用了description、activity-note这类自定义属性，HTML规范推荐用data-前缀命名自定义属性（比如data-description、data-activity-note），这样可以通过元素的dataset属性更便捷地访问：

// 假设div改为 <div id='1' data-description='B' data-activity-note='C'></div>
const desc = targetDiv.dataset.description; // 直接获取值'B'
const note = targetDiv.dataset.activityNote; // 驼峰式访问连字符命名的属性

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