JavaScript提取特定属性元素并构建二维数组

本文将介绍如何使用JavaScript提取网页中带有特定属性('DTCode'和'TxtID')的元素，并按照预设格式将提取的内容存储到二维数组中。

代码实现javascript// 获取带有DTCode的元素var dtCodeElements = document.querySelectorAll('[DTCode]');

// 获取带有TxtID的元素var txtIdElements = document.querySelectorAll('[TxtID]');

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

// 将带有DTCode的元素放入数组的第一列for (var i = 0; i < dtCodeElements.length; i++) { var row = []; row.push(dtCodeElements[i].getAttribute('DTCode')); resultArray.push(row);}

// 将带有TxtID的元素放到同一行的第二列、第三列等等for (var i = 0; i < txtIdElements.length; i++) { var txtIdElement = txtIdElements[i]; var rowIndex = parseInt(txtIdElement.getAttribute('rowIndex')) || 0; var colIndex = parseInt(txtIdElement.getAttribute('colIndex')) || 1; if (!resultArray[rowIndex]) { resultArray[rowIndex] = []; } resultArray[rowIndex][colIndex] = txtIdElement.getAttribute('TxtID');}

console.log(resultArray);

代码解析

获取目标元素: - 使用querySelectorAll('[DTCode]')和querySelectorAll('[TxtID]')分别获取页面中所有带有'DTCode'和'TxtID'属性的元素。2. 创建结果数组: - 创建一个空数组resultArray用于存储最终结果。3. 处理'DTCode'元素: - 遍历dtCodeElements，将每个元素的'DTCode'属性值提取出来，并作为新数组row的第一个元素。然后将row数组添加到resultArray中，这确保了所有'DTCode'元素的值都位于结果数组的第一列。4. 处理'TxtID'元素: - 遍历txtIdElements，获取每个元素的'rowIndex'和'colIndex'属性值，用于确定该元素在resultArray中的位置。 - 如果resultArray中不存在对应行，则先创建该行。 - 将当前'TxtID'元素的'TxtID'属性值存储到resultArray对应位置。

总结

通过上述代码，我们可以方便地提取带有特定属性的元素，并根据需求将其组织成二维数组。这种方法在处理网页数据时非常实用，例如从表格中提取数据或构建自定义数据结构等场景。