Struggling to navigate the DOM using JavaScript and looking for guidance?

Question

Struggling to navigate the DOM using JavaScript and looking for guidance?

I have been searching for an answer to this question without any luck. I am wondering if someone can assist me with finding a solution...

I need help using JavaScript (not jQuery) to retrieve the class of the following li element when searching for 'Chicken' or any other specified value.

<li class='113252'>
    <span>Chicken</span>
</li>

I would like the JavaScript code to return the class of the li element based on the span value provided (in this case, Chicken).

Thank you in advance!

javascript dom

Answer 1

Answer №1

Give this a try:

var spanArray = document.getElementsByTagName('span');

for (var i=0; i<spanArray.length; i++) {
    if(spanArray[i].innerHTML.toUpperCase() === 'CHICKEN')
    {
        alert(spanArray[i].parentNode.className);
        break;
    }
}

While I usually work with jQuery, the code above seems to function well in the provided fiddle: http://jsfiddle.net/FranWahl/fCzYc/2/ (Updated with suggested break; after match)

You can enhance type checking for the parentNode to ensure it is an li and so on, but this should give you a good starting point.

As for efficiency in larger documents, that's something I'm not entirely sure about.

Edit
After reviewing some comments, I have updated my code above to include the recommended break by ajax333221.

Dennis suggested that it would be better to call getElementByTagName on the ul. Since you may have an li without a ul, I separated this code as I am unsure if there are ul tags present in the OP's scenario.

Code for querying against each ul (jsFiddle here)

var ulArray = document.getElementsByTagName('ul');
var parentFound = false;

for (var i = 0; i < ulArray.length; i++) {
    var spanArray = ulArray[i].getElementsByTagName('span');

    for (var i = 0; i < spanArray.length; i++) {
        if (spanArray[i].innerHTML.toUpperCase() === 'CHICKEN') {
            alert(spanArray[i].parentNode.className);
            parentFound = true;
            break;
        }
    }

    if(parentFound)
    {
        break;
    }
}

Answer 2

Give this a try:

var spanArray = document.getElementsByTagName('span');

for (var i=0; i<spanArray.length; i++) {
    if(spanArray[i].innerHTML.toUpperCase() === 'CHICKEN')
    {
        alert(spanArray[i].parentNode.className);
        break;
    }
}

While I usually work with jQuery, the code above seems to function well in the provided fiddle: http://jsfiddle.net/FranWahl/fCzYc/2/ (Updated with suggested break; after match)

You can enhance type checking for the parentNode to ensure it is an li and so on, but this should give you a good starting point.

As for efficiency in larger documents, that's something I'm not entirely sure about.

Edit
After reviewing some comments, I have updated my code above to include the recommended break by ajax333221.

Dennis suggested that it would be better to call getElementByTagName on the ul. Since you may have an li without a ul, I separated this code as I am unsure if there are ul tags present in the OP's scenario.

Code for querying against each ul (jsFiddle here)

var ulArray = document.getElementsByTagName('ul');
var parentFound = false;

for (var i = 0; i < ulArray.length; i++) {
    var spanArray = ulArray[i].getElementsByTagName('span');

    for (var i = 0; i < spanArray.length; i++) {
        if (spanArray[i].innerHTML.toUpperCase() === 'CHICKEN') {
            alert(spanArray[i].parentNode.className);
            parentFound = true;
            break;
        }
    }

    if(parentFound)
    {
        break;
    }
}

Answer 3

Answer №2

Although not fully comprehensive, this code snippet serves two main purposes:

It recursively scans through child elements (starting with the document's BODY) to locate the specified text.
It also recursively examines the parent element to identify the specified parent element tag; once found, it retrieves the class of that parent.

To view the JSFiddle demonstration, visit: http://jsfiddle.net/vol7ron/bttQN/

function getParentClass(element, parentTag){
   if (element.tagName == parentTag.toUpperCase())
       return element.className;
   return getParentClass(element.parentNode,parentTag);
}

window.findParentClass = function (text,tagName){
    var elements = document.getElementsByTagName('body');
    for (var n=elements.length; n--;){
        var foundClass = (function searchNextChild(el){
            if (!el.children.length) {
                if (el.textContent == text) 
                   return getParentClass(el,tagName);
                return;
            }
            for (var i=0, n=el.children.length; i<n; i++)
               return searchNextChild(el.children[i]);
        })(elements[n]);

        return foundClass;
    }
};

Example Usage:

alert( findParentClass('Chicken','li') );

Answer 4

Although not fully comprehensive, this code snippet serves two main purposes:

It recursively scans through child elements (starting with the document's BODY) to locate the specified text.
It also recursively examines the parent element to identify the specified parent element tag; once found, it retrieves the class of that parent.

To view the JSFiddle demonstration, visit: http://jsfiddle.net/vol7ron/bttQN/

function getParentClass(element, parentTag){
   if (element.tagName == parentTag.toUpperCase())
       return element.className;
   return getParentClass(element.parentNode,parentTag);
}

window.findParentClass = function (text,tagName){
    var elements = document.getElementsByTagName('body');
    for (var n=elements.length; n--;){
        var foundClass = (function searchNextChild(el){
            if (!el.children.length) {
                if (el.textContent == text) 
                   return getParentClass(el,tagName);
                return;
            }
            for (var i=0, n=el.children.length; i<n; i++)
               return searchNextChild(el.children[i]);
        })(elements[n]);

        return foundClass;
    }
};

Example Usage:

alert( findParentClass('Chicken','li') );

Struggling to navigate the DOM using JavaScript and looking for guidance?

Answer №1

Answer №2

Similar questions

Introducing additional choices to the list and automatically refreshing the list with the latest updates

Protractor: Configuration file failed to load

Enriching an array with values using Mongoose

Enhance Your Vue Tables with Unique Custom Filters

I want to display events from my database table on their corresponding dates using JavaScript and jQuery. How can I achieve this?

Prevent identical values from being added repeatedly to a table while updating in real-time

Customizing Django forms.Textarea in template or declaring in models is essential for creating a unique

Exhilarating Javascript document with fresh lines and line breaks

Update the array state based on the selection of checkboxes and user input in real-time

Is there a way to showcase individual components on a single surface one at a time?

The value of an AngularJS service is not being reflected in the view

Modify the image source using Javascript

What is the best way to turn off the legends in chart.js?

Transferring hyperlink text to a different page using Express JS

Is it possible to utilize Vue's splice method within a forEach loop in order to delete multiple elements at

Issue encountered while compiling ReactJs: Unexpected token error found in App.js

In my Laravel Vue JS project, every Put and Delete route method triggers a 302 error

Encountering issues while attempting to transmit several files to backend in React/NestJS resulting in a BAD REQUEST error

What is the optimal location for storing component fetch logic?

Steps for adjusting the position of this div in relation to the main container