迹忆客 专注技术分享

文档对象模型 (DOM) 是标记语言文档（HTML 和 XML）的编程接口。它定义了文档的逻辑结构以及如何访问和修改文档。

DOM 以结构化和分层的方式呈现网页，使开发人员和用户更容易浏览文档。

使用 DOM，我们可以使用 Document 对象提供的方法或命令轻松访问和操作标签、id、类、属性或元素。

今天的文章将教授如何使用 JavaScript 更改鼠标指针。有两种方法可以使用查询选择器更改鼠标指针或通过标签访问特定元素。

在 JavaScript 中使用 getElementsByTagName() 来更改的光标指针

getElementsByTagName() 是 JavaScript 的内置 document 方法并返回其标签与指定 tag 名称匹配的 NodeList 对象/元素。

返回活动的 HTML 集合，包括搜索中的根节点。

语法：

document.getElementsByTagName(name);

getElementsByTagName() 将其 name 作为输入参数。它是一个必需参数，用于指定必须匹配的 HTML 属性的 tagName。

如果找到任何匹配的元素，则返回匹配的 DOM 元素对象；否则，它返回 null。

getElementsByTagName 和 querySelectorAll 之间的唯一区别是它首先只选择那些指定标签名称与指定标签名称匹配的元素。相比之下，querySelectorAll 可以使用任何具有更大灵活性和功能的选择器。

getElementsByTagName 还返回活动节点列表，而 querySelectorAll 返回静态节点列表。活动节点列表允许在 DOM 更改时立即更新结果，这不需要激活查询。

例子：

<p>Hello World</p>
<br/>
<p>Welcome to my article</p>

const pElement = document.getElementsByTagName('p')[0];
pElement.style.cursor =
    'url(\'http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur\'), auto';
console.log(pElement.style.cursor);

我们在上面的代码中定义了两个带有 p 标签的元素。

当我们使用 getElementsByTagName() 访问文档时，它会查找其标签与给定标签匹配的所有节点并返回 NodeList。然后将光标样式设置为请求的 URL。

使用 querySelectorAll() 更改 JavaScript 中的光标指针

querySelectorAll() 是 JavaScript 提供的内置文档方法，它返回选择器与指定选择器匹配的 Element/NodeList 对象。

你可以更改更多选择器。如果传递了无效的选择器，则会引发语法错误。

语法：

document.querySelectorAll(selectors);

有关详细信息，请参阅 querySelectorAll 方法文档。

例子：

<p>Hello World</p>
<br/>
<p>Welcome to my article</p>

const pElement = document.querySelectorAll('p')[0];
pElement.style.cursor =
    'url(\'http://wiki-devel.sugarlabs.org/images/e/e2/Arrow.cur\'), auto';
console.log(pElement.style.cursor);

我们在上面的代码中定义了两个带有 p 标签的元素。当我们使用 querySelectorAll() 访问文档时，它会查找其标签与给定标签匹配的所有节点并返回 NodeList。

由于 querySelectorAll 返回一个数组，我们可以提取第一个匹配元素 [0]。如果找到多个随机元素，你可以迭代矩阵并更改所有值的光标样式。