document.querySelectorAll length is always 0
Question
I'm trying to create some draggable boxes in javascript. I decided to make an empty class "draggable" in CSS and a "box" class. The code is as follows:
<!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>
The problem is that tabLength is always zero. I want to get an array filled with all draggable stuff. I'm new to javascript. What have I missed here?
2 answers
solution1
9 ACCPTED 2012-03-06 21:15:55
You want to select elements by class, so don't forget about the dot:
var draggableStuff = document.querySelectorAll('.draggable');
Another option is to use document.getElementsByClassName :
var draggableStuff = document.getElementsByClassName('draggable');
solution2
0 2016-06-11 12:54:29
I came across this situation. Although it is too old post I would like to help people with my answer:
To select all the elements (no matter what it is, it may be div, span, h1, etc...) with particular attribute
Without value?:
var dragables = document.querySelectorAll('[draggable]');
With value?:
var dragables = document.querySelectorAll('[draggable="true"]');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.