Is there a way to access DOM serverside?

I am trying to break free from tutorial hell and create something to make my life easier (the irony), it's an hours calculator.

I won't go too much into the functionality but basically it's just an app that stores all my months hours to which I can calculate at the end of the month by clicking a button.

However I am stuck, I am fairly new to this (backend especially) and I can't find a way to access the DOM and from my understanding that's normal given it's serverside code.

However I just need to know how you grab DOM elements and assign them to variables if this functionality doesn't exist backend? Is there an alternative to...

document.querySelector('...')

I did install JSDOM however from my understanding you can only pass in sections of code as opposed to accessing the full page? I may be completely wrong...

Can someone please help me get a clearer understanding of what I need to understand/do?

Here is my app.js code, go easy :)

const express = require('express'),
    app = express(),
    bodyParser = require('body-parser'),
    mongoose = require('mongoose'),
    jsdom = require("jsdom"),
    { JSDOM } = jsdom,
    dom = new JSDOM('localhost:3000/');

// ----------------------------------------//
const date = new Date(),
    day = date.getDate(),
    month = date.toLocaleString('default', { month: 'long' }),
    table = dom.window.document.querySelector('table'),
    totalShiftHours = dom.window.document.querySelectorAll('.totalShiftHours');



app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));
app.set('view engine', 'ejs');
app.listen(3000, () => console.log("I'm listening"));
mongoose.connect('mongodb://localhost:27017/hours_calculator', { useNewUrlParser: true, useUnifiedTopology: true });

const shiftSchema = new mongoose.Schema({
    date: Number,
    startTime: Number,
    finishTime: Number,
    lunchTime: Number,
});
const Shift = mongoose.model('Shift', shiftSchema);

app.get('/', (req, res) => {
    Shift.find({}, (err, allShifts) => {
        if (err) console.log(`There's an error: ${err}`)
        else res.render('index', {
            shifts: allShifts,
            day: day,
            month: month,
            table: table,
            totalShiftHours: totalShiftHours
        })
    })
});

app.post('/', (req, res) => {
    const startTime = Number(req.body.startTime),
        finishTime = Number(req.body.endTime),
        lunchTime = Number(req.body.lunchTime),
        newShift = {
            date: day,
            startTime: startTime,
            finishTime: finishTime,
            lunchTime: lunchTime
        };
    Shift.create(newShift, (err, newShift) => {
        if (err) console.log(`Somethings wrong, ${err}`);
        else res.redirect('/')
    })
});

Solution

There is no DOM on server side (besides some virtualisation of DOM). In your case if you want to write such application it will be the best to create separately frontend and backend code. Frontend part can be served by your server (even it can be done by using app.static method from express) and it will include html, css, javascript code where you will be able to manipulate form values and after that you will be able to do request to the server using ajax/fetch API or just classic form POST request. Later server will proceed with these values and will save data on database (as you are doing it with mongoose). I hope that I described it clearly enough and it will help you.