如何使用ag-grid在HTML中直接获取所选行的值

<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
<link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css">
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>

<div id="myGrid" style="height: 500px; width: 100%;" class="ag-theme-alpine"></div>

var columnDefs = [
  { headerName: "ID", field: "id" },
  { headerName: "Name", field: "name" },
  { headerName: "Age", field: "age" }
];

var rowData = [
  { id: 1, name: "John", age: 25 },
  { id: 2, name: "Jane", age: 30 },
  { id: 3, name: "Bob", age: 35 }
];

var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  rowSelection: 'single', // 只允许选择单行
  onSelectionChanged: onSelectionChanged // 选择行变化时的回调函数
};

function onSelectionChanged() {
  var selectedRows = gridOptions.api.getSelectedRows();
  var selectedData = selectedRows.map(function(row) {
    return row.data;
  });
  
  console.log(selectedData);
}

document.addEventListener('DOMContentLoaded', function() {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
});