JavaScript DOM操作：提取特定属性元素并格式化输出

使用JavaScript提取并格式化带有特定属性的元素

本文将介绍如何使用JavaScript DOM操作来提取HTML中带有特定属性（例如'DTCode'和'TxtID'）的元素，并将它们按指定格式存储到数组中。

目标：

将带有'DTCode'的元素和带有'TxtID'的元素提取出来，并按以下规则存储到一个数组中：

1. 每行第一个元素为带有'DTCode'元素的'DTCode'属性值。2. 同一行后续元素为该'DTCode'元素后所有连续的带有'TxtID'元素的'TxtID'属性值，用','分隔。3. 遇到下一个'DTCode'元素则换行。

**代码示例：**javascript// 获取所有带有'DTCode'和'TxtID'的元素const dtElements = document.querySelectorAll('[DTCode]');const txtElements = document.querySelectorAll('[TxtID]');

// 将元素放入read_buf数组const read_buf = [...dtElements, ...txtElements];

// 创建结果数组和当前行数组const resultArray = [];let currentRow = [];

// 遍历read_buf数组for (let i = 0; i < read_buf.length; i++) { const element = read_buf[i];

// 判断是带有'DTCode'还是'TxtID'的元素 if (element.hasAttribute('DTCode')) { // 如果当前行不为空，则换行 if (currentRow.length > 0) { resultArray.push(currentRow.join(',')); currentRow = []; } // 将带有'DTCode'的元素放入第一列 currentRow.push(element.getAttribute('DTCode')); } else if (element.hasAttribute('TxtID')) { // 将带有'TxtID'的元素放入当前行 currentRow.push(element.getAttribute('TxtID')); }}

// 将最后一行放入结果数组if (currentRow.length > 0) { resultArray.push(currentRow.join(','));}

console.log(resultArray);

代码解释：

1. 使用querySelectorAll方法获取所有带有'DTCode'和'TxtID'属性的元素。2. 使用展开语法(...)将所有元素合并到read_buf数组中。3. 遍历read_buf数组，根据元素属性判断是'DTCode'还是'TxtID'。4. 如果是'DTCode'，则检查当前行是否为空，不为空则将当前行加入结果数组并清空当前行，然后将'DTCode'属性值加入当前行。5. 如果是'TxtID'，则直接将'TxtID'属性值加入当前行。6. 最后将最后一行加入结果数组。

总结：

通过以上代码，您可以轻松地提取HTML中带有特定属性的元素，并根据您的需求进行格式化输出。这种方法在处理大量数据和动态生成内容时非常有用。