无需第三方库，如何通过NodeJS访问并修改HTML元素？

你混淆了**后端(Node.js)与前端(浏览器)**的运行环境：document.getElementById()是浏览器提供的DOM操作API，Node.js后端环境中不存在document对象，所以直接在后端代码里操作DOM肯定无效。

提供两种常用的实现方式，根据你的需求选择：

方式一：后端渲染时替换HTML内容 #

在HTML文件中预留占位符，后端读取HTML后将占位符替换为数据库连接状态文本。

1. 修改conn.html，添加占位符：

<!DOCTYPE html>
<html>
<body>
  <p id="db-status">{{DB_CONN_STATUS}}</p>
</body>
</html>

2. 修改Node.js代码，替换占位符并返回渲染后的HTML：

var http = require('http');
var fs = require('fs');

const PORT=3000; 

// 模拟数据库连接检查（替换为你的真实数据库连接逻辑）
function checkDbConnection() {
  return new Promise((resolve) => {
    // 这里写你的数据库连接代码，成功返回true，失败返回false
    setTimeout(() => resolve(true), 100);
  });
}

fs.readFile('./conn.html', async function (err, html) {
  if (err) throw err;    

  http.createServer(async function(request, response) {  
    // 先确认数据库连接状态
    const isConnected = await checkDbConnection();
    const statusText = isConnected ? "成功连接到数据库" : "数据库连接失败";
    
    // 将HTML中的占位符替换为实际文本
    finalHtml = html.toString().replace('{{DB_CONN_STATUS}}', statusText);
    
    response.writeHeader(200, {"Content-Type": "text/html"});  
    response.write(finalHtml);
    response.end();
  }).listen(PORT);
});

方式二：前端JS动态修改DOM #

后端返回原始HTML，页面加载后由前端JavaScript读取DOM并修改内容，还可通过接口实时获取后端的数据库状态。

1. 修改conn.html，嵌入前端JS：

<!DOCTYPE html>
<html>
<body>
  <p id="db-status">正在检查数据库连接...</p>
  <script>
    // 页面加载完成后执行
    window.onload = async function() {
      // 可选：通过接口从后端获取实时连接状态
      // const res = await fetch('/db-status');
      // const data = await res.json();
      // const statusText = data.connected ? "成功连接到数据库" : "数据库连接失败";
      
      // 若后端已确认连接成功，可直接写死文本
      const statusText = "成功连接到数据库";
      document.getElementById('db-status').textContent = statusText;
    };
  </script>
</body>
</html>

2. 若需要接口支持，修改Node.js代码添加路由：

var http = require('http');
var fs = require('fs');

const PORT=3000; 

function checkDbConnection() {
  // 你的数据库连接检查逻辑
  return Promise.resolve(true);
}

fs.readFile('./conn.html', function (err, html) {
  if (err) throw err;    

  http.createServer(async function(request, response) {  
    // 处理数据库状态查询接口
    if (request.url === '/db-status') {
      const isConnected = await checkDbConnection();
      response.writeHeader(200, {"Content-Type": "application/json"});  
      response.write(JSON.stringify({connected: isConnected}));
      response.end();
      return;
    }

    // 返回HTML页面
    response.writeHeader(200, {"Content-Type": "text/html"});  
    response.write(html);
    response.end();
  }).listen(PORT);
});

内容的提问来源于stack exchange，提问作者AbdullahCoder