使用 Javascript 获取元素的继承(级联)祖先 CSS 类

Get element's inherited (cascaded) ancestor CSS classes using Javascipt

window.onload = function() {
    var elements = document.querySelectorAll('body *');
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener("click", function(e) {
            console.log(e.target.className + "->" + e.target.parentNode.className);
        });
    }
};
.outer_box_green{
  border-style:solid;
  border-color:green;
}
.inner_box_thick{
  margin:2px;
  padding:3px;
  border-style:dashed;
  border-width:4px;

}
.line_1{
  font-size:2em;
  display:block;
}
.line_2{
  font-size:4em;
}
  <body>
    <div class="outer_box_green">
      <div class="inner_box_thick another_inner_box_class">
        <span class="line_1">Line 1</span>
        <span class="line_2">Line 2</span>
        <div>Line 3</div>
      </div>
    </div>
  </body>

使用香草 Javascript,我们如何获得被点击元素的 类 以及被点击元素嵌套在其中的“祖先”元素的所有 类。例如,如果我们有

<div class="outer_box_green">
  <div class="inner_box_thick another_inner_box_class">
    <span class="line_1">Line 1</span>
    <span class="line_2">Line 2</span>
    <div>Line 3</div>
  </div>
</div>

期望的行为是在单击元素时获取包含祖先 类 的 Javascript 数组:

我想出了如何使用 parentNode.className 打印 类,但它只上升了一层(参见代码片段)。如何才能一次获得所有嵌套 HTML 祖先的所有 CSS 类?

您可以向上移动 DOM 树,直到 parentNode 变为 null

window.onload = function() {
  var elements = document.querySelectorAll('body *');
  for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener("click", function(e) {
      const classNames = [];
      let node = e.target;
      while(node != null){
        if(node.className) classNames.push(node.className);
        node = node.parentNode;
      }
      console.log(...classNames);
    });
  }
};
.outer_box_green {
  border-style: solid;
  border-color: green;
}

.inner_box_thick {
  margin: 2px;
  padding: 3px;
  border-style: dashed;
  border-width: 4px;
}

.line_1 {
  font-size: 2em;
  display: block;
}

.line_2 {
  font-size: 4em;
}
<div class="outer_box_green">
  <div class="inner_box_thick another_inner_box_class">
    <span class="line_1">Line 1</span>
    <span class="line_2">Line 2</span>
    <div>Line 3</div>
  </div>
</div>