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>