document.querySelector所有长度始终为0

我试图在JavaScript中创建一些可拖动的框。我决定在CSS和“box”类中创建一个空的类“draggable”。代码如下：document.querySelector所有长度始终为0

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
    .draggable 
    { 

    } 
    .box 
    { 
     position: absolute; 
     width: 80px; height: 60px; 
     padding-top: 10px; 
     text-align: center; 
     font-size: 40px; 
     background-color: #222; 
     color: #CCC; 
    } 
    </style> 
</head> 

<body> 
<div class="draggable box">1</div> 
<div class="draggable box">2</div> 
<div class="draggable box">3</div> 
<script> 
    var draggableStuff = document.querySelectorAll('draggable'); 
    var tabLength = draggableStuff.length; 
    alert(tabLength); 
</script> 
</body>

的问题是，tabLength始终为零。我想获得一个充满所有可拖动内容的数组。我是新来的JavaScript。我在这里错过了什么？

来源

2012-03-06 Michael

要选择按类元素，所以不要忘了点：

var draggableStuff = document.querySelectorAll('.draggable');

另一种选择是使用document.getElementsByClassName：

var draggableStuff = document.getElementsBYClassName('draggable');

来源

2012-03-06 21:15:55

非常感谢！有用！ – Michael 2012-03-06 21:17:41

@Michael Np。提示下次，在询问为什么某些内容不起作用之前，请确保您已阅读正确的文档。对于JavaScript/CSS/HTML，Mozilla开发者网络通常是一个不错的选择。将'mdn'添加到您的搜索查询中，例如。 ['querySelectorAll mdn']（http://www.google.com/search?q=mdn+querySelectorAll），你通常会立即获得正确的文档：https：//developer.mozilla.org/En/DOM/Document .querySelectorAll – 2012-03-06 21:19:37

@Rob W：可能想更正'document.getElementsBYClassName'上的'BY'。 – 2012-03-06 22:10:23

我碰到这种形势下应运而生。虽然它太旧了，但我想用我的答案帮助人们：

要选择所有元素（不管它是什么，它可能是div，span，h1等等），并具有特定属性

没有价值？：

var dragables = document.querySelectorAll('[draggable]');

随着价值？：

var dragables = document.querySelectorAll('[draggable="true"]');

来源

2016-06-11 12:54:29 David

document.querySelector所有长度始终为0

回答

相关问题