Determine whether a child element is missing a certain class

I am currently investigating whether a child element lacks a specific class.

The elements in question are:

<g id="note1">
    <path id="Barline1" d="M55.837,19.278h0.249c0.11,0,0.199,0.089,0.199,0.199V40.56c0,0.11-0.089,0.199-0.199,0.199h-0.249c-0.11,0-0.199-0.089-0.199-0.199V19.478C55.638,19.368,55.727,19.278,55.837,19.278z"/>
    <path class="root" d="M54.113,38.945c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C52.499,39.244,53.296,38.945,54.113,38.945z"/>
</g>
<g id="note2">
    <path id="BarLine2" d="M70.852,16.788h0.249c0.11,0,0.199,0.089,0.199,0.199v21.082c0,0.11-0.089,0.199-0.199,0.199h-0.249c-0.11,0-0.199-0.089-0.199-0.199V16.987C70.653,16.877,70.742,16.788,70.852,16.788z"/>
    <path class="root" d="M69.127,36.454c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C67.513,36.753,68.31,36.454,69.127,36.454z"/>
    <path class="interval third" d="M69.127,31.473c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C67.513,31.772,68.31,31.473,69.127,31.473z"/>
</g>

One g element with the id="note1" does not contain any child elements with the class "interval". However, the other g element with id="note2" does have such a child. In order to determine if an element indeed has no child with the class "interval", I've attempted the following JavaScript code snippet:

for(var n=0;n<document.getElementsByClassName('root').length;n++){
    if(document.getElementById('note'+(n+1)).getElementsByClassName('interval') ){
          //some child element has the class
     } else {
          //no child element has the class
     }
}

It seems that I'm encountering an error message indicating that the property or method document.getElementsByClassName is not supported for both g elements. Based on this example, my expectation was for the code to return all elements of the desired class under the specified ID. Any insights into what mistake I may be making or suggestions for alternative approaches?

javascriptcssclasschildrengetelementsbyclassname

Answer №1

Discover the power of element.querySelectorAll() :

 if(document.getElementById('message'+(i+1)).querySelectorAll('.section').length > 0){
     /*Found elements with the CSS class 'section'*/
 }
 else{
     /*No elements with the CSS class 'section' were found*/
 }

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

Transforming a redux-thunk action that returns a promise into using async/await: Step-by-step guide

I've been working on integrating redux-thunk into Next.js and everything is working well when my thunk returns a promise. However, I'm trying to figure out how to convert it to use async/await instead. I came across this helpful article (how to a ...

javascriptreactjsasynchronousreduxredux-thunk

Using jQuery to insert a new string into the .css file

I'm currently working on a jQuery function to make my font size responsive to changes in width. While I am aware of other options like Media Query, I prefer a solution that offers smoother transitions. Using vw or vh units is not the approach I want t ...

javascriptjqueryhtmlcss

Is there a way to extract only the titles from this JSON array? (using JavaScript/discord.js)

How can I extract the "title" values from this JSON array using JavaScript? I need to retrieve all the "title"s and store them in a new array like shown below: array( `hey title1`, `hey title2`, ... ) I am unsure of the number of titles we will receive, b ...

javascriptarraysjsondiscord.js

Create a solution that is compatible with both web browsers and Node.js

I am developing a versatile library that can be utilized in both the browser and in node environment. The project involves three json config files, with the latter two extending the tsconfig.json. tsconfig.json (contains build files) tsconfig.browser.js ...

javascriptnode.jstypescriptbrowser

The content located at “http://localhost:3000/public/static/” was restricted because of a mismatch in MIME type (text/html) which triggered the X-Content-Type-Options:nosniff protocol

https://i.stack.imgur.com/7Etn7.png Every time I try to run the server with nodemon, I keep encountering the error mentioned in the title. Below is the code snippet from the JavaScript file: const express = require('express') const path = requir ...

javascriptexpress

Creating a Form with Dynamic HTML when Button is Clicked

I have been working on enhancing the functionality of my website app located at , but unfortunately, I have not been successful so far. My goal is to introduce a vendor information form with just one click of a button and then enable users to add products ...

javascriptjqueryhtmlonclickdynamic-html

Mastering the Art of Crafting an Effortless Slide Showcase

I have created a carousel that works fine except for one issue: when I reach the last image or go back from the first image, I want the image to be displayed. For example, when you click the right arrow after reaching the last image, it should show the fir ...

javascriptjquerycssslider

How to identify generic return type in TypeScript

My goal is to develop a core dialog class that can automatically resolve dialog types and return values based on the input provided. I have made progress in implementing this functionality, but I am facing challenges with handling the return values. Each ...

javascripttypescriptgenericstypes

Can you explain the functionality of the combination selector "AB," where "A" and "B" represent any selectors?

I've been delving into the concept of the "combination selector" by referring to resources on MDN. This selector involves selecting elements that match both criteria A and B simultaneously when they are placed together. Can someone shed some light on ...

htmlcssselector

Incorporate an assortment of facial features into BufferGeometry using three.js

If I have a BufferGeometry, I can easily assign its vertices using an array of type Float32Array with the following code snippet: geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); However, is there a way to set the f ...

javascriptthree.jsgeometryvertices

What exactly does "blocking and tackling" refer to in the Angular2 documentation?

As I delved into the online documentation for angular2, I stumbled upon a puzzling term - "blocking and tackling" in the ADVANCED - Angular Module chapter (https://angular.io/docs/ts/latest/guide/ngmodule.html). ... "It's all just basic blocking and t ...

javascriptangular

Switch up the image automatically after a short amount of time

Hello, I am a beginner in javascript and I have a question. Is it possible for javascript to automatically change an image after a few seconds? This is for my college project and it's quite messy. Below is the code snippet I am working with: <!DOC ...

javascripthtml

Managing browser cache while developing locally

During development testing, how can you selectively disable caching for local scripts and styles while keeping cache enabled for external ones? Ideally in Firefox. When editing css, js, or sprite files on my developmental site, I find myself needing to fr ...

javascripthtmlfirefoxcachingmaps

The link to view media on Instagram under the username is currently not functioning

A few months ago, I developed a small web app that generated stylized Instagram galleries for public profiles by retrieving the JSON from instagram.com/username/media (without using the API). However, when I visited my personal website today, I noticed tha ...

javascriptphpjsonapiinstagram

Arrangement of SVGs within one another

I am working on achieving a layout with multiple SVG elements arranged in a specific way. This layout involves a top-level gray box containing several orange boxes, each of which holds red boxes. The width and height of the top-level SVG are known. https: ...

htmlcsssvg

Contrasting the uses of element(...) versus element(...).getWebElement() in Protractor

What is the advantage of using element(...).getWebElement() instead of element(...) when they both perform similarly? Why are there two different APIs for the same purpose? ...

javascriptseleniumselenium-webdriverprotractor

Scrollable container with jQuery draggable functionality

I am currently working on implementing a draggable list that I want to contain within a scrollable div. $( ".draggable" ).draggable(); Here is the fiddle I have created for this: http://jsfiddle.net/YvJhE/660/ However, the issue I am facing is that the ...

javascriptjqueryhtmlcssdraggable

Creating a custom name for a specific node_module

Previously, we had a folder containing various typescript modules. However, we have now transformed that folder into a package. An issue arises with the existing code, as it uses webpack aliases for that particular folder. I am attempting to have those al ...

javascriptwebpackvue-cli

Steps for updating object state in React

Here is the code snippet that I am working with: this.state = { user: null } I am trying to figure out how to set the name property of the user when it exists. Unfortunately, using this syntax this.setState({user.name: 'Bob') doesn't ...

javascriptreactjs

Ending or stopping based on data retrieved from an ajax call

Currently, I have a php script that includes an image which, upon clicking, redirects the user to a different page. Additionally, there is an ajax/jQuery function in place to check if the user is logged in or not. When the user clicks on the link, the aja ...

javascriptphpjqueryajax