JavaScript无法获得firstChild

Question

我试图让我的div“tick_list”的第一个孩子插入新元素，但它返回undefined。

$(function() {
   var tick_list = $('#tick_list');

    socket.on('tick', function(data){
        console.log(tick_list.firstElementChild);
    });
});

Answer 1

tick_list是一个jQuery对象，它没有firstElementChild属性。

您可以使用tick_list.children().eq(0)来获取第一个子节点（仍然是jQuery对象）。

有很多方法可以获得第一个孩子，这里有一个 jsperf test ：

Answer 2

$(function() {
   var tick_list = $('#tick_list');

    socket.on('tick', function(data){
        console.log(tick_list.eq(0));
    });
});

Answer 3

$(function() {
   var tick_list = $('#tick_list');

    socket.on('tick', function(data){
        console.log(tick_list.children(':first'));
    });
});

Answer 4

您可以使用children（）和first（）jquery方法

$(function() {
   var tick_list = $('#tick_list');

    socket.on('tick', function(data){
        console.log(tick_list.children().first());
    });
});

https://api.jquery.com/children/

https://api.jquery.com/first/

Answer 5

tick_list是一个jQuery对象，因此您无法使用成员运算符直接访问dom属性。

您使用use .prop（）方法

tick_list.prop('firstElementChild')

或使用索引.get（）

访问底层dom元素

tick_list[0].firstElementChild