Question

我为$（＆＃39;＃list＆＃39;）和document.getElementById（＆＃34; list＆＃34;）

获得了不同的控制台输出

我的控制台打印如下。

console.log($('#list'));

console.log(document.getElementById("list"));

但是控制台中的输出显示不同。

[select#list.form-control]

<select id="list" class="form-control" size="10"><option>PHP</option><option>JavaScript</option></select>

但我需要javascript中的相同输出，如jquery。

Answer 1

区别在于$('#list')返回jQuery object而document.getElementById("list")返回Element。

如果需要从jQuery对象获取Element，请通过索引访问它，或使用get()。以下所有内容都将给出Element对象的相同输出：

console.log($('#list').get(0));
console.log($('#list')[0]);
console.log(document.getElementById("list"));

如果要返回jQuery对象，请使用以下任何一个：

console.log($('#list'));
console.log($(document.getElementId('list'));

但请注意，此案例中的第二个示例完全是冗余的，仅为了完整性而包括在内。

Answer 2

这是可以预料的，jQuery使用jQuery方法返回包装在jQuery对象中的DOM节点，而像getElementById这样的本地方法只返回DOM节点。

如果你想要DOM节点，你可以做

console.log($('#list').get(0));

但是没有办法在没有jQuery的情况下返回jQuery对象，并且正在执行

$(document.getElementById("list"))

是没有意义的，但是如果你已经拥有一个本机DOM节点，你可以将它包装在jQuery中 - ＆gt; $(element)