使用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数组：

单击“第1行”
- ["line_1","inner_Box_thick","another_inner_Box_class","outer_Box_green"]
单击“第2行”
- ["line_2","outer_Box_green"]
单击“第3行”
- ["inner_Box_thick","outer_Box_green"]

我想出了如何使用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>

html javascript parent