JavaScript 獲取 innerHTML 返回元素的 value 屬性值：正確姿勢與常見誤區

問題場景

雙擊 <tr> 獲取第一個 <td> 的 value 屬性值：

<tr ondblclick="dbtd(this)">
    <td value="目標值">內容</td>
    ...
</tr>

function dbtd(element) {
    alert(element.children[0].innerHTML); // 獲取的是內部 HTML，而非 value 屬性
}

核心誤區

• innerHTML 返回元素**內部 HTML 字符串**（標簽之間的內容）
• value 是**屬性**，需通過屬性訪問 API 獲取
• <td> 標準屬性**不包含 value**，這可能是自定義屬性或誤解

正確獲取方式

方法一：getAttribute（通用，支持自定義屬性）

function dbtd(element) {
    var td = element.children[0]; // 或 element.querySelector('td')
    var value = td.getAttribute('value'); // 獲取 value 屬性
    alert(value);
}

方法二：attributes 集合（原始回答方案）

element.children[0].attributes["value"].nodeValue
// 或現代寫法
element.children[0].attributes.value?.value

方法三：dataset 訪問 data-* 屬性（HTML5 標準做法）

<td data-value="目標值">內容</td>

// JS
td.dataset.value; // 直接獲取

最佳實踐建議

1. 語義化 HTML：使用 data-* 存儲業務數據

<tr data-id="123" data-name="張三" ondblclick="handleDblClick(this)">
    <td>張三</td>
    <td>25</td>
</tr>

function handleDblClick(row) {
    console.log(row.dataset.id);   // "123"
    console.log(row.dataset.name); // "張三"
}

2. 避免在 <td> 使用 value 屬性

<td>、<tr> 等表格元素**無標準 value 屬性**，瀏覽器可能忽略或導致不可預期行為。僅表單元素（<input>, <select>, <option> 等）有標準 value。

3. 現代事件綁定（推薦）

document.querySelectorAll('tr[data-id]').forEach(row => {
    row.addEventListener('dblclick', function() {
        const id = this.dataset.id;
        // 業務邏輯
    });
});

總結