queryselectorall 中的用户通配符 (1)

📌 相关文章

📜 queryselectorall 中的用户通配符 (1)

📅 最后修改于: 2023-12-03 15:04:44.704000 🧑 作者: Mango

QuerySelectorAll 中的用户通配符

简介

在 querySelectorAll() 方法中，用户通配符 * 是一种特殊的 CSS 选择器，可以匹配所有的 HTML 元素。这意味着，使用 * 通配符作为选择器，可以选择页面上的所有元素。

语法

下面是 querySelectorAll() 方法中使用 * 通配符的语法：

document.querySelectorAll('*');

示例

下面是一个简单的 HTML 页面：

<!DOCTYPE html>
<html>
<head>
	<title>Query Selector All with User Wildcard</title>
</head>
<body>
	<h1>Query Selector All with User Wildcard</h1>
	<div>
		<p>First Paragraph</p>
		<div>
			<p>Second Paragraph</p>
		</div>
	</div>
	<p>Third Paragraph</p>
	<table>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>a</td>
			<td>b</td>
			<td>c</td>
		</tr>
	</table>
</body>
</html>

下面是使用 * 通配符选择所有元素的 JavaScript 代码段：

let allElements = document.querySelectorAll('*');

执行上述代码返回的 allElements 可以访问页面上所有 element 子元素，如下：

[
	<html>, 
	<!DOCTYPE html>, 
	<head>, 
	<title>, 
	<title>Query Selector All with User Wildcard</title>, 
	<body>, 
	<h1>Query Selector All with User Wildcard</h1>, 
	<div>, 
	<p>First Paragraph</p>, 
	<div>, 
	<p>Second Paragraph</p>, 
	</div>, 
	</div>, 
	<p>Third Paragraph</p>, 
	<table>, 
	<tr>, 
	<td>1</td>, 
	<td>2</td>, 
	<td>3</td>, 
	</tr>, 
	<tr>, 
	<td>a</td>, 
	<td>b</td>, 
	<td>c</td>, 
	</tr>, 
	</table>
]

注意事项

使用 * 通配符作为选择器将对页面性能产生影响，因为它需要遍历页面上的每个元素。因此，对于大型页面，尽可能避免使用 * 通配符。