What is the reason behind the absence of forEach method on NodeListOf?

Question

What is the reason behind the absence of forEach method on NodeListOf?

Here is the code that I wrote:

    var checkboxes = this.element.querySelectorAll("input[type=checkbox]") as NodeListOf<HTMLInputElement>;
    checkboxes.forEach(ele => {
        var key = ele.name;
        if (data.hasOwnProperty(key)) {
            if (!this.isArray(data[key])) {
                var temp = data[key];
                data[key] = [temp];
            }
        } else {
            data[key] = [];
        }
    });

Unfortunately, an error occurred:

Error TS2339: Property 'forEach' does not exist on type 'NodeListOf'.

interface NodeListOf<TNode extends Node> extends NodeList {
    length: number;
    item(index: number): TNode;
    [index: number]: TNode;
}

interface NodeList {
    entries(): IterableIterator<[number, Node]>;
    forEach(callbackfn: (value: Node, index: number, listObj: NodeList) => void, thisArg?: any): void;
    keys(): IterableIterator<number>;
    values(): IterableIterator<Node>;
    [Symbol.iterator](): IterableIterator<Node>;
}

I am puzzled as to why the 'forEach' method is missing in the 'NodeListOf' interface, since it inherits from 'NodeList' which does have the 'forEach' method. Can anyone shed some light on this issue?

javascript typescript

Answer 1

Answer №1

It is not guaranteed that forEach will be available for this data type - it could exist, but it may not (for example in PhantomJS or IE), so TypeScript prohibits its usage by default. To loop through the elements, you can consider using:

1) Array.from():

Array.from(checkboxes).forEach((el) => { /* perform action */});

2) for-in loop:

for (let i in checkboxes) {
  if (checkboxes.hasOwnProperty(i)) {
    console.log(checkboxes[i]);
  }
}

Answer 2

It is not guaranteed that forEach will be available for this data type - it could exist, but it may not (for example in PhantomJS or IE), so TypeScript prohibits its usage by default. To loop through the elements, you can consider using:

1) Array.from():

Array.from(checkboxes).forEach((el) => { /* perform action */});

2) for-in loop:

for (let i in checkboxes) {
  if (checkboxes.hasOwnProperty(i)) {
    console.log(checkboxes[i]);
  }
}

Answer 3

Answer №2

If you want to avoid TypeScript complaints about using nodelist.forEach, one option is to convert a NodeList to an array. However, this approach can result in adding unnecessary code. A more elegant solution is to instruct TypeScript to recognize the native syntax of nodelist.forEach by including the dom.iterable library in your tsconfig.json file. Below is an example snippet from my own tsconfig.json configuration:

{
  "compilerOptions": {
  "outDir": "./public/js/",
  "noImplicitAny": true,
  "module": "es6",
  "target": "es5",
  "allowJs": true,
  "moduleResolution": "node",
  "rootDir": "src",
  "lib": [
    "es6",
    "dom",
    "dom.iterable"
  ],
  "typeRoots": [
    "node_modules/@types"
  ],
  "removeComments": false
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "public",
    "**/*.spec.ts"
  ]
}

Remember that not all browsers natively support nodelist.forEach, so it may be necessary to polyfill it. You can find more information on how to polyfill NodeList.forEach at https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

Answer 4

If you want to avoid TypeScript complaints about using nodelist.forEach, one option is to convert a NodeList to an array. However, this approach can result in adding unnecessary code. A more elegant solution is to instruct TypeScript to recognize the native syntax of nodelist.forEach by including the dom.iterable library in your tsconfig.json file. Below is an example snippet from my own tsconfig.json configuration:

{
  "compilerOptions": {
  "outDir": "./public/js/",
  "noImplicitAny": true,
  "module": "es6",
  "target": "es5",
  "allowJs": true,
  "moduleResolution": "node",
  "rootDir": "src",
  "lib": [
    "es6",
    "dom",
    "dom.iterable"
  ],
  "typeRoots": [
    "node_modules/@types"
  ],
  "removeComments": false
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "public",
    "**/*.spec.ts"
  ]
}

Remember that not all browsers natively support nodelist.forEach, so it may be necessary to polyfill it. You can find more information on how to polyfill NodeList.forEach at https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

What is the reason behind the absence of forEach method on NodeListOf?

Answer №1

Answer №2

Similar questions

Tips for adjusting the cursor's location on your screen

npm replace: troubleshooting npm script for replacing text across numerous files

What is the process for implementing pagination in vue-tables-2 with a Laravel REST API?

Creating a custom "dashboard" to manage Fabric.js elements

What is the best way to check the API response status in NextJS13?

Creating an array of objects through checkbox validation in AngularJS

TypeScript and the Safety of Curried Functions

How to Efficiently Remove Array Elements by Index in Typescript

Troubleshooting: Angular add/edit form issue with retrieving data from a Span element within an ngFor loop

How can jQuery determine if multiple selectors are disabled and return true?

The value remains unchanged when using Renderer2.setProperty()

Advancement of a grunt chore within a digital platform

If the cursor hovers over an image, the onmouseover function does not work properly

The Angular JS routes are not properly loading the required file from the provided TemplateURL when receiving a response from Node

Prohibit communication by any means

Error encountered when using Prisma Client in conjunction with Next Auth.js

Unhandled rejection error occurred when attempting to redirect to a different page in Next.js version 13, resulting in a NEXT_REDIRECT error

What causes the occurrence of "undefined" after multiple iterations of my code?

ESLint and Prettier are butting heads when trying to run their commands consecutively

Creating a dynamic multiline chart using data from a JSON file with D