js queryselector find without attribute

How to use JS querySelector to find elements without attributes

As a web developer, it's common to use the querySelector method to select specific elements from the DOM. However, what if you want to select elements that do not have any attributes?

Using the querySelector method

The querySelector method allows you to select elements using CSS selectors. To select an element without attributes, you can use the following code:

const elementWithoutAttr = document.querySelector('div:not([class]):not([id])');

In this code, we are using the :not() pseudo-class in combination with the attribute selectors [class] and [id] to select div elements without any class or id attributes.

Using the getElementsByTagName method

Another way to select elements without attributes is by using the getElementsByTagName method. This method returns a list of all elements with a given tag name. To select elements without attributes, you can filter this list using the hasAttribute method. Here's an example:

const elements = document.getElementsByTagName('div');
const elementWithoutAttr = Array.from(elements).filter(element => !element.hasAttribute('class') && !element.hasAttribute('id'))[0];

In this code, we are first getting all div elements using the getElementsByTagName method. Then we are converting this list to an array and filtering it using the hasAttribute method to select only those elements without class or id attributes. Finally, we are selecting the first element from this filtered list.

Conclusion

In this post, we have seen two ways to select elements without attributes using JS querySelector and getElementsByTagName methods. While both methods work, the querySelector method is more concise and easier to read.