如何在debug上学习当前div类的元素

Question

我正在Google Chrome上调试我的javascript代码，当它在断点处停止时，我想学习ID为＃34; loadingElement＆＃34;的div的当前类名。使用javascript代码我尝试将其类更改为加载/加载。但我不确定它是否会改变。

我应该向控制台写下什么才能看到它的当前状态？

这就是div的样子：

<div id="loadingElement" class="loaded">

Answer 1

这就是你要做的事情：

console.log(document.getElementById('loadingElement').className);

我希望您在加载之后尝试删除该元素，如果这样使用，请执行以下操作：

var el = document.getElementById('loadingElement');
if(el.className == 'loaded'){
   el.parentNode.removeChild(el);
}

Answer 2

var elem = document.getElementById('loadingElement');
console.log(elem);

Answer 3

IF 发生了类更改，您将在Chrome中的DOM中看到它。它是实时更新的。

你也可以通过Javascript获取元素并在控制台中打印出来：

var el = document.getElementById('loadingElement');
console.log(el);

或直接打印班级列表：

console.log(document.getElementById('loadingElement').classList);

Classlist将打印所有类，而不是className，将打印一个。

Answer 4

由于您使用的是Chrome开发工具，因此您可以使用一些有用的console functions：

console.log($('#loadingElement').className)

此处$()是document.querySelector的快捷方式（不要与jQuery混淆）。

Answer 5

您有几种可能性：

document.getElementById("loadingElement").className

或者，您可以输入：

 document.getElementById("loadingElement")

在您的控制台中，会出现以下内容，您已经可以看到其属性。

如果您需要它，右键单击它并选择＆＃34;显示元素面板＆＃34;，允许您在DOM上看到它：

如果你需要在动画中知道这一点，输入：

可能会有所帮助

setInterval(function(){
     console.log(document.getElementById("loadingElement").className)
}, 100);

这样，每隔100ms就会在控制台上打印className