Exploring the DOM, store all anchor elements inside a <ul> tag with a specific ID in an array

Question

Exploring the DOM, store all anchor elements inside a <ul> tag with a specific ID in an array

I'm attempting to extract all the anchor tags from a list and store them in an array by traversing the DOM. So far, I have been successful in getting the list items and their inner HTML into an array, but I am facing difficulties in retrieving each LI's anchor tag. The lines that are causing issues have been commented out.

<ul id="menu-list">
<li><a href="#">List Item 1</a></li>
<li><a href="#">List Item 2</a></li>
<li><a href="#">List Item 3</a></li>
<li><a href="#">List Item 4</a></li>                        
</ul>

<script type="text/javascript">
var list = document.getElementById('menu-list');
var listItems = list.getElementsByTagName('li'); //works
var listItemAnchors = listItems.firstChild //not working OR....
var listItemAnchors = listItems.childNode[0] //not working

var menuListItems = [];
for (i = 0; i < listItemAnchors.length; i++) {
    var arrValue = listItemsAnchors[i]
    menuListItems.push(arrValue);
    alert('item added');
}
</script>

javascript dom

Answer 1

Answer №1

Exploring alternatives to using getElementsByTagName:

const anchorElements = document.querySelectorAll('a');

Discover more here: http://example.com

Answer 2

Exploring alternatives to using getElementsByTagName:

const anchorElements = document.querySelectorAll('a');

Discover more here: http://example.com

Answer 3

Answer №2

Your issue lies here:

var listItemAnchors = listItems.firstChild //not functioning OR....
var listItemAnchors = listItems.childNode[0] //not working

getElementsByTagName() retrieves a collection, therefore listItemAnchors constitutes a group of elements (similar to an array structure, could either be an HTMLCollection or NodeList) and lacks the property firstChild (or any other Element properties). You need to iterate through all your listItems, or follow @Cherniv's advice and directly fetch the anchors from list.

If you wish to solely retrieve the first anchor from each li, give this a go. Otherwise, @Cherniv's solution is the optimal approach;

var list = document.getElementById('menu-list');
var listItems = list.getElementsByTagName('li');
var listItemAnchors = [];

var potentialAnchor;
//for each list item
for (var index = 0; index < listItems.length; ++index) {
    potentialAnchor = listItems[index].children[0];

    //check if it's an anchor
    if (potentialAnchor.tagName.toLowerCase() == 'a')
        listItemAnchors.push(potentialAnchor);
}

console.log(listItemAnchors);

Answer 4

Your issue lies here:

var listItemAnchors = listItems.firstChild //not functioning OR....
var listItemAnchors = listItems.childNode[0] //not working

getElementsByTagName() retrieves a collection, therefore listItemAnchors constitutes a group of elements (similar to an array structure, could either be an HTMLCollection or NodeList) and lacks the property firstChild (or any other Element properties). You need to iterate through all your listItems, or follow @Cherniv's advice and directly fetch the anchors from list.

If you wish to solely retrieve the first anchor from each li, give this a go. Otherwise, @Cherniv's solution is the optimal approach;

var list = document.getElementById('menu-list');
var listItems = list.getElementsByTagName('li');
var listItemAnchors = [];

var potentialAnchor;
//for each list item
for (var index = 0; index < listItems.length; ++index) {
    potentialAnchor = listItems[index].children[0];

    //check if it's an anchor
    if (potentialAnchor.tagName.toLowerCase() == 'a')
        listItemAnchors.push(potentialAnchor);
}

console.log(listItemAnchors);

Answer 5

Answer №3

arrayOne=[];
var items = document.getElementsByTagName('a');
for (var j = 0; j < items.length; j++) {
    arrayOne.push(items[j].innerText)
}

Answer 6

arrayOne=[];
var items = document.getElementsByTagName('a');
for (var j = 0; j < items.length; j++) {
    arrayOne.push(items[j].innerText)
}

Exploring the DOM, store all anchor elements inside a <ul> tag with a specific ID in an array

Answer №1

Answer №2

Answer №3

Similar questions

Issue with scrollTop not functioning when using onclick on an <a> tag within a div

Incorporating z-index into weekly rows within the FullCalendar interface

Executing the Npm audit fix --force command will automatically implement its own suggestions

Is there a way to transfer a component as a prop to another component in React?

Troubleshooting auth error with Android and nativescript-plugin-firebase

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

Why is it that when I refresh the page in Angular, my logged-in user is not being recognized? What could be causing this

Step-by-step guide on replacing Express API routes with React Router

Stop the Sidebar from showing up on certain pages with Next.js

Updating the component following an API request in ReactJS

Include a class in ul > li elements upon page load in Angular4

How can I ensure that the state is only updated after the map function has finished executing in React?

The Challenge of the Universe's Origin

Revamp the current webpage to display attribute values in textual format

Create an animation effect where a div increases in height, causing the divs beneath it to shift downward in a

The command 'create-react-app' is not valid and cannot be recognized as an internal or external command, operable program, or batch file

The method to eliminate the default active class using AngularJS when clicking on different links

Build a Docker container for a project that requires utilizing yarn link for dependencies

Guide on retrieving the mouse button press from a command event using XUL

Blending ASP.NET Core 2.0 Razor with Angular 4 for a Dynamic Web Experience