选择div中的文本会引发TypeError

Question

此$("#grid_modal div")[0].childNodes[0]捕获给定div中的所有文本。但是如何在最后添加.select()会导致错误？

$("#grid_modal div")[0].childNodes[0].select()
//TypeError: Object #<Text> has no method 'select'

文字没有方法选择？我怎么能绕过这个？

Answer 1

只要在 jQuery对象上执行[0]，就会有效地将 jQuery 环境留给vanilla Node 。这意味着您无法使用 jQuery的方法，而无需重新应用它。

var node = $("#grid_modal div")[0].childNodes[0];
$(node).select();

  

这[...]捕获给定div中的所有文本

您实际上是第一个 Node ，它是您#grid_modal div的第一个 Node 的孩子，不能保证这是一个文本节点。如果您需要文字，最好使用node.textContent

Answer 2

您正在尝试调用select Javascript方法。

  

对于Input或TextArea元素，这将聚焦元素并选择其中的所有文本。

但是，您没有input或textarea元素。你实际上有一个文本节点。您试图找到div的第一个子元素，但之前有一个文本节点，当您执行childNodes时会选择文本节点。

简单的方法是使用jQuery代替整个选择：

$("#grid_modal div").eq(0).children().first()[0].select()

您可以使用vanilla Javascript代替。例如，您可以使用children属性，但并非所有浏览器都可以使用此属性（特别是在IE＆lt; 9中）。

$("#grid_modal div")[0].children[0].select()