<div> 元素是HTML中最常見的元素之一，它允許我們在網頁中創建各種不同的布局和樣式。當我們需要對一個 <div> 元素內的文本或其他元素進行操作時，我們常常需要為其設置焦點。在這篇文章中，我們將討論如何使用HTML和JavaScript來實現 <div> 元素獲取焦點的功能。
<div> 元素獲取焦點的意思是當頁面加載完成或者用戶進行頁面操作時，該元素可以自動選中或者具有輸入狀態，例如光標閃爍或鍵盤輸入。通常情況下，<div> 元素不會直接支持獲取焦點，因為它本身是一個容器元素，并不包含文本或者輸入字段。
然而，我們可以通過設置 <div> 元素的 tabindex 屬性來使其支持獲取焦點。tabindex 屬性用于定義一個元素在頁面上的焦點順序。當 tabindex 屬性為正整數時，這個元素將可以通過鍵盤進行焦點控制。
接下來，我們將介紹幾個使用 tabindex 屬性來獲取 <div> 元素焦點的代碼案例。

案例一：

<div tabindex="0">我是一個可以獲得焦點的 div 元素。</div>

在這個案例中，我們通過設置 <div> 元素的 tabindex 屬性為0，使其可以通過鍵盤進行焦點控制。當頁面加載完成后，這個元素將會自動選中，并且可以使用鍵盤操作。

案例二：

<div tabindex="0" id="myDiv">我是一個可以通過 JavaScript 獲取焦點的 div 元素。</div>
<br>
  <script>
document.addEventListener('DOMContentLoaded', function() {
var myDiv = document.getElementById('myDiv');
myDiv.focus();
});
</script>

在這個案例中，我們通過 JavaScript 實現了獲取 <div> 元素焦點的功能。當頁面加載完成后，使用 JavaScript 的 focus() 方法可以使指定的元素自動獲取焦點。在這個例子中，我們選擇了一個具有 id="myDiv" 的 <div> 元素。

案例三：

<div contenteditable tabindex="0">我是一個可以編輯并獲得焦點的 div 元素。</div>

除了使用 tabindex 屬性，我們還可以使用 contenteditable 屬性來實現 <div> 元素的獲取焦點。當 contenteditable 屬性設置為 true 時，<div> 元素將變為可編輯的狀態，并可以通過鍵盤輸入。同時，它也可以自動獲取焦點，以便用戶可以直接進行編輯。
起來，雖然 <div> 元素默認情況下不支持獲取焦點，但我們可以通過設置 tabindex 屬性或 contenteditable 屬性來實現這個功能。通過這些方法，我們可以在網頁中靈活地操作 <div> 元素，并提供更好的用戶體驗。