如何解决使用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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。