Console.log - getElementsByClassName

我正在努力学习HTML5"DnD"

我有一个表，它是用PHP中的HTML创建的

echo "<li class='elements' id='".$row['id']."' draggable='true'>".$row['element_nr']."</li>";

现在我想用javascript获取这个文本

element = document.getElementsByClassName('elements');

然后只是为了好玩，我想控制台那个变量，看看里面有什么。所以我使用：

var element = document.getElementsByClassName('elements');
console.log(element);

现在，当我检查我的控制台时，我什么也没看到。当我拖动文本时，我什么也看不到。我也尝试过"提示（元素）；"

如何查看"var元素"中的内容
这是我的密码。（还没有真正工作）

JS

$(document).ready(function(){
function doFirst(){
    element = document.getElementsByClassName('elements');
    element.addEventListener('dragstart', startDrag, false);
    drop_element = document.getElementById('drop_element');
    drop_element.addEventListener('dragenter', function(e){e.preventDefault();}, false);
    drop_element.addEventListener('dragover', function(e){e.preventDefault();}, false);
    drop_element.addEventListener('drop', dropped, false);
}
function startDrag(e){
    var element = document.getElementsByClassName('elements');
    console.log(element);
    e.dataTransfer.setData('Text', element);
}
function dropped(e){
    e.preventDefault();
    drop_element.innerHTML = e.dataTranfer.getData('Text');
}
window.addEventListener('Load', doFirst, false);
});

HTML

<section id="drag_element">
  <ul>
    <?php echo "<li class='elements' id='".$row['id']."' draggable='true'>".$row['element_nr']."</li>";?>
  </ul>
<section id="drop_element">
  drop here
</section>