Javascript：如何在按钮点击时访问对象？

Question

我正在尝试了解如何创建和更新对象以响应用户单击按钮。我正在使用cytoscape.js作为本练习的一部分，在页面加载后创建图形后，单击按钮会更新页面上带有节点计数的框。使用document.getElementById（'cy'）检索图形对象cy会返回某些内容，但随后尝试访问节点失败，因为对象方法（例如.elements（）或.nodes（））是未定义。很明显，我回来的对象.getElementById（'cy'）不是图形对象。

所以我的问题是，如何访问图形对象？

function count_nodes() {
    var node_count = 0;
    var cy = document.getElementById('cy');
    console.log(cy)
    console.log(cy.elements("[foo>1]"));
  
    document.getElementById('out').value = node_count;
  
}

$(function(){ // on dom ready

var elesJson = {
  nodes: [
    { data: { id: 'a', foo: 3, bar: 5, baz: 7 } },
    { data: { id: 'b', foo: 7, bar: 1, baz: 3 } },
    { data: { id: 'c', foo: 2, bar: 7, baz: 6 } },
    { data: { id: 'd', foo: 9, bar: 5, baz: 2 } },
    { data: { id: 'e', foo: 2, bar: 4, baz: 5 } }
  ], 

  edges: [{ data: { id: 'ae', weight: 1, source: 'a', target: 'e' } },
    { data: { id: 'ab', weight: 3, source: 'a', target: 'b' } },
    { data: { id: 'be', weight: 4, source: 'b', target: 'e' } },
    { data: { id: 'bc', weight: 5, source: 'b', target: 'c' } },
    { data: { id: 'ce', weight: 6, source: 'c', target: 'e' } },
    { data: { id: 'cd', weight: 2, source: 'c', target: 'd' } },
    { data: { id: 'de', weight: 7, source: 'd', target: 'e' } }
    
  ]
};
  
$('#cy').cytoscape({
  style: cytoscape.stylesheet()
    .selector('node')
      .css({
        'background-color': '#B3767E',
        'width': 'mapData(baz, 0, 10, 10, 40)',
        'height': 'mapData(baz, 0, 10, 10, 40)',
        'content': 'data(id)'
      })
    .selector('edge')
      .css({
        'line-color': '#F2B1BA',
        'target-arrow-color': '#F2B1BA',
        'width': 2,
        'target-arrow-shape': 'circle',
        'opacity': 0.8
      })
    .selector(':selected')
      .css({
        'background-color': 'black',
        'line-color': 'black',
        'target-arrow-color': 'black',
        'source-arrow-color': 'black',
        'opacity': 1
      })
    .selector('.faded')
      .css({
        'opacity': 0.25,
        'text-opacity': 0
      }),
  
  elements: elesJson,
  
  layout: {
    name: 'circle',
    padding: 10
  },
  
  ready: function(){
    // ready 1
  }
});
  
  }); // on dom ready

 <div class="box">    
        <label for="out"><abbr title="Quantity">Num Nodes</abbr></label>
        <input id="out" value="0" />
      <button id="count" onclick="count_nodes()">Count</button>
    </div>

（我很抱歉这可能是一个基本问题，我对JS很新）