JavaScript提取特定属性元素并分组排列

使用JavaScript提取和分组HTML元素

本文将介绍如何使用JavaScript提取带有特定属性（例如'DTCode'和'TxtID'）的HTML元素，并按照预定义的格式将它们分组到数组中。

需求

我们需要从HTML文档中提取所有带有'DTCode'和'TxtID'属性的元素。提取的元素需要按照以下格式排列到一个数组中：

• 每个带有'DTCode'属性的元素都应该作为新的一行添加到数组中，其值位于第一列。* 属于同一'DTCode'元素的所有'TxtID'元素都应该添加到同一行的第二列，并以逗号分隔。

JavaScript实现

以下JavaScript代码可以实现上述功能：javascript// 使用querySelectorAll选择所有具有'DTCode'和'TxtID'属性的元素var elements = document.querySelectorAll('[DTCode], [TxtID]');

// 创建一个空数组来存储结果var result = [];

// 迭代选中的元素for (var i = 0; i < elements.length; i++) { var element = elements[i];

// 检查元素是否具有'DTCode'属性 if (element.hasAttribute('DTCode')) { // 如果是，则将元素的'DTCode'值作为新行添加到结果数组中 result.push([element.getAttribute('DTCode')]); // 添加一个空数组作为第二列，用于存储'TxtID'值 result.push([]); }

// 检查元素是否具有'TxtID'属性 if (element.hasAttribute('TxtID')) { // 如果是，则获取当前行的长度 var currentRowLength = result[result.length - 1].length; // 如果当前行长度大于0，则将'TxtID'值添加到第二列 if (currentRowLength > 0) { result[result.length - 1].push(element.getAttribute('TxtID')); } else { // 否则，将'TxtID'值作为新数组添加到当前行 result[result.length - 1] = [element.getAttribute('TxtID')]; } }}

// 在控制台中打印结果数组console.log(result);

代码解释

1. 我们首先使用document.querySelectorAll()方法选择所有具有'DTCode'和'TxtID'属性的HTML元素。2. 然后，我们创建一个名为result的空数组来存储提取的元素。3. 接下来，我们使用for循环遍历选中的元素。4. 对于每个元素，我们检查它是否具有'DTCode'属性。如果是，则将元素的'DTCode'值作为新的一行添加到result数组中，并添加一个空数组作为第二列，用于存储'TxtID'值。5. 如果元素具有'TxtID'属性，我们检查当前行的长度。如果长度大于0，则表示当前行已经有一个'DTCode'值，我们将'TxtID'值添加到第二列。否则，我们将'TxtID'值作为新数组添加到当前行。6. 最后，我们在控制台中打印result数组，该数组包含按照指定格式分组的提取元素。

总结

这段代码演示了如何使用JavaScript提取和分组HTML元素。您可以根据自己的需要修改此代码以提取和分组具有不同属性的元素。