在web開發中，JavaScript是一門非常重要的編程語言。其中，JavaScript最常用的功能之一就是調用HTML元素。因為HTML是網頁的基礎和重要的組成部分，而JavaScript則可以幫助我們實現豐富的交互效果，使網頁變得更加生動有趣。
那么在JavaScript中，如何調用HTML元素呢？很簡單，我們只需要使用DOM（Document Object Model）操作就可以實現。下面來看一個簡單的例子：假設我們有一個網頁，其中有一個id為“example”的div：

<div id="example">
<p>這是一個示例</p>
</div>

如果我們想通過JavaScript來修改這個div中的段落文本內容，那么我們只需要先獲取到這個div元素，然后直接修改其中的p標簽內容即可。下面是示例代碼：

<script>
var exampleDiv = document.getElementById("example");
exampleDiv.children[0].innerHTML = "這是修改后的段落內容！";
</script>

在上面的代碼中，我們通過getElementById方法獲取了id為“example”的div元素，并將其保存到exampleDiv變量中。接著，我們通過訪問exampleDiv的children屬性來獲取其下的子元素（也就是段落p標簽），最后使用innerHTML屬性修改其內容即可。
除此之外，還有其他一些DOM操作可以實現JavaScript調用HTML元素，例如getElementsByClassName()、getElementsByTagName()等等。這些方法都可以讓我們方便地獲取到HTML元素，并進行各種操作。
在實際開發中，我們經常會使用JavaScript來添加、刪除、修改HTML元素，這些操作也都是基于DOM的。例如，我們可以通過以下代碼添加一個新的段落到上面的示例中：

<script>
var newParagraph = document.createElement("p");
newParagraph.innerHTML = "這是新添加的段落！";
exampleDiv.appendChild(newParagraph);
</script>

在上面的代碼中，我們使用createElement方法創建了一個新的p標簽，然后設置其內容為“這是新添加的段落！”。最后，我們使用appendChild方法將其添加到exampleDiv中，這樣就成功往頁面中動態添加了一個新的段落。
除了添加、刪除、修改HTML元素之外，還可以通過JavaScript來動態設置元素屬性，例如樣式、類名、ID、文本值等等。下面是一個例子：假設我們有一個按鈕，想設置它的樣式和點擊事件：

<button id="myButton">點擊我！</button>
<br>
  <script>
var myButton = document.getElementById("myButton");
myButton.style.color = "red";               //修改樣式
myButton.className = "myClass";            //修改類名
myButton.onclick = function() {            //添加事件
alert("點擊了按鈕！");
};
</script>

在上面的代碼中，我們使用getElementById方法獲取id為“myButton”的按鈕元素，并將其保存到myButton變量中。接著，我們通過設置其style屬性，將其字體顏色改為紅色。同時，我們還修改了其類名，以方便對其進行樣式修改。最后，在onclick事件中添加了一個匿名函數，使得點擊按鈕時會彈出一個提示框。
總結起來，JavaScript調用HTML元素的方法主要有以下幾種：通過getElementById方法獲取元素、通過getElementsByClassName和getElementsByTagName方法獲取元素集合、通過DOM操作修改元素屬性和內容、通過動態添加、刪除、移動元素等。掌握這些方法，可以幫助我們更好地實現各種交互效果，讓網頁變得更加豐富多彩。