JavaScript 是一種客戶端的腳本語言，用于增強 HTML 頁面的交互性和動態性。在編寫 JavaScript 的過程中，我們常常需要獲取或者改變光標所在的元素，而這就要用到一些相關的方法和屬性。在本文中，我們將介紹 JavaScript 中獲取光標所在元素的方法和應用實例。

在 JavaScript 中，我們可以使用document.activeElement方法來獲取當前活躍的元素，即光標所在的元素。下面是一個簡單的示例：

const activeElement = document.activeElement;
console.log(activeElement);

在以上代碼中，document.activeElement方法返回當前活躍的元素，然后通過使用 console.log() 方法將結果打印到控制臺上。特別注意的是，這個方法要求頁面中至少存在一個元素被獲得焦點，否則返回的結果是undefined。

除了document.activeElement方法，我們還可以利用事件對象來獲取當前活躍的元素。例如，在鍵盤事件中，我們可以使用event.target屬性來獲取當前觸發事件的元素。

function handleKeyDown(event) {
const targetElement = event.target;
console.log(targetElement);
}
document.addEventListener('keydown', handleKeyDown);

在以上代碼中，我們定義了一個名為 handleKeyDown 的函數，它會在鍵盤按下時觸發。在這個函數中，我們使用event.target屬性來獲取當前活躍的元素，并將其打印到控制臺上。

除了獲取光標所在元素之外，我們還可以通過一些方法來修改光標所在元素中的內容。例如，在輸入框中插入新的文本時，我們可以使用selectionStart、selectionEnd和setSelectionRange()這些方法來實現。

const inputElement = document.getElementById('input');
inputElement.value = 'Hello World!';
inputElement.setSelectionRange(5, 5);

在以上代碼中，我們首先獲取了一個 id 為 input 的輸入框元素，然后將其 value 屬性設置為 'Hello World!'。接著我們使用setSelectionRange()方法來將光標設置為第五個字符后面。這里的第一個參數表示開始位置，第二個參數表示結束位置，因此兩個參數都設置為 5，表示光標定位在第五個字符之后。

總體而言，JavaScript 中獲取和修改光標所在元素的方法和屬性很多，我們需要結合場景和需求來選擇適合的方法，才能更加高效地完成編程任務。