如何用JavaScript显示当前节点的HTML类？代码修改建议咨询

我来帮你一步步解决这些问题哈～

你要获取节点的类名，JavaScript里有两个常用的属性可以实现：

• className：直接返回字符串形式的类名（多个类用空格分隔）
• classList：返回一个DOMTokenList对象，你可以用toString()把它转成直观的字符串，也能用它的方法（比如add()、remove()）来操作类名

另外要注意大小写错误：result.InnerHTML必须写成result.innerHTML（innerHTML的首字母是小写i）。修改后的代码片段如下：

var thisNode = document.body.firstChild;
var result = document.getElementById("resultOfButton");
// 方式1：用className获取类名字符串
result.innerHTML = thisNode.className;
// 方式2：用classList转成字符串
// result.innerHTML = thisNode.classList.toString();

小提醒：document.body.firstChild可能会拿到文本节点（比如HTML里的换行、空格），文本节点没有className属性会报错。如果只想获取元素节点，建议改成document.body.firstElementChild。

我帮你梳理了代码里的错误和优化点：

1. 变量声明优化 #

建议用let代替var，var存在变量提升和作用域问题，let的块级作用域更安全：

let thisNode = document.body.firstElementChild; // 改成firstElementChild避免拿到文本节点
let result = document.getElementById("resultOfButton");
let block = false;

2. buttonDown函数的修正 #

• 修复innerHTML的大小写错误
• 调整逻辑顺序：原来当block == true时，先跳转到父元素的firstChild，又执行nextSibling会直接跳过第一个节点，需要调整分支逻辑
• 补全block = true的分号
• 增加节点存在性判断，避免文本节点报错

修改后的buttonDown：

function buttonDown() {
  if (block) { // 可以直接写block代替block == true，更简洁
    thisNode = thisNode.parentElement.firstElementChild;
    block = false;
  } else {
    thisNode = thisNode.nextElementSibling; // 用nextElementSibling只找元素节点
  }
  
  // 确保thisNode存在再更新内容
  if (thisNode) {
    result.innerHTML = thisNode.nodeName;
  }
  
  // 判断是否是最后一个元素节点
  if (thisNode === thisNode.parentElement.lastElementChild) {
    block = true;
  }
}

3. buttonEnter函数的修正 #

• thisNode.c是错误写法，改成获取类名的className或classList.toString()
• 用firstElementChild代替firstChild避免文本节点
• 增加存在性判断防止报错

修改后的buttonEnter：

function buttonEnter() {
  // 先判断当前节点有没有子元素
  if (thisNode.firstElementChild) {
    thisNode = thisNode.firstElementChild;
    // 显示类名
    result.innerHTML = thisNode.className;
    // 或者用classList
    // result.innerHTML = thisNode.classList.toString();
  } else {
    result.innerHTML = "该节点没有子元素";
  }
}

4. 其他补充建议 #

• buttonUp和buttonBack可以按照类似逻辑补充，比如buttonBack可以回到父节点或上一个兄弟节点，记得用parentElement、previousElementSibling这类只针对元素节点的属性
• 所有节点遍历操作，优先用firstElementChild、nextElementSibling、lastElementChild，避免文本节点干扰导致的报错

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