Emulate behavior of getElementById of IE7

Question

Background

I have a web application that currently runs on the Edge Internet Explorer mode. I want to port this application to modern browsers like Edge or Chrome.

The JavaScript in this application relys on IE7 doc mode (https://learn.microsoft.com/en-us/internet-explorer/ie11-deploy-guide/img-ie11-docmode-lg). For example, this application uses getElementById() heavyly, and it assumes that getElementById() performs a case-insensitive match on both the ID and NAME attributes.

Problem

Of course, you can rewrite this application based on the specs of getElementById() in modern JavaScript API. But this application has so many JavaScript files, that it will require a fair amount of non-obvious work. So I am looking for some workarounds.

Question

Is there any way to emulate the behavior of getElementById() of IE7 doc mode on modern browsers?

For example, how to reverse-polyfill the behavior of getElementById() to imitate the behavior of it on IE7?

Answer 1

Get a list of all elements which might have the name or id that you want, and then filter them to find the first one that matches.

const getElementCaseInsensitivelyByNameOrId = (nameOrId) => {
  // Start by getting a list of prospective elements.
  const prospectiveElements = document.querySelectorAll("[id], [name]");

  // Convert to an array for access to the methods on array.prototype
  const arrayProspectiveElements = [...prospectiveElements];

  // Lower case the search term
  const searchTerm = nameOrId.toLowerCase();

  // Perform the search
  const firstMatch = arrayProspectiveElements.find(element => element.id?.toLowerCase() === searchTerm || element.name?.toLowerCase() === searchTerm);

  return firstMatch;
};

const foo = getElementCaseInsensitivelyByNameOrId("FOO");
const bar = getElementCaseInsensitivelyByNameOrId("BAR");
const sirNotAppearingInThisDocument = getElementCaseInsensitivelyByNameOrId("sirNotAppearingInThisDocument");

console.log({
  foo,
  bar,
  sirNotAppearingInThisDocument
});

<div id="Foo">Foo</div>
<input name="bAR" value="bAR">

Or, more concisely:

const getElementCaseInsensitivelyByNameOrId = (nameOrId) => {
    const t = nameOrId.toLowerCase();
    return [...document.querySelectorAll("[id], [name]")].find(e => e.id?.toLowerCase() === t || e.name?.toLowerCase() === t);
}