使用 JavaScript 更改滑鼠指標

1. 在 JavaScript 中使用 getElementsByTagName() 來更改的游標指標
2. 使用 querySelectorAll() 更改 JavaScript 中的游標指標

文件物件模型 (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]。如果找到多個隨機元素，你可以迭代矩陣並更改所有值的游標樣式。