<div>獲取屬性</div>

在HTML中，<div>是一個通用容器元素，它沒有具體的語義，可以用于組織和包含其他HTML元素。除了多用于布局外，<div>元素還可以含有各種屬性。本文將詳細介紹如何獲取<div>元素的屬性值。

，要獲取<div>元素的屬性值，我們可以使用JavaScript的DOM（文檔對象模型）來獲取和操作HTML元素。DOM允許我們通過JavaScript腳本直接與HTML文檔的元素進行交互。

<hr>

案例一：獲取<div>元素的id屬性值

<div id="myDiv">Hello, World!</div>
<script>
var div = document.getElementById("myDiv");
var divId = div.id;
console.log("div的id屬性值為：" + divId);
</script>

在上述案例中，我們定義了一個<div>元素，并給它設置了一個id屬性值為"myDiv"。然后，我們使用JavaScript的getElementById()方法獲取該元素，并將其存儲在一個變量div中。通過div.id，我們可以獲取到該<div>元素的id屬性值，接著在控制臺上輸出該屬性值。

<hr>

案例二：獲取<div>元素的class屬性值

<div class="myClass">Hello, World!</div>
<script>
var div = document.querySelector(".myClass");
var divClass = div.className;
console.log("div的class屬性值為：" + divClass);
</script>

在上述案例中，我們使用querySelector()方法來選擇具有特定類名（"myClass"）的<div>元素。使用div.className，我們可以獲取到該元素的class屬性值，并將其輸出到控制臺上。

<hr>

案例三：獲取<div>元素的自定義屬性值

<div data-name="myData">Hello, World!</div>
<script>
var div = document.querySelector("div");
var divData = div.getAttribute("data-name");
console.log("div的自定義屬性值為：" + divData);
</script>

在上述案例中，我們定義了一個<div>元素，并設置了一個自定義屬性data-name及其值為"myData"。使用getAttribute()方法，我們可以獲取到該元素的自定義屬性值，并將其輸出到控制臺上。

<hr>

：通過以上案例，我們可以看到如何使用JavaScript來獲取<div>元素的屬性值。通過DOM操作，我們可以利用各種屬性值來實現更靈活和動態的網頁交互效果。