JavaScript 是一門強大的編程語言，它不僅可以對 HTML 進行交互式操作，而且可以讀取和修改 HTML 的內容。在本文中，我們將深入探討 JavaScript 如何讀寫 HTML。
讀取 HTML 內容
在 JavaScript 中，我們可以使用多種方法來讀取 HTML 的內容，例如使用 document 對象來獲取 HTML 元素的內容。以下是一個示例，它使用 innerHTML 屬性來獲取 div 元素的 HTML 內容：

<p>示例：</p>
<div id="myDiv">這是一個 div 元素。</div>
<script>
var content = document.getElementById("myDiv").innerHTML;
console.log(content);
</script>

上面的示例中，首先使用 document.getElementById 方法獲取 id 為 myDiv 的 div 元素，然后使用 innerHTML 屬性獲取其中的 HTML 內容，并將其打印到控制臺中。
我們還可以使用 document.getElementByTagName 方法獲取所有指定標簽名稱的元素內容。以下是一個示例，它使用 getElementByTagName 方法獲取所有的 p 元素，并將它們的內容輸出到控制臺中：

<p>示例：</p>
<p>這是第一個 p 元素。</p>
<p>這是第二個 p 元素。</p>
<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerHTML);
}
</script>

上面的示例中，通過使用 getElementsByTagName 方法獲取了所有的 p 標簽元素，然后使用 for 循環輸出它們的 HTML 內容。
修改 HTML 內容
JavaScript 也可以修改 HTML 內容，例如改變元素的樣式、屬性和內容等。以下是一個示例，它使用 innerHTML 屬性來改變 div 元素的內容：

<p>示例：</p>
<div id="myDiv">這是原始內容。</div>
<script>
document.getElementById("myDiv").innerHTML = "這是新內容。";
</script>

上面的示例中，使用 innerHTML 屬性改變了 id 為 myDiv 的 div 元素的內容。
我們還可以使用 JavaScript 來更改元素的屬性，如 id、class、src、href、style 等。以下是一個示例，它使用 setAttribute 方法來更改 div 元素的樣式：

<p>示例：</p>
<div id="myDiv">這是一個 div 元素。</div>
<script>
document.getElementById("myDiv").setAttribute("style", "color:red;");
</script>

上面的示例中，使用 setAttribute 方法更改了 div 元素的樣式為紅色。
結語
JavaScript 是一個功能強大的編程語言，它提供了多種方法來讀寫 HTML 內容。通過使用 document 對象及其相關方法，我們可以輕松地獲取 HTML 元素的內容，并對其進行修改。這不僅可以為網站增加交互性，同時也為 JavaScript 開發者提供了更多的可能性。