Aiding with the Document Object Model, ancestors of ancestors, offspring of offspring

Question

Aiding with the Document Object Model, ancestors of ancestors, offspring of offspring

Using the Webform module in Drupal has its perks, but it automatically writes all the ids and classes which can be frustrating when trying to add your own. Unfortunately, sometimes the element you need doesn't have an id or class "a" that's nestled inside a "legend" with a class but no id within a fieldset with an id.

Even though getElementById('myid') works fine, accessing this specific element is proving to be a challenge. Many attempts using code like:

document.getElementById('webform-created-id-here').getElementsByTagName('legend').getElementsByTagName('a');

have been unsuccessful so far, leaving me feeling lost in my understanding of DOM navigation. Any advice or suggestions would be greatly appreciated!

Thank you for your help!

javascript

Answer 1

Answer №1

When using getElementsByTagName, it will return a nodelist containing the elements that were found. In order to select a specific element, you need to specify its index.

For example, if you want to target the first element:

var test = document.getElementById('webform-created-id-here').getElementsByTagName('legend')[0].getElementsByTagName('a')[0];

VIEW DEMO

Answer 2

When using getElementsByTagName, it will return a nodelist containing the elements that were found. In order to select a specific element, you need to specify its index.

For example, if you want to target the first element:

var test = document.getElementById('webform-created-id-here').getElementsByTagName('legend')[0].getElementsByTagName('a')[0];

VIEW DEMO

Answer 3

Answer №2

Explore the depths of the DOM yourself by traversing through it manually. Each element's children are accessible through the childNodes attribute present in every node.

function exploreDOM (element, test) {
    if (test(element)) {
        return element;
    }
    else {
        var children = element.childNodes;
        var result;
        for (var i=0; i<children.length; i++) {
            result = exploreDOM(children[i], test);
            if (result) {
                return result;
            }
        }
    }
    return null;
}

This implementation is just one way to approach this task quickly. There may be room for optimizations but it should give you a good starting point.

To use this function, do as follows:

exploreDOM(document.body, function(element){
    if (element == something_specific) { 
        return 1;
    }
    return 0;
});

You can also create a similar function to test parent elements:

function testParents (element, test) {
    var parent = element.parentNode;

    if (test(parent)) {
        return 1;
    }
    else {
        if (parent != document.body) {
            return testParents(parent, test);
        }
    }
    return 0;
}

An example usage could be like this:

exploreDOM(document.body, function(el){
    if (el.tagName == 'a' && testParents(el, function(p){
        if (p.tagName == 'legend' && testParents(p, function(pp){
            if (pp.id == 'specific-webform-id') {
                return 1;
            }
            return 0;
        })) {
            return 1;
        }
        return 0;
    })) {
        return 1;
    }
    return 0;
});

Alternatively, you can initiate the traversal from the desired element using getElementById instead of starting from document.body.

Answer 4

Explore the depths of the DOM yourself by traversing through it manually. Each element's children are accessible through the childNodes attribute present in every node.

function exploreDOM (element, test) {
    if (test(element)) {
        return element;
    }
    else {
        var children = element.childNodes;
        var result;
        for (var i=0; i<children.length; i++) {
            result = exploreDOM(children[i], test);
            if (result) {
                return result;
            }
        }
    }
    return null;
}

This implementation is just one way to approach this task quickly. There may be room for optimizations but it should give you a good starting point.

To use this function, do as follows:

exploreDOM(document.body, function(element){
    if (element == something_specific) { 
        return 1;
    }
    return 0;
});

You can also create a similar function to test parent elements:

function testParents (element, test) {
    var parent = element.parentNode;

    if (test(parent)) {
        return 1;
    }
    else {
        if (parent != document.body) {
            return testParents(parent, test);
        }
    }
    return 0;
}

An example usage could be like this:

exploreDOM(document.body, function(el){
    if (el.tagName == 'a' && testParents(el, function(p){
        if (p.tagName == 'legend' && testParents(p, function(pp){
            if (pp.id == 'specific-webform-id') {
                return 1;
            }
            return 0;
        })) {
            return 1;
        }
        return 0;
    })) {
        return 1;
    }
    return 0;
});

Alternatively, you can initiate the traversal from the desired element using getElementById instead of starting from document.body.

Aiding with the Document Object Model, ancestors of ancestors, offspring of offspring

Answer №1

Answer №2

Similar questions

Automatically fill in an input field with jQuery by using the value from another input field

Browse the string on the web browser

Manipulating element height in AngularJS

What could be causing the getComputedStyle() method to malfunction within my Nuxt application?

Attempting to isolate SQL outcome in order to adjust price based on a percentage

Exiting the modal/popup box is currently disabled

What is the process for updating the source in an input box?

Deactivate and reinitialize customized box using jQuery

Can you explain the distinction between using call and apply?

Assistance needed in retrieving an element using jQuery

Facing an obstacle in Angular as I am unable to view my data

Fixing quotation marks for ajax json: Ensuring proper stringification

Ways to analyze and contrast two ajax replies post parsing

Struggling to align text alongside a left-floating image within a dialog box

Modifying the initial state values in Redux Form is prohibited

Switch the status of an individual item within a datalist using jQuery in an ASP.NET application

Grafana: Setting up InfluxDB queries using panel plugin. Issue with HTML input element after value is set by TypeScript

Height of VUE Carousel 3D Slider dimension

Sending dynamic data from JavaScript using AJAX to interact with PHP is a crucial aspect of modern

Unable to display the response received in jQuery due to a technical issue with the JSON data