How to set 'path' to use it with .getTotalLength() .getPointAtLength() methods?

Question

I try to get 'path' to make use of it with .getTotalLength() .getPointAtLength() methods.

I try the following out of not knowing well enough SVG stuff:

// Declare the line generator.
const line = d3
  .line()
  .x((d) => x(d.xpoint))
  .y((d) => y(d.ypoint))
  .curve(d3.curveCatmullRom.alpha(0.5));

// Append a path for the line.
svg
  .append('path')
  .attr('fill', 'none')
  .attr('stroke', 'steelblue')
  .attr('stroke-width', 1.5)
  .attr('d', line(data));

let path = document.querySelector('path');
console.log(path);

But path is null.

How can I do this correctly?