前端需求实现，表单对比高亮展示（求精进思路）

前端需求实现，表单对比高亮展示

前置条件：两个不同接口的数据对比，由后端返回有变化的字段数组，前端进行对应字段的高亮展示。
本人解决方案：采用js获取对应dom，对表单进行遍历，将后端返回值对应上字段的差异化进行展示。
最终实现代码如下：

 //是否高亮展示
  const isHighLight = () => {
    const inputForm = document
      .querySelector("当前表单页的标识")?.getElementsByTagName("input");
    diffFields?.forEach((item: string) => {
    //HTMLSelectElement.namedItem（）返回指定名称匹配的html
      const inputFormItem = inputForm!.namedItem(item);
      // 选择框处理
      if (lastOpen) {
        if (inputFormItem!.getAttribute("type") === "search") {
          const selectFormItem: any =
            inputFormItem!.parentElement!.nextElementSibling;
          selectFormItem!.style.color = "red";
        }
        inputFormItem!.style.color = "red";
      } else {
        if (inputFormItem!.getAttribute("type") === "search") {
          const selectFormItem: any =
            inputFormItem!.parentElement!.nextElementSibling;
          selectFormItem!.style.color = "black";
        }
        inputFormItem!.style.color = "black";
      }
    });
  };

1. 踩坑一：
   因为发现ant Procomponents中的ProformText本质是input可以通过js获取到
   
   于是乎第一版代码如下：

//是否高亮展示
  const isHighLight = () => {
    const inputForm = document.getElementsByTagName("input");
    diffFields?.forEach((item: string) => {
    //HTMLSelectElement.namedItem（）返回指定名称匹配的html
      const inputFormItem = inputForm!.namedItem(item);
      // 选择框处理
      if (lastOpen) {
        inputFormItem!.style.color = "red";
      } else {
        inputFormItem!.style.color = "black";
      }
    });
  };

后发现ProformSelect所在字段值高亮展示不生效，其展示DOM为获取input父元素的兄弟元素span展示

于是代码修改如下：

 //是否高亮展示
  const isHighLight = () => {
    const inputForm = document.getElementsByTagName("input");
    diffFields?.forEach((item: string) => {
    //HTMLSelectElement.namedItem（）返回指定名称匹配的html
      const inputFormItem = inputForm!.namedItem(item);
      // 选择框处理
      if (lastOpen) {
        if (inputFormItem!.getAttribute("type") === "search") {
          const selectFormItem: any =
            inputFormItem!.parentElement!.nextElementSibling;
          selectFormItem!.style.color = "red";
        }
        inputFormItem!.style.color = "red";
      } else {
        if (inputFormItem!.getAttribute("type") === "search") {
          const selectFormItem: any =
            inputFormItem!.parentElement!.nextElementSibling;
          selectFormItem!.style.color = "black";
        }
        inputFormItem!.style.color = "black";
      }
    });
  };

2. 踩坑二：
   发现getElementsByTagName("input")获取整体页面的input，当筛选项有表单项时，获取到的input为筛选项input，于是代码修改如下：

//是否高亮展示
  const isHighLight = () => {
    const inputForm = document
      .querySelector("当前表单页的标识")?.getElementsByTagName("input");
    diffFields?.forEach((item: string) => {
    //HTMLSelectElement.namedItem（）返回指定名称匹配的html
      const inputFormItem = inputForm!.namedItem(item);
      // 选择框处理
      if (lastOpen) {
        if (inputFormItem!.getAttribute("type") === "search") {
          const selectFormItem: any =
            inputFormItem!.parentElement!.nextElementSibling;
          selectFormItem!.style.color = "red";
        }
        inputFormItem!.style.color = "red";
      } else {
        if (inputFormItem!.getAttribute("type") === "search") {
          const selectFormItem: any =
            inputFormItem!.parentElement!.nextElementSibling;
          selectFormItem!.style.color = "black";
        }
        inputFormItem!.style.color = "black";
      }
    });
  };

以上为代码实现整体过程，求更好想法，或实现代码。