js 获得子元素的属性值

// 假设HTML结构如下：
// <div id="parent">
//   <button id="child" data-action="submit">Click Me</button>
// </div>

// 获取子元素
var childElement = document.getElementById('child');

// 获取标准属性值
var idValue = childElement.getAttribute('id'); // "child"

// 获取自定义属性值
var actionValue = childElement.getAttribute('data-action'); // "submit"

// 假设HTML结构如下：
// <ul id="list">
//   <li data-id="1">Item 1</li>
//   <li data-id="2">Item 2</li>
//   <li data-id="3">Item 3</li>
// </ul>

// 获取所有子元素
var listItems = document.querySelectorAll('#list li');

// 遍历子元素并获取属性值
listItems.forEach(function(item) {
  var id = item.getAttribute('data-id');
  console.log(id); // 输出: 1, 2, 3
});

window.onload = function() {
  var childElement = document.getElementById('child');
  if (childElement) {
    var actionValue = childElement.getAttribute('data-action');
    console.log(actionValue); // "submit"
  } else {
    console.error('Element not found');
  }
};