Author: John Au-Yeung

Sometimes, we want to filter or map nodelists with JavaScript.

In this article, we’ll look at how to filter or map nodelists with JavaScript.

Filter or Map Nodelists with JavaScript

To filter or map nodelists with JavaScript, we can use the spread operator to convert the nodelist to an array.

For instance, if we have the following HTML:

<p>
  foo
</p>
<p>
  bar
</p>

Then we can convert the nodelist with the selected p elements and call map and filter on it by writing:

const nodes = document.querySelectorAll('p')
const texts = [...nodes].map(n => n.textContent)
console.log(texts)
const filtered = [...nodes].filter(n => n.textContent.includes('foo'))
console.log(filtered)

We call document.querySelectorAll to return a nodelist with the p elements.

Then we use the spread operator to spread the items in the nodes nodelist into an array.

And then we call map to map the node array to an array of text.

Then we call filter on the array of nodes with a callback to return the nodes with textContent that includes 'foo' .

Therefore, texts is [“n foon”, “n barn”]

And filtered has an array with the first p element.

Conclusion

To filter or map nodelists with JavaScript, we can use the spread operator to convert the nodelist to an array.

Sometimes, we want to search for the immediate children of an element returned by querySelector.

In this article, we’ll look at how to search for the immediate children of an element returned by querySelector.

Search for the Immediate Children of an Element Returned by querySelector

To search for the immediate children of an element returned by document.querySelector , we can use the :scope pseudoselector.

For instance, if we have the following HTML:

<div>  
  <p>  
    hello world  
  </p>  
</div>

Then we can get the p element given the div by writing:

const getChild = (elem) => {  
  return elem.querySelectorAll(':scope > p');  
};  
const div = document.querySelector('div')  
console.log(getChild(div))

We define the getChild function that calls elem.querySelectorAll to get all the p elements that are the immediate child of the given elem .

Then we get the div with querySelector and assign it to div .

And then we call getChild with div to get the p element in the div in a Nodelist.

Conclusion

To search for the immediate children of an element returned by document.querySelector , we can use the :scope pseudoselector.

Sometimes, we want to position a div in a specific coordinate with JavaScript.

In this article, we’ll look at how to position a div in a specific coordinate with JavaScript.

Position a Div in a Specific Coordinate with JavaScript

We can set the style.top and style.left properties to position a div in a specific coordinate with JavaScript.

For instance, we can write:

<div>  
  hello world  
</div>

Then we can set the position of the div by writing:

const d = document.querySelector('div');  
d.style.position = "absolute";  
d.style.left = '10px';  
d.style.top = '20px';

We get the div with document.querySelector .

Then we set its position CSS property to 'absolute' with:

d.style.position = "absolute";

Then we set the left and top CSS properties with:

d.style.left = '10px';  
d.style.top = '20px';

The unit must be specified for left and top.

Conclusion

We can set the style.top and style.left properties to position a div in a specific coordinate with JavaScript.

Sometimes, we want to access a JPEG’s EXIF rotation data on the client-side with JavaScript.

In this article, we’ll look at how to access a JPEG’s EXIF rotation data on the client-side with JavaScript.

Access JPEG EXIF Rotation Data in JavaScript on the Client-Side with JavaScript-Load-Image

We can use the JavaScript-Load-Image library to load EXIF metadata from an image.

To use it, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.18.0/load-image.all.min.js"></script>

<input type='file'>

We add the load-image.all.min.js script to add the metadata parser with the core library.

Then to parse the EXIF metadata, we write:

const input = document.querySelector('input')
input.addEventListener('change', (e) => {
  const [file] = [...e.target.files]
  loadImage.parseMetaData(
    file,
    (data) => {
      console.log(data.exif)
    }, {
      includeExifTags: {
        0x0112: true,
        ifd1: {
          0x0201: true,
          0x0202: true
        },
        0x8769: {
          0x9000: true
        }
      }
    }
  )
})

We get the file from the input and assign it to the file object.

Then we call the loadImage.parseMetaData to parse the EXIF metadata from the image.

Next, we pass in the file object and the callback with the data which has the data.exif property which has the EXIF metadata in an object.

The 3rd argument is an object with the EXIF tags we want to get.

They include 0x0112 for orientation, 0x0201 for thumbnail data offset, 0x0202 for data length, 0x8769 for EXIF pointer, and 0x9000 for EXIF version.

Now when we select an image file, we should see the EXIF data loaded.

Conclusion

We can use the JavaScript-Load-Image library to load EXIF metadata from an image.

Sometimes, we want to add or update an element’s attribute with JavaScript.

In this article, we’ll look at how to add or update an element’s attribute with JavaScript.

Use the setAttribute Method

One way to add or update an attribute is to use the setAttribute method.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.setAttribute('style', 'color: red')

to set the text color of the div to red.

We call setAttribute with 'style' and 'color: red' to add the style attribute with the value in the 2nd argument.

Use Set the Property of the Element

We can also set the property with the attribute name to add an attribute.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.style = 'color: red'

Then we set the style attribute with the ‘color: red’ string.

Conclusion

One way to add or update an attribute is to use the setAttribute method.

Also, we can also set the property with the attribute name to add an attribute.