10/40 - XML DOM Manipulation

Exploring .getElementsByTagName

As explored in a previous post, we can store objects in the XML DOM and retrieve the data, but I'm not a fan, so let's also allow the user to access my DOM object and interact with the elements I allow. In really simple terms, we are filtering some data.

Selecting Element by Tag Name

The dropdown above illustrates the ability to use the .getElementsByTagName inside a loop to auto-populate a form option. For web development, this could be image URLs, pre-existing web files, raw code, etc., that you are selecting and displaying within a section. This reduces your webpage load speed, thus improving user experience.

// Populate the dropdown menu with car models
for (let i = 0; i < cars.length; i++) {

    // Get the model name of the current car
    const model = cars[i].getElementsByTagName("model")[0].childNodes[0].nodeValue;
   
    // Create a new option element for the dropdown
    const option = document.createElement("option");

    // Set the value of the option to the index of the car
    option.value = i; // Store the index of the car

    // Set the text content of the option to the car model
    option.textContent = model;

    // Append the option to the dropdown menu
    carSelect.appendChild(option);
}