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

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>

使用vanilla 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", "inner_box_thick", "another_inner_box_class", "outer_box_green"]
"第3行"；被单击
- ["inner_box_thick", "another_inner_box_class", "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>

相关内容

最新更新

热门标签：