在Web開發中，我們經常需要從網頁中獲取一些自定義屬性的值，例如data-xxx。這些屬性通常是為了在不同的頁面元素之間傳遞參數或提供業務邏輯需要。而JavaScript作為一門非常強大的編程語言，同樣可以幫助我們方便地獲取這些自定義屬性的值。

我們可以使用JavaScript的getAttribute()方法來獲取指定屬性名稱的值，例如獲取一個按鈕元素的data-id屬性的值。以下是一個簡單的示例：

var btn = document.getElementById('testBtn');
var id = btn.getAttribute('data-id');

上述代碼實現了通過getElementById()方法獲取ID為testBtn的按鈕元素，并通過getAttribute()方法獲取了它的data-id屬性的值。這個值可以用于后續的業務邏輯操作中。

在實際開發中，我們可能需要根據某些條件獲取頁面中符合條件的所有元素的自定義屬性值，例如獲取所有class為“test”的按鈕元素的data-id屬性的值。該功能可以通過querySelectorAll()方法結合getAttribute()方法來實現。以下是一個示例：

var btns = document.querySelectorAll('button.test');
var ids = [];
for (var i = 0; i < btns.length; i++) {
ids.push(btns[i].getAttribute('data-id'));
}

上述代碼實現了獲取所有class為“test”的按鈕元素的集合，遍歷集合并通過getAttribute()方法獲取它們的data-id屬性的值，并將這些值放入一個數組中。這樣，我們就可以獲取到所有符合條件的元素的自定義屬性值，進一步應用到其他業務邏輯中。

除了使用getAttribute()方法外，我們還可以直接通過訪問元素的dataset屬性來獲取元素的所有自定義屬性及其值。例如，假設我們有一個表單元素的data-form屬性值為“register”，data-action屬性值為“submit”，我們可以通過以下代碼獲取它們的值：

var form = document.getElementById('myForm');
var data = form.dataset;
console.log(data.form);  // 輸出“register”
console.log(data.action);  // 輸出“submit”

上述代碼先獲取ID為myForm的表單元素，然后通過訪問dataset屬性獲取它的所有自定義屬性及其值。可以看到，在dataset對象中，我們可以直接訪問某個自定義屬性的值，而不需要使用getAttribute()方法來獲取。

最后要提醒的是，雖然JavaScript非常強大，但在獲取頁面中的自定義屬性時，我們需要遵循HTML5標準，確保自定義屬性名符合規范。例如，以data-開頭的屬性名是被允許的。