Skip to content

Vue2获得页面元素节点

html
<tbody ref="tbody">
    <tr>
        <th>(一)按适用税率计税销售额</th>
        <td>96,216,047.79 </td>
        <td>0.00 </td>
        <td>13%税率的项目</td>
        <td>0.00 </td>
        <td></td>
    </tr>
    <tr>
        <th> 其中:应税货物销售额</th>
        <td>286,306.48 </td>
        <td>0.00 </td>
        <td>9%税率的项目</td>
        <td>0.00 </td>
        <td></td>
    </tr>
</tbody>
<tbody ref="tbody">
    <tr>
        <th>(一)按适用税率计税销售额</th>
        <td>96,216,047.79 </td>
        <td>0.00 </td>
        <td>13%税率的项目</td>
        <td>0.00 </td>
        <td></td>
    </tr>
    <tr>
        <th> 其中:应税货物销售额</th>
        <td>286,306.48 </td>
        <td>0.00 </td>
        <td>9%税率的项目</td>
        <td>0.00 </td>
        <td></td>
    </tr>
</tbody>

WARNING

必须将获取dom元素的代码放到mounted而不是created中

js
export default {
    mounted() {
        for (let n = 0; n < this.$refs["tbody"].childNodes.length; n++) {
            let tr = this.$refs["tbody"].childNodes[n] // 每一行
            for (let n_c = 0; n_c < tr.childNodes.length; n_c++) {
                let td = tr.childNodes[n_c].innerText // 单元格
                console.log(td)
            }   
        }
    },
}
export default {
    mounted() {
        for (let n = 0; n < this.$refs["tbody"].childNodes.length; n++) {
            let tr = this.$refs["tbody"].childNodes[n] // 每一行
            for (let n_c = 0; n_c < tr.childNodes.length; n_c++) {
                let td = tr.childNodes[n_c].innerText // 单元格
                console.log(td)
            }   
        }
    },
}