在前端開發中，JavaScript 是最常用的腳本語言之一，它可以通過讀取數據從而實現對頁面的動態控制。JavaScript 通過各種手段可以讀取多種數據類型，并將其轉化為前端開發者可以使用的格式。下面就讓我們來看看 JavaScript 讀取數據的相關知識。
一、從 HTML 頁面中讀取數據
當前頁的 HTML 文件可以作為 JavaScript 的數據源之一。比如在下面這個 HTML 文件中，我們想要用 JavaScript 讀取 ul 標簽內的所有 li 標簽，我們可以通過以下代碼實現：

<p>HTML 代碼</p>
<ul id="list">
<li>JavaScript</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<br>
<p>JavaScript 代碼</p>
var list = document.getElementById("list");
var items = list.getElementsByTagName("li");

在這個例子里，我們用 JavaScript 獲取了 id 為 list 的 ul 標簽，并從 ul 標簽中取出了所有 li 標簽賦給了 items 變量。
二、讀取 JSON 格式的數據
JSON 是現在最常用的數據格式之一，它可以表示對象、數組、數字等多種數據類型。我們可以通過 JavaScript 的 JSON API 來解析和讀取 JSON 格式的數據。比如在下面的例子中，我們有一個 JSON 文件，里面存儲了一堆學生和他們的成績信息：

<p>JSON 代碼</p>
{
"students": [
{"name": "張三", "score": 99},
{"name": "李四", "score": 89},
{"name": "王五", "score": 79}
]
}
<br>
<p>JavaScript 代碼</p>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var data = JSON.parse(xmlhttp.responseText);
console.log(data.students[0].name); // 輸出 "張三"
}
};
xmlhttp.open("GET", "students.json", true);
xmlhttp.send();

在這個例子中，我們通過 XMLHttpRequest 對象發送 HTTP 請求到 students.json 文件，然后用 JSON.parse() 方法將返回的 JSON 格式數據轉化為 JavaScript 中的對象，最后按照 JavaScript 中的數據格式來訪問它。
三、讀取 XML 格式的數據
XML 是一種廣泛使用的數據格式，它可以表示各種結構化數據。我們可以通過 JavaScript 的 DOM API 讀取 XML 格式的數據。比如在下面的例子中，我們有一個 XML 文件，里面存儲了一本書的信息：

<p>XML 代碼</p>
<book>
<title>JavaScript 秘籍</title>
<author>John Resig</author>
<publisher>O'Reilly</publisher>
<price>39.99</price>
</book>
<br>
<p>JavaScript 代碼</p>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var xmlDoc = xmlhttp.responseXML;
console.log(xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue); // 輸出 "JavaScript 秘籍"
}
};
xmlhttp.open("GET", "book.xml", true);
xmlhttp.send();

在這個例子中，我們通過 XMLHttpRequest 對象發送 HTTP 請求到 book.xml 文件，并用 responseXML 屬性將返回的 XML 格式數據轉化為 JavaScript 中的對象，最后按照 JavaScript 中的數據格式來訪問它。
以上就是 JavaScript 讀取數據的相關知識。在實際開發中，不管是從 HTML 頁面、JSON 文件還是 XML 文件中讀取數據，我們都需要熟悉相關的 API，才能高效地開展工作。