javascript - 在 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

一旦你[0]在jQuery Object上做，你实际上已经离开了你的jQuery环境而使用了一个普通的Node。这意味着您不能使用jQuery 的方法，而无需重新应用它。

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

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

你实际上得到了第一个节点，它是你的第一个节点的子节点，#grid_modal div不能保证这是一个文本节点。如果你想要文字，最好使用node.textContent

Answer 2

您正在尝试调用selectJavascript 方法。

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

但是你没有一个input或一个textarea元素。你实际上有一个文本节点。您试图找到 div 的第一个子元素，但在它之前有一个文本节点，并且当您这样做时选择了文本节点childNodes。

解决这个问题的简单方法是使用 jQuery 来代替整个选择：

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

你可以用 vanilla Javascript 来代替。例如，您可以使用该children属性，但这并非在所有浏览器中都可用（尤其是在 IE<9 中）。

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