Retrieving unique attributes from script tag (excluding data- prefix)

I am dealing with multiple sites that contain the following code snippets:

<script async custom-element="amp-sidebar"....
<script async custom-element="amp-slider"....

My aim is to extract all the custom-element properties using vanilla JavaScript exclusively. Since there are no IDs for the script tags and custom element is a non-standard attribute, I am considering adding a data- prefix.

I attempted the following approach, however it did not yield the desired results. 

document.querySelectorAll('script[custom-element]')
javascripttypescript

Answer №1

If you're working with a NodeList obtained from .querySelectorAll() and want to use the .map() function, it's best to first convert the NodeList into a regular Array by destructuring it using [...NodeList] or Array.from(NodeList). Then, you can easily utilize the .map() function as an iterator:

const invalidAttrVal = [...document.querySelectorAll("script[custom-element]")].map(el => 
  el.getAttribute("custom-element") 
);

console.log( invalidAttrVal );
<script async custom-element="amp-sidebar"></script>
<script async custom-element="amp-slider"></script>

This process will result in the following Array being created:

[
  "amp-sidebar",
  "amp-slider"
]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Using_map_generically_querySelectorAll

https://github.com/airbnb/javascript#arrays--from-iterable

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

AngularJS implementation for a confirmation dialog with data

I need help creating a confirmation dialog box for user action verification. Here's the situation: I have a table with multiple events, and users can choose to delete an event. This is how the table is structured: <tbody> <tr ng-repeat= ...

javascriptangularjs

Alter and send back an object from within an asynchronous function

I'm struggling to access the updated fields of an object (userTracker) within asynchronous JavaScript code. Even after modifying the object inside a function (fetchUsers), it still returns as undefined. How can I successfully achieve this? This is wh ...

javascriptnode.jsexpressmongooseasync-await

Retrieve a particular attribute from the response data using Typescript

Here is an example of the response data format: In a Typescript environment, how can I extract the value of the "_Name" property from the first item inside the "ResultList" array of the response data? By utilizing this.responseData$.subscribe(val => c ...

javascriptarraystypescriptrxjs

What is the best way to repurpose the vuex module for multiple components?

Currently, I am tackling the pagination aspect of a project that involves handling a large amount of data. My initial instinct was to store this data within Vuex. However, I ended up implementing all the logic in the Vuex store module. Now, my goal is to f ...

javascriptvue.jsvuejs2vuex

Take away the CSS class from an element after reCAPTCHA verification is complete in Next.js

I'm struggling with removing the CSS class btn-disabled from the input button element upon successful verification of a form entry. I have implemented a function called enableForm to remove the btn-disabled CSS class when reCAPTCHA is verified. Howe ...

javascripthtmlcssreactjsnext.js

What are some ways to transfer data between parent and child components in Vue.js?

I have defined two different components: 'permissionTitle':customTitle, 'permissionItem':customItem, When displayed in the main template, they are structured as follows: <permissionTitle content="Brand Management"> ...

javascriptvue.js

Transmitting JSON data to a servlet with Ajax

I'm embarking on the journey of creating a straightforward online BMI calculator. As a novice in utilizing Ajax with servlets, I am currently exploring how to transmit a JSON object to a servlet. Just to give you an example, the object appears as foll ...

javascriptjavajqueryajaxservlets

unable to view the outcome of an ajax request

I am encountering an issue where I am trying to save an AJAX response to the Post PHP variable and display it on the same page. However, I keep getting a "Notice: Undefined index" error. I believe the problem lies in the success part of the AJAX call. Can ...

javascriptphpjqueryajax

Click the ng-focus button to focus the textarea

I am in need of a solution where I can trigger a button within the ng-repeat loop and focus on a textarea specific to that item in the loop. HTML <div ng-repeat="item in items"> <textarea focus-when="showTextarea">{{ item }}</textarea> ...

javascripthtmlangularjsangularjs-ng-repeat

Securing Credit Card Numbers with Masked Input in Ionic 3

After testing out 3-4 npm modules, I encountered issues with each one when trying to mask my ion-input for Credit Card numbers into groups of 4. Every module had its own errors that prevented me from achieving the desired masking result. I am looking for ...

javascriptangularnpmionic3

Setting up Cypress.config file for SQL database testing with Cypress

Currently, I am looking to experiment with SQL databases. I have SqlWorkbench installed and have mysql added in my package file. However, I encountered an issue while attempting to run Cypress as SyntaxError: Unexpected token 'export' The probl ...

typescriptcypress

Warning: ComponentMounts has been renamed. Proceed with caution

I'm encountering a persistent warning in my application and I'm struggling to resolve it. Despite running npx react-codemod rename-unsafe-lifecycles as suggested, the error persists and troubleshooting is proving to be challenging. The specific w ...

javascriptreactjs

Having trouble with Angular 2 Routing and loading components?

I am facing an issue with Angular 2 where it is searching for my component in app/app/aboutus.component, but I cannot pinpoint the source of the problem. Here is my app.component.ts code: import { Component } from '@angular/core'; import { ROUT ...

angularjstypescriptangularangular-routing

Depicting a potential value within Typescript

Coming from a background of working with functional languages that utilize monadic constructs like Option or Optional, I have noticed libraries such as fp-ts that provide these features in TypeScript/JavaScript. However, I am curious to understand how deve ...

typescript

Executing asynchronous actions with useEffect

Within my useEffect hook, I am making several API requests: useEffect(() => { dispatch(action1()); dispatch(action2()); dispatch(action3()); }, []); I want to implement a 'loading' parameter using async/await functions in the hook ...

javascriptreactjsasync-awaitreact-hooks

Codacy's eslint configuration file

While utilizing Codacy for code quality monitoring, I'd like to have a preview of what Codacy will detect before pushing any changes. It's apparent that Codacy incorporates eslint and other tools for this purpose. Is there a possibility to genera ...

javascriptwebstormeslintsoftware-qualitycodacy

retrieving particular information from within a Firebase array

My Firebase document contains a list with various properties such as name and imgUrl. Currently, I am facing an issue with extracting only the "name:" information from the list in Firebase Cloud Firestore so that I can determine how many times a specific n ...

javascriptfirebasegoogle-cloud-firestorenext.js

Is it possible to create a "private" variable by utilizing prototype in JavaScript?

In my JavaScript code, I am trying to have a unique private variable for each "instance," but it seems that both instances end up using the same private variable. func = function(myName) { this.name = myName secret = myName func.prototype.tel ...

javascriptclosuresprototype

What is the significance of including the keyword 'default' when exporting a component with withStyles?

When I create a simple React component using Mui's withStyles HOC, I find that I am required to export the component as default. Why is it not possible to use the HOC directly in the return statement of the functional component? Is there something sp ...

javascriptreactjsmaterial-uiexporthigher-order-components

Execute a selector on child elements using cheerio

I am struggling to apply selectors to elements in cheerio (version 1.0.0-rc.3). Attempting to use find() results in an error. const xmlText = ` <table> <tr><td>Foo</td><td/></tr> <tr><td>1,2,3</td> ...

typescriptcheerio