Author: John Au-Yeung

We can get all attributes of an element with JavaScript by using the node.attributes property.

For instance, if we have the following HTML:

<div style='color: red' class="myDiv" id="myDiv">

</div>

Then we can write:

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)

to get all the attributes of the div into an object.

We spread the node.attributes object into an array.

Then we call reduce on the array to add all the attribute.name property with attribute.value into the attrs object with the callback

We return attrs in the callback.

In the 2nd argument, we pass in an empty object to set that as the value of attrs .

Therefore, attrs is:

{style: "color: red", class: "myDiv", id: "myDiv"}

Get All Attributes of an Element Using jQuery

We can use the jQuery each method to loop through all the attributes and the attribute name as the property name and the attribute value as the value of the property.

To do this, we write:

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)

We destructure the div returned from the $ function.

Then we create the empty attrs object.

Next, we call each with node.attrbiutes to loop through all the attributes.

And in the callback, we populate attrs with attribute.name as the property name and attribute.value as the property value.

And we get the same result as before.

We can find indexes of all occurrences of an element in a JavaScript array by using the JavaScript array’s reduce method.

For instance, we can write:

const arr = ["Nano", "Volvo", "BMW", "Nano", "VW", "Nano"].reduce((a, e, i) => {
  if (e === 'Nano')
    a.push(i);
  return a;
}, []);
console.log(arr)

to call reduce on the array where we want to get all indexes of the string 'Nano' from.

To do that, we call it with a callback that takes the a array that we’re going to push the indexes into.

e has the entry of the array we’re checking to see if it’s 'Nano' .

And i is the index of the array entry e .

If e is 'Nano' , we call push with i to push i into the a array.

And then we return a .

The 2nd argument is the initial value of a which is set to an empty array.

And so arr is [0, 3, 5] .

We can find indexes of all occurrences of an element in a JavaScript array by using the JavaScript array’s reduce method.

For instance, we can write:

const arr = ["Nano", "Volvo", "BMW", "Nano", "VW", "Nano"].reduce((a, e, i) => {
  if (e === 'Nano')
    a.push(i);
  return a;
}, []);
console.log(arr)

to call reduce on the array where we want to get all indexes of the string 'Nano' from.

To do that, we call it with a callback that takes the a array that we’re going to push the indexes into.

e has the entry of the array we’re checking to see if it’s 'Nano' .

And i is the index of the array entry e .

If e is 'Nano' , we call push with i to push i into the a array.

And then we return a .

The 2nd argument is the initial value of a which is set to an empty array.

And so arr is [0, 3, 5] .

We can use destructuring to remove a property from all objects in an array.

For instance, we can write:

const array = [{
  "bad": "something",
  "good": "something"
}, {
  "bad": "something",
  "good": "something"
}];

const newArray = array.map(({
  bad,
  ...keepAttrs
}) => keepAttrs)
console.log(newArray)

We want to remove the bad property from each object in array .

To do that, we call array.map with a callback that destructures the object by separating the bad property from the rest of the properties, which are kept in the keepAttrs object.

We return that so we get that as the value.

And so newArray is:

[
  {
    "good": "something"
  },
  {
    "good": "something"
  }
]

We can remove all child nodes from an element with a few node properties.

For instance, if we have the following HTML:

<div>  
  <p>  
    foo  
  </p>  
  <p>  
    bar  
  </p>  
  <p>  
    baz  
  </p>  
</div>

Then we can remove all the p elements by writing:

const node = document.querySelector('div')  
while (node.hasChildNodes()) {  
  node.removeChild(node.lastChild);  
}

We get the div with document.querySelector .

Then we use a while loop to check if there’re any child nodes left with node.hasChildNodes .

And if there are any left, we call node.removeChild with node.lastChild to remove the last child node.